Cet article est aussi disponible en :

Comment intégrer un élément Engage sur mon site ?

L'intégration d'un élément Engage sur votre site très simple à réaliser. Voici comment procéder étape par étape.

Intégrer le SDK Engage sur l'ensemble de votre 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>

La méthode autoCreate() permet de créer les éléments correspondants aux conditions qui sont définies dans le Dashboard. Pour profiter pleinement de la flexibilité de Poool Engage, nous vous conseillons donc de favoriser celle-ci dans votre intégration.

Dans le cas où vous souhaitez forcer l'afficher d'un élément manuellement, alors la méthode createElement() sera appropriée. A garder en tête dans ce cas : les conditions paramétrées côté Dashboard ne seront pas appliquées.

Ajoutez votre segmentation

Dans le cas où vous souhaitez activer une segmentation spécifique, selon des caractéristiques qui vous sont propres, vous devez passer des filtres personnalisés dans la méthode autoCreate(). Plus d'infos à ce sujet dans notre article sur les filtres personnalisées.

engage.autoCreate({filters:['valeur1', 'valeur2','valeur3']}):

Configurer l'affichage des différents formats

Une fois le script intégré sur votre page, l'élément Engage activé côté Dashboard sera affiché par défaut en surimpression.

Pour que l'élément Engage s'affiche à l'endroit souhaité, vous avez plusieurs options selon le rendu final souhaité :

Format Modale

Pour afficher le format modale, vous pouvez définir son style via le CSS du container parent.

Exemple de CSS à utiliser pour le positionnement et effet sur la page :

#p3-parent-frame {

  position: fixed;

  margin: auto;

  bottom: 0;

  left: 0;

  right: 0;

  top:0;

  overflow: hidden;

  justify-content: center;

  z-index: 1000;

}

Format Bandeau

Pour l'afficher au format bandeau, vous pouvez définir son emplacement via le CSS parent dans le Dashboard :

__Exemple de CSS ici pour le positionner sur le bas de page : __

#p3-parent-frame {
  position: fixed;
  margin: auto;
  bottom: 0;
  z-index: 80;
}

Ciblage balise

Vous avez aussi l'option de choisir l'emplacement exact de votre élément sur la page via une balise présente sur votre page.

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="poool-engage-banner"></div>

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.

Paramétrer l'élément dans le Dashboard Poool Engage

Une fois l'intégration réalisées, les paramétrages peuvent être réalisés dans le Dashboard.

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.

Plus d'infos dans notre section dédiée 👉 Engage - Apparences

Pour gagner du temps, n'hésitez pas à parcourir les modèles d'apparences disponibles depuis votre dashboard ou consulter notre catalogue d'apparences. Notre équipe pourra mettre à disposition des templates.

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.

Plus d'infos dans notre section dédiée 👉 Engage - les conditions d'affichage

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 !

Mis à jour le : 27/05/2026

Cet article a-t-il répondu à vos questions ?

Merci !