Passer au contenu principal
Nous vous recommandons de simuler votre widget avant de l’activer et de l’associer à l’une de vos campagnes Kameleoon. Cliquez sur Simuler dans l’en-tête du Widget Studio pour simuler votre widget.
Vous pouvez vérifier les modifications apportées à votre widget et vérifier ses paramètres (si des événements ont été configurés, par exemple).

​
Paramètres

Vous pouvez choisir de positionner votre widget fixe dans la page ou au-dessus de la page. Cette sélection affecte les paramètres disponibles.

​
Fixe dans la page

  • Position : Si vous sélectionnez Fixe dans la page, votre widget apparaîtra fixe, parmi le contenu de la page.
  • Élément d’ancrage : Saisissez le CSS de l’élément utilisé comme référence pour la position de votre widget.
  • Position de l’ancrage : Sélectionnez la position du widget par rapport à l’élément d’ancrage : Avant, Remplacer ou Après.
  • Appareils : Choisissez les appareils sur lesquels le widget apparaîtra.
  • Sortie de code :
    • JS & CSS : Le widget est inséré dans le DOM principal avec JavaScript et ses styles sont appliqués à l’aide du CSS standard.
      • Cette option est idéale pour les widgets qui doivent se fondre dans le design de votre site ou pour les cas d’utilisation où vous souhaitez restyliser ou adapter le widget.
    • JS avec Shadow DOM : Le widget est injecté avec JavaScript, mais son HTML et son CSS résident dans un Shadow DOM (un sous-arbre isolé du DOM).
      • Cette option est idéale pour les widgets complexes et autonomes qui doivent se comporter de la même manière partout ou pour des scénarios où la stabilité est plus importante que la personnalisation.
      • Votre widget sera essentiellement protégé (dans le Shadow DOM) des CSS externes ou d’autres règles de style.

​
Au-dessus de la page

  • Position : Si vous sélectionnez Au-dessus de la page, votre widget apparaîtra au-dessus du contenu de votre page.
    • Appareils : Choisissez les appareils sur lesquels le widget apparaîtra.
  • Sortie de code :
    • JS & CSS : Le widget est inséré dans le DOM principal avec JavaScript et ses styles sont appliqués à l’aide du CSS standard.
      • Cette option est idéale pour les widgets qui doivent se fondre dans le design de votre site ou pour les cas d’utilisation où vous souhaitez restyliser ou adapter le widget.
    • JS avec Shadow DOM : Le widget est injecté avec JavaScript, mais son HTML et son CSS résident dans un Shadow DOM (un sous-arbre isolé du DOM).
      • Cette option est idéale pour les widgets complexes et autonomes qui doivent se comporter de la même manière partout ou pour des scénarios où la stabilité est plus importante que la personnalisation.
      • Votre widget sera essentiellement protégé (dans le Shadow DOM) des CSS externes ou d’autres règles de style.

​
Lancer la simulation

Cliquez sur Simuler pour lancer la simulation sur l’URL que vous avez saisie lors de la création de votre widget. Vous pouvez tester votre widget dans des conditions réelles et vérifier son comportement (par exemple, vous assurer que les animations fonctionnent correctement si elles ont été configurées).