Intégrer Engage en React/Next

Poool Engage peut être intégré simplement dans une application React grâce à la librairie dédiée @poool/react-engage.

Cette intégration permet d’afficher des éléments Engage directement dans une application SPA, tout en conservant une configuration centralisée via le Dashboard.

Voici la documentation officielle: https://www.poool.dev/fr/docs/engage/react

Principe de fonctionnement

L’intégration repose sur un composant principal, EngageContext, qui initialise le SDK Engage et partage la configuration à l’ensemble de l’application.

Les éléments sont ensuite affichés via deux approches :

• un affichage manuel avec Element
• un affichage automatique avec Elements

Installation

yarn add @poool/react-engage

Initialisation

La première étape consiste à envelopper votre application avec EngageContext.

import { EngageContext } from '@poool/react-engage';

function App() {
  return (
    <EngageContext appId="YOUR_APP_ID">
      <Page />
    </EngageContext>
  );
}

Ce composant initialise Engage et rend disponible la configuration globale à tous les composants enfants.

Affichage d’un élément spécifique

Le composant Element permet d’afficher un élément Engage précis à partir de son slug.

import { Element } from '@poool/react-engage';

<Element slug="element_slug" />

Cette approche est utile lorsque vous souhaitez contrôler précisément l’emplacement ou le comportement d’un élément dans votre interface.

Affichage automatique des éléments

Le composant Elements permet de charger automatiquement tous les éléments configurés dans votre Dashboard.

import { Elements } from '@poool/react-engage';

<Elements />

Une fois placé dans votre application, il se charge de récupérer et afficher les éléments correspondant aux règles définies côté Dashboard Engage.

Filtrer les éléments affichés

Le composant Elements permet également d’appliquer des filtres afin de contrôler quels éléments doivent être affichés dans un contexte donné.

Cela se fait via la propriété filters.

<Elements
    filters={['homepage', 'premium']}
/>

Gestion des événements

Les événements Engage sont également accessibles dans l’intégration React.

Ils permettent de réagir aux interactions utilisateur (affichage, clic, soumission de formulaire, etc.) et de les exploiter côté code.

Engage déclenche automatiquement des événements lors du cycle de vie des éléments.

En React, ces événements peuvent être définis directement via la prop events, soit au niveau global dans EngageContext, soit au niveau d’un Element ou de Elements.

<EngageContext
  appId="YOUR_APP_ID"
  events={{
    onClick: (event) => {},
    onFormSubmit: (event) => {},
  }}
>
  <App />
</EngageContext>

<Element
  slug="element_slug"
  events={{
    onClick: (event) => {},
  }}
/>

Les événements reçus contiennent des données, et peuvent être utilisés pour adapter vos comportements en fonction des interactions utilisateur.

Bonnes pratiques

Pour une intégration optimale :

• placer EngageContext au niveau racine de l’application
• utiliser Elements pour une gestion automatique des éléments
• utiliser Element pour des cas très ciblés
• exploiter les filters pour adapter les affichages selon les pages ou contextes

Mis à jour le : 06/05/2026