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-indexdans les paramètres du Web Widget (Classic). Cet article met en évidence des cas élémentaires de z-indexpour modifier la présentation de votre widget avec les autres éléments de votre site Web.
) dans le coin supérieur droit du Web Widget pour ouvrir cet article dans un nouvel onglet de navigateur. 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-indexdétermine quel élément s’affiche au-dessus de l’autre. Le z-indexvalue 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-indexaffecté à l’index le plus élevé s’affiche avant les autres éléments. Par exemple, si un conteneur A est affecté z-indexsur 2 et le conteneur B est affecté à z-indexsur 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-indexont trait au Web Widget (Classic)?
Cadre z-indexpour 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-indexdu Web Widget (Classic) est très pratique.
Comment configurer la z-indexpour mon Web Widget (Classic)?
Deux options de configuration z-index
Vous pouvez configurer la z-indexpour votre Web Widget de deux façons:
- Utilisez le
window.zESettingsobjet. Cela définiraz-indexquand 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-indexLa 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-indexdépasse ce chiffre.Exemple utilisant l’objet window.zESettings
Le window.zESettings vous permet de définir z-indexau chargement de la page
Dans cet exemple, nous allons définir la valeur z-indexen utilisant le window.zESettingsobjet. Pour rappel, le window.zESettingsL’objet est chargé uniquement au démarrage du widget. Pour mettre à jour le z-indexvalue 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-indexvaleur 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-indexde notre élément de conteneur n’a pas été défini explicitement. Cela signifie que z-indexde l’élément du conteneur sera par défaut auto, ce qui correspond à 0. Pour masquer le Web Widget (classique), configurez la valeur z-indexvaleur 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-indexla valeur de l’élément de conteneur est supérieure à z-indexvaleur du Web Widget (Classic).
Le nouveau z-indexvalue 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-indexsur 2. Nous modifierons uniquement les z-indexdu 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-indexvaleur de votre Web Widget (Classic). Le window.zESettings vous permet de définir z-indexau 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.