> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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