L'intégration d'un élément Engage sur votre site très simple à réaliser. Voici comment procéder étape par étape.
1. Intégrer le SDK Engage sur l'ensemble de mon site
Le SDK Engage est la fondation qui vous permet d'afficher des éléments dynamiques sur votre site web.
Pour intégrer le SDK Engage :
Ajoutez le script : Insérez le script suivant sur l'ensemble des pages de votre site, en modifiant
<your-app-id>par l'identifiant de votre app Poool :
<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>')
.autoCreate();
});
</script>
2. Créer la balise devant accueillir l'élément et appliquer un #ID ou une .classe
Pour que l'élément Engage s'affiche à l'endroit souhaité :
Dans le HTML de votre page, intégrez une div avec un attribut #id ou .classe de votre choix.
A titre d'exemple, nous créons une div avec l'id "#fullscreen-widget". Voici ce que vous devez intégrer au HTML de votre page :
<div id="fullscreen-widget"></div>
Pour gérer le style et le comportement de votre nouvelle div, il faut lui ajouter des règles CSS.
Par exemple, si vous optez pour un format en pleine largeur et par-dessus le contenu de votre page, vous pourriez utiliser les règles CSS suivantes :
#fullscreen-widget {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.7);
}Ciblez la balise depuis le dashboard : Le SDK Engage utilisera cet identifiant ou cette classe pour savoir où afficher l'élément sur la page. Nous revenons sur ce point plus loin 👇
3. Créer l'élément dans le dashboard Poool Engage
L'apparence
Dans le dashboard, rendez-vous sous Engage > Elements > Créer un élément.
Personnalisez l'apparence de votre élément selon le format souhaité : colonnes, couleurs, bouton, formulaire, etc.
💡Pour gagner du temps, n'hésitez pas à parcourir les modèles d'apparences disponibles depuis votre dashboard et à adapter celui de votre choix.
Les conditions d'affichage
Définissez les conditions spécifiques pour l'affichage de votre élément. Par exemple, vous pouvez choisir de n'afficher l'élément qu'après un certain nombre de visites, pour les visiteurs d'un certain pays, ou uniquement sur les devices mobile. En savoir plus sur les conditions d'affichage ici.
Utilisez la condition nommée "Afficher dans un élément cible" et insérez l'#ID ou la .classe de la balise créée sur votre site, en étape 2.
Activer l'élément
Une fois la configuration faite, activez l'élément pour qu'il soit visible pour vos visiteurs selon les conditions définies.
En suivant ces étapes, vous devriez pouvoir intégrer efficacement un élément Engage sur votre site et améliorer l'engagement, la conversion et la rétention de vos visiteurs !
Une question, un souci ? Contactez-nous via le chat !