Le Web Widget Zendesk (Classic) est fourni avec de nombreux paramètres et options de personnalisation. Vous devrez parfois spécifier l’ordre d’empilage du Web Widget (Classic) par rapport aux autres contenus de votre page Web. Vous pouvez le faire en configurant la z-index
dans les paramètres du Web Widget (Classic). Cet article met en évidence des cas élémentaires de z-index
pour modifier la présentation de votre widget avec les autres éléments de votre site Web.

Qu’est-ce que z-index
?
Explication et définition de z-index
Z-index
est une propriété CSS utilisée pour définir la visibilité et le positionnement du contenu qui se chevauche. Quand deux éléments se superposent, z-index
détermine quel élément s’affiche au-dessus de l’autre. Le z-index
value peut être affecté avec un entier ou des valeurs globales comme l’heriter, l’initial ou la non-définition.
Quand vous utilisez des entiers, les éléments z-index
affecté à l’index le plus élevé s’affiche avant les autres éléments. Par exemple, si un conteneur A est affecté z-index
sur 2 et le conteneur B est affecté à z-index
sur 1, le conteneur A sera placé devant le conteneur B. Quand vous utilisez des valeurs globales, l’élément prend la position affectée par rapport à la valeur de son parent..
Comment ça marche z-index
ont trait au Web Widget (Classic)?
Cadre z-index
pour votre propre widget
Il peut arriver que vous vouliez que votre contenu s’affiche avant le Web Widget (Classic) ou que vous souhaitiez masquer le Web Widget (Classic) derrière un autre contenu. C’est là que le paramètre z-index
du Web Widget (Classic) est très pratique.
Comment configurer la z-index
pour mon Web Widget (Classic)?
Deux options de configuration z-index
Vous pouvez configurer la z-index
pour votre Web Widget de deux façons:
- Utilisez le
window.zESettings
objet. Cela définiraz-index
quand le widget est chargé pour la première fois. Pour en savoir plus sur l’utilisation duwindow.zESettings
, consultez notre documentation destinée aux développeurs ici. - Utilisez l’API updateSettings. Cela permettra au
z-index
à mettre à jour au moment de l’exécution. Pour en savoir plus sur l’utilisation de l’API updateSettings, consultez notre documentation destinée aux développeurs ici.
z-index
La valeur par défaut est un index de 999998, ce qui signifie que le widget s’affichera au début de l’écran sauf si un autre objet z-index
dépasse ce chiffre.Exemple utilisant l’objet window.zESettings
Le window.zESettings
vous permet de définir z-index
au chargement de la page
Dans cet exemple, nous allons définir la valeur z-index
en utilisant le window.zESettings
objet. Pour rappel, le window.zESettings
L’objet est chargé uniquement au démarrage du widget. Pour mettre à jour le z-index
value au moment de l’exécution en utilisant l’API updateSettings, voir les exemples ci-dessous.
Voici à quoi ressemblera la page avant toute modification de la z-index
valeur du Web Widget (Classic). Comme prévu, le Web Widget (classique) s’affiche au-dessus de nos autres contenus:
Dans l’exemple ci-dessus, le z-index
de notre élément de conteneur n’a pas été défini explicitement. Cela signifie que z-index
de l’élément du conteneur sera par défaut auto, ce qui correspond à 0. Pour masquer le Web Widget (classique), configurez la valeur z-index
valeur inférieure à 0, comme illustré ici:
Maintenant, quand la page est chargée, le Web Widget (Classic) s’affiche derrière l’élément de conteneur. En effet, z-index
la valeur de l’élément de conteneur est supérieure à z-index
valeur du Web Widget (Classic).
Le nouveau z-index
value fait apparaître le Web Widget (Classic) derrière les autres éléments de la page Web.
Exemples utilisant l’API updateSettings
L’API updateSettings vous permet d’effectuer des modifications en temps réel.
Dansces exemples, vous verrez que la fenêtre a reçu un message z-index
sur 2. Nous modifierons uniquement les z-index
du widget pour le masquer ou l’afficher au début de l’écran.
Exemple 1 : Masquage du Web Widget (classique) derrière la fenêtre contextuelle
Dans notre premier exemple, pour masquer le Web Widget (Classic) derrière la fenêtre, nous définissons le widget z-index
à 1 comme illustré ci-dessous.
Regardez-le en action:
Exemple 2 : Placez le Web Widget (classique) au premier plan de la fenêtre contextuelle.
Dans cet exemple, nous voulons que le Web Widget (Classic) s’affiche avant la fenêtre pour qu’il soit toujours accessible sur la page. Nous utiliserons à nouveau zE webWidget pour mettre à jour les paramètres et définir la valeur z-index
à 3. Cela déplace la position du Web Widget (Classic).
Regardez-le en action:
Résumé et ressources supplémentaires
Consultez ces liens pour en savoir plus.
En tant que développeur Web, vous pouvez choisir la meilleure méthode pour configurer la z-index
valeur de votre Web Widget (Classic). Le window.zESettings
vous permet de définir z-index
au chargement de la page, alors que l’API updateSettings vous permet d’effectuer des modifications en temps réel. Pour en savoir plus au sujet de la personnalisation de votre widget, consultez les sections suivantes:
Personnalisation avancée du Web Widget (Classic)
Notre communauté de développeurs
Traduction - exonération : cet article a été traduit par un logiciel de traduction automatisée pour permettre une compréhension élémentaire de son contenu. Des efforts raisonnables ont été faits pour fournir une traduction correcte, mais Zendesk ne garantit pas l’exactitude de la traduction.
Si vous avez des questions quant à l’exactitude des informations contenues dans l’article traduit, consultez la version anglaise de l’article, qui représente la version officielle.
0 Commentaires
Vous devez vous connecter pour laisser un commentaire.