Vous souhaitez afficher un élément Engage en format popin sur votre site ? Félicitations 🥳 C'est une excellente manière de booster la visibilité de vos messages envers vos lecteurs.

Avant d'activer un élément de ce type, il y a quelques considérations à prendre en compte afin de proposer l'expérience la plus fluide possible.

Dans cet article, nous vous présentons plusieurs méthodes pour gérer l'affichage de votre élément en surimpression.

Option 1 : Appliquer du style au conteneur parent

ℹ Cette option ne demande aucune intégration technique supplémentaire sur votre site. C'est la plus rapide pour afficher un élément en surimpression.

Au moment de créer votre élément Engage depuis le dashboard, vous avez la possibilité d'appliquer du style CSS à celui-ci, comme à son conteneur. C'est cette seconde possibilité que nous allons utiliser pour générer un affichage en surimpression.

Cliquez sur le bouton Modifier les propriétés de l'élément
Déroulez Configuration avancée
Ciblez le conteneur parent en commençant par #p3-parent-frame {
Appliquez le style que vous souhaitez obtenir en utilisant les propriétés CSS de votre choix

Option 2 : Construire une balise pour accueillir un élément popin

Dans le but d'optimiser le temps de chargement de l'élément sur votre page, nous vous conseillons de privilégier l'option n°1 (appliquer du style au conteneur parent).

Cette deuxième méthode peut néanmoins vous être utile si vous souhaitez allez plus loin dans les paramétrages à appliquer à vos éléments CSS.

La première étape avec cette méthode, est de définir le conteneur dans lequel l'élément va s'insérer. En d'autres termes, il faut lui attribuer un identifiant (ou une classe) et lui appliquer du style.

Si vous ne disposez pas déjà d'un emplacement approprié sur votre page pour accueillir un élément popin, vous devez alors le créer.

L'exemple suivant affiche une div plein écran par-dessus le contenu, avec un effet d'ombre venant se placer sur celui-ci. Vous pouvez intégrer cette balise telle quelle sur votre site, ou l'adapter si vous le souhaitez.

ℹ A noter que la div est cachée par défaut, elle sera affiché uniquement au chargement de l’élément Engage, et selon les conditions définies depuis le dashboard. Toutes les infos sont à retrouver sur la section suivante.

HTML

<div id="element-poool-engage"></div>

CSS

#element-poool-engage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
    }

Intégrer une condition d'affichage et de masquage de la div

Une fois la balise intégrée sur vote site, il s'agit de pouvoir :

La cacher lorsque l'élément Engage n'est pas chargé;
L'afficher uniquement lorsque les conditions définies dans le dashboard sont validées (par exemple afficher après 5 secondes, n'afficher qu'une seule fois par jour...);
La rendre invisible lorsqu'un visiteur décide de fermer l'élément en cliquant sur le composant que vous aurez défini dans le dashboard (image ou bouton).

Premièrement, et comme indiqué dans le bloc CSS juste au-dessus, nous conseillons d'ajouter display: none; sur la div qui contient l'élément Engage (identifiée dans notre exemple en tant que #element-poool-engage).

Ensuite, il s'agit de pouvoir déclencher l'affichage de cette balise lorsque nécessaire, puis son masquage si l'utilisateur le décide.

Pour ce faire, rien de plus simple ! Etant donné que le SDK Engage déclenche des événements spécifiques tout au long de la vie de l'élément, nous pouvons nous baser là-dessus et créer les conditions suivantes :

<script id="poool-engage" src="https://assets.poool.fr/engage.min.js" async></script>
<script>
const script = document.getElementById('poool-engage');
script.addEventListener('load', function () {
  Engage
    .init('YOUR-APP-ID')
    .on('ready', () => {
      /* Affiche la balise lorsque l element se declenche */
      document.querySelector('#element-poool-engage').style.display = 'block';
    })
    .on('destroy', () => {
      /* Cache la balise lorsque l element est ferme */
      document.querySelector('#element-poool-engage').style.display = 'none';
    })
    .autoCreate();
});
</script>

Voici juste en-dessous un rendu visuel de cette séquence. Pour en savoir plus sur la création d'un élément depuis le dashboard, consultez cet article.

Vous savez maintenant intégrer un élément Engage par-dessus votre contenu et améliorer l'engagement, la conversion et la rétention de vos visiteurs !

Une question ? Contactez nous sur le chat 😉