# Indicateurs de fonctionnalité

{% hint style="warning" %}
L’utilisation du contenu adaptatif avec des indicateurs de fonctionnalité nécessite l’ajout de code à votre application.

Actuellement, l’assistant GitBook ne prend en charge que les configurations basées sur React.
{% endhint %}

GitBook fournit des fonctions d’assistance et des intégrations pour des fournisseurs populaires de services de feature flags comme [**LaunchDarkly**](#launchdarkly) et [**Reflag**](#reflag).

Cela vous permet de lire les feature flags auxquels les utilisateurs ont accès dans votre produit, au fur et à mesure qu’ils consultent votre documentation. C’est utile si vous devez afficher une documentation pour des fonctionnalités qui ne sont disponibles qu’à un groupe spécifique de personnes.

### LaunchDarkly

LaunchDarkly vous permet d’envoyer l’accès aux feature flags sous forme de claims via le [`launchdarkly-react-client-sdk`](https://launchdarkly.com/docs/sdk/client-side/react/react-web) et le package [`@gitbook/adaptive`](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/fr/site-access/adaptive-content/enabling-adaptive-content/broken-reference) .

Si vous utilisez déjà des feature flags LaunchDarkly dans votre produit, il y a de fortes chances que ce package soit déjà configuré.

Pour transmettre ces feature flags sous forme de claims à GitBook, suivez ces étapes :

{% stepper %}
{% step %}
**Installez l’intégration LaunchDarkly**

Pour commencer, vous devrez d’abord [installer l’intégration LaunchDarkly](https://app.gitbook.com/integrations/launchdarkly) sur votre site GitBook.
{% endstep %}

{% step %}
**Configurez votre projet et vos clés d’accès**

Ajoutez la clé de votre projet et votre jeton d’accès de service depuis vos [paramètres LaunchDarkly](https://app.launchdarkly.com/settings) à la configuration de l’intégration.
{% endstep %}

{% step %}
**Installez et ajoutez l’assistant GitBook à votre application**

Après avoir configuré l’intégration LaunchDarkly, vous devrez installer l’assistant de contenu adaptatif GitBook dans votre application.

```bash
npm install @gitbook/adaptive
```

{% endstep %}

{% step %}
**Configurez votre application**

Vous devrez utiliser l’assistant `withLaunchDarkly` avec le SDK React de LaunchDarkly pour transmettre le contexte à GitBook.

<pre class="language-javascript"><code class="lang-javascript">import { render } from 'react-dom';
<strong>import { withLaunchDarkly } from '@gitbook/adaptive';
</strong><strong>import { asyncWithLDProvider, useLDClient } from 'launchdarkly-react-client-sdk';
</strong>import MyApplication from './MyApplication';

function PassFeatureFlagsToGitBookSite() {
<strong>    const ldClient = useLDClient();
</strong>    React.useEffect(() => {
        if (!ldClient) {
            return;
        }
<strong>        return withLaunchDarkly(ldClient);
</strong>    }, [ldClient]);
    return null;
}
(async () => {
    const LDProvider = await asyncWithLDProvider({
        clientSideID: 'client-side-id-123abc',
        context: {
            kind: 'user',
            key: 'user-key-123abc',
            name: 'Sandy Smith',
            email: 'sandy@example.com'
        },
        options: { /* ... */ }
    });
    render(
        &#x3C;LDProvider>
            &#x3C;PassFeatureFlagsToGitBookSite />
            &#x3C;MyApplication />
        &#x3C;/LDProvider>,
        document.getElementById('reactDiv'),
    );
})();
</code></pre>

{% endstep %}

{% step %}
**Vérifiez votre schéma de visiteur**

Un [schéma de visiteur](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/fr/site-access/adaptive-content/enabling-adaptive-content/..#set-your-visitor-schema) est requis pour que vos claims puissent être lus sur votre site publié. L’installation et la configuration de l’intégration LaunchDarkly devraient définir automatiquement votre schéma de visiteur pour vous.
{% endstep %}

{% step %}
**Personnalisez votre contenu**

Après avoir défini votre schéma de visiteur, vous êtes prêt à adapter l’expérience de votre documentation aux utilisateurs qui visitent votre site, en utilisant les feature flags auxquels l’utilisateur a accès.

Toute valeur de feature flag disponible dans LaunchDarkly sera exposée dans le schéma de visiteur sous l’objet `visitor.claims.unsigned.launchdarkly` . En savoir plus sur les claims non signés [ici](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/fr/site-access/adaptive-content/enabling-adaptive-content/..#set-an-unsigned-claim).

Accédez à [adapter votre contenu](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/fr/site-access/adaptive-content/adapting-your-content) pour en savoir plus sur la personnalisation de votre documentation pour vos utilisateurs.
{% endstep %}
{% endstepper %}

### Reflag

Reflag vous permet d’envoyer l’accès aux feature flags sous forme de claims via le [`@reflag/react-sdk`](https://www.npmjs.com/package/@reflag/react-sdk) et le package [`@gitbook/adaptive`](https://github.com/GitbookIO/integrations/tree/main/packages/adaptive) .

Si vous utilisez déjà des feature flags Reflag dans votre produit, il y a de fortes chances que ce package soit déjà configuré.

Pour transmettre ces feature flags sous forme de claims à GitBook, suivez ces étapes :

{% stepper %}
{% step %}
**Installez l’intégration Reflag**

Pour commencer, vous devrez d’abord [installer l’intégration Reflag](https://app.gitbook.com/integrations/bucket) sur votre site GitBook.
{% endstep %}

{% step %}
**Configurez votre clé secrète**

Ajoutez votre clé secrète depuis vos [paramètres Reflag](https://app.reflag.com/envs/current/settings/app-environments) à la configuration de l’intégration.
{% endstep %}

{% step %}
**Installez l’assistant GitBook dans votre application**

Après avoir configuré l’intégration Reflag, vous devrez installer l’assistant de contenu adaptatif GitBook dans votre application.

```bash
npm install @gitbook/adaptive
```

{% endstep %}

{% step %}
**Configurez votre application**

Vous devrez utiliser l’assistant `withReflag` avec le SDK React Reflag pour transmettre le contexte à GitBook.

<pre class="language-javascript"><code class="lang-javascript"><strong>import { withReflag } from '@gitbook/adaptive';
</strong><strong>import { ReflagProvider, useClient } from '@reflag/react-sdk';
</strong>import MyApplication from './MyApplication';

function PassFeatureFlagsToGitBookSite() {
<strong>    const client = useClient();
</strong>    React.useEffect(() => {
        if (!client) {
            return;
        }
<strong>        return withReflag(client);
</strong>    }, [client]);
    return null;
}
export function Application() {
    const currentUser = useLoggedInUser();
    const appConfig = useAppConfig();
    return (
        &#x3C;ReflagProvider
            publishableKey={appConfig.reflagCom.publishableKey}
            user={{
                id: currentUser.uid,
                email: currentUser.email ?? undefined,
                name: currentUser.displayName ?? '',
            }}
            company={{
                id: currentUser.company.id,
            }}
        >
            &#x3C;PassFeatureFlagsToGitBookSite />
            &#x3C;MyApplication />
        &#x3C;/ReflagProvider>
    );
}
</code></pre>

{% endstep %}

{% step %}
**Vérifiez votre schéma de visiteur**

Un [schéma de visiteur](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/fr/site-access/adaptive-content/enabling-adaptive-content/..#set-your-visitor-schema) est requis pour que vos claims puissent être lus sur votre site publié. L’installation et la configuration de l’intégration Reflag devraient définir automatiquement votre schéma de visiteur pour vous.
{% endstep %}

{% step %}
**Personnalisez votre contenu**

Après avoir défini votre schéma de visiteur, vous êtes prêt à adapter l’expérience de votre documentation aux utilisateurs qui visitent votre site, en utilisant les feature flags auxquels l’utilisateur a accès.

Toute valeur de feature flag disponible dans Reflag sera exposée dans le schéma de visiteur sous l’objet `visitor.claims.unsigned.reflag` . En savoir plus sur les claims non signés [ici](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/fr/site-access/adaptive-content/enabling-adaptive-content/..#set-an-unsigned-claim).

Accédez à [adapter votre contenu](https://gitbook-v2-5hpihs24d-gitbook.vercel.app/url/gitbook.com/docs/documentation/fr/site-access/adaptive-content/adapting-your-content) pour en savoir plus sur la personnalisation de votre documentation pour vos utilisateurs.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Les valeurs des feature flags sont évaluées côté client, évitez donc d’utiliser cette méthode pour transmettre des données sensibles ou critiques pour la sécurité.
{% endhint %}