Toutes les collections
Engage
Engage : créer un élément en format popin
Engage : créer un élément en format popin
Anthony Ribeiro avatar
Écrit par Anthony Ribeiro
Mis à jour il y a plus d’une semaine

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 notamment une méthode pour gérer l'affichage, puis le masquage de votre balise pleine page.

Comment construire une balise pour accueillir un élément popin ?

La première étape avant d'afficher un élément sur votre site, est de définir dans quel conteneur celui-ci va se situer. 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 😉

Avez-vous trouvé la réponse à votre question ?