Aperçu

Le Web Widget (Classique) Zendesk propose de nombreux paramètres et options de personnalisation. Il peut arriver que vous deviez spécifier l’ordre de pile du Web Widget (Classique) par rapport au reste du contenu de votre page Web. Vous pouvez le faire en configurant le z-index dans les paramètres du Web Widget (Classique) .

Cet article présente des cas élémentaires z-indexpour modifier la présentation de votre widget avec les autres éléments de votre site Web.

Clause de non-responsabilité : Cet article est fourni à titre informatif uniquement. Zendesk ne fournit pas l’assistance pour le code et ne le garantit pas. Si vous rencontrez des problèmes, publiez-en la description dans la section commentaires ou essayez de trouver une solution en ligne.

Qu'est-ce que z-index?

Z-index est une propriété CSS qui sert à définir la visibilité et le positionnement du contenu qui se superpose. En cas de chevauchement de deux éléments, le marqueur z-index détermine l’élément qui s’affiche au-dessus des autres. La z-index value peut être affectée avec un nombre entier ou des valeurs globales comme hérité, initial et unset.

Quand vous utilisez des entiers, z-index affectés à l’index le plus élevé s’affichent avant les autres éléments. Par exemple, si le conteneur A est affecté z-index de 2 et le conteneur B reçoit un z-index de 1, le conteneur A est placé avant le conteneur B. Quand vous utilisez les valeurs globales, l'élément choisit la position affectée par rapport à sa valeur parente.

Application z-index ont trait au Web Widget (Classique)?

Vous pouvez z-index du Web Widget (Classique) pour afficher votre contenu avant le Web Widget (Classique) ou pour masquer entièrement le Web Widget (Classique) derrière le reste du contenu.

Comment configurer z-index pour mon Web Widget (Classique)?

Vous pouvez définir la z-index pour votre widget de deux façons :

  1. Utilisez une window.zESettings . Cela définira z-index au chargement initial du widget. Pour en savoir plus sur l’utilisation du window.zESettings , consultez la documentation pour les développeurs : Paramètres - Référence.
  2. Utilisez une updateSettings API. Cela permet au z-index afin d’être mis à jour à l’exécution. Pour en savoir plus sur l’utilisation du updateSettings API, consultez la documentation pour les développeurs : Core API.
Remarque : Le Web Widget (Classique) z-index en configurant par défaut l’index 999998, ce qui signifie que le widget s’affichera en avant de l’écran, sauf si un autre objet z-index dépasse ce chiffre.

Exemple utilisant l’objet window.zESettings

La window.zESettings vous permet de définir z-index au chargement de la page.

Cet exemple définit la z-index en utilisant le mot-clé window.zESettings . Pour rappel, le marqueur window.zESettings L'objet est chargé uniquement au démarrage du widget. Pour mettre à jour : z-index à l’exécution en utilisant updateSettings API, consultez les exemples ci-dessous.

Voici à quoi ressemblera la page avant toute modification de l’ z-index du Web Widget (Classique). Comme nous nous y attendons, le Web Widget (Classique) s’affiche au-dessus de notre autre contenu :
mceclip0.png

Dans l’exemple ci-dessus, le marqueur z-index de l’élément conteneur n’a pas été défini explicitement. Cela signifie z-index de l’élément conteneur prend la valeur auto par défaut, ce qui correspond à 0. Pour masquer le Web Widget (Classique), définissez les paramètres z-index inférieure à 0, comme illustré ici :

mceclip1.png

Maintenant, une fois la page chargée, le Web Widget (Classique) s’affiche derrière l’élément conteneur. En effet, la z-index La valeur de l’élément conteneur est supérieure à z-index du Web Widget (Classique).

mceclip2.png

La nouvelle z-index value fait apparaître le Web Widget (Classique) derrière les autres éléments de la page web.

Exemples utilisant le mot-clé updateSettings API

La updateSettings L’API vous permet d’effectuer des modifications en temps réel

Ces exemples vous montrent que la fenêtre contextuelle a reçu une z-index sur 2. Modifier uniquement la z-index du widget pour le masquer ou l’afficher à l’écran.Example_Image_1.png

Exemple 1 : Masquage du Web Widget (Classique) derrière la fenêtre

Dans le premier exemple, pour masquer le Web Widget (Classique) derrière la fenêtre, définissez les paramètres z-index à 1 comme illustré ci-dessous.

Example_Image_2.png

Découverte concrète :

Example_Image__GIF__3.gif

Exemple 2 : Placer le Web Widget (Classique) au début de la fenêtre contextuelle

Cet exemple vous montre comment afficher le Web Widget (Classique) devant la fenêtre contextuelle pour qu’il reste accessible sur la page. Cet exemple utilise encore une fois zE webWidget pour updateSettings et définissez z-index à 3. Cela déplacera la position du Web Widget (Classique).

Example_Image_4.png

Découverte concrète :

Example_Image__GIF__5.gif

Résumé et ressources supplémentaires

En tant que développeur Web, vous pouvez choisir la meilleure méthode de configuration z-index de votre Web Widget (Classique). La window.zESettings vous permet de définir z-index au chargement de la page, alors que updateSettings L’API vous permet d’effectuer des modifications en temps réel. Pour en savoir plus sur la personnalisation de votre widget, consultez cet article : Personnalisation avancée du Web Widget (Classique).

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.

Réalisé par Zendesk