Feature flags

Pass visitor data into your docs through a feature flag provider

Using adaptive content with feature flags requires adding code to your application.

Currently, the GitBook helper only supports React based setups.

GitBook provides helper functions and integrations for popular feature flag service providers like LaunchDarkly and Reflag.

This allows you to read the feature flags users have access to in your product, as they read your docs. This is useful if you need to show documentation for features that are only available to a specific group of people.

LaunchDarkly

LaunchDarkly allows you to send feature flag access as claims through the launchdarkly-react-client-sdk and GitBook’s @gitbook/adaptive package.

If you’re using LaunchDarkly feature flags in your product already, chances are you already have this package configured.

To pass you these feature flags as claims to GitBook, follow these steps:

1

Install the LaunchDarkly integration

To get started, you’ll first need to install the LaunchDarkly integration into your GitBook site.

2

Set up your project and access keys

Add your project key and your service access token from your LaunchDarkly settings to the integration’s configuration.

3

Install and add the GitBook helper to your application

After setting up the LaunchDarkly integration, you’ll need to install the GitBook adaptive content helper in your application.

npm install @gitbook/adaptive

4

Configure your application

You’ll need to use the withLaunchDarkly helper with the LaunchDarkly React SDK to pass context into GitBook.

import { render } from 'react-dom';
import { withLaunchDarkly } from '@gitbook/adaptive';
import { asyncWithLDProvider, useLDClient } from 'launchdarkly-react-client-sdk';
import MyApplication from './MyApplication';

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

5

Check your visitor schema

A visitor schema is required in order for your claims to be able to be read in your published site. Installing and configuring the LaunchDarkly integration should automatically set your visitor schema for you.

6

Personalize your content

After setting your visitor schema, you’re ready to tailor your docs experience for the users visiting your site, using the feature flags the user has access to.

Any feature flag value available in LaunchDarkly will be exposed as part of the visitor schema under the visitor.claims.unsigned.launchdarkly object. Read more about unsigned claims here.

Head to adapting your content to learn more about personalizing your docs for your users.

Reflag

Reflag allows you to send feature flag access as claims through the @reflag/react-sdk and GitBook’s @gitbook/adaptive package.

If you’re using Reflag feature flags in your product already, chances are you already have this package configured.

To pass you these feature flags as claims to GitBook, follow these steps:

1

Install the Reflag Integration

To get started, you’ll first need to install the Reflag integration into your GitBook site.

2

Set up your secret key

Add your secret key from your Reflag settings to the integration’s configuration.

3

Install the GitBook helper to your application

After setting up the Reflag integration, you’ll need to install the GitBook adaptive content helper in your application.

npm install @gitbook/adaptive

4

Configure your application

You’ll need to use the withReflag helper with the Reflag React SDK to pass context into GitBook.

import { withReflag } from '@gitbook/adaptive';
import { ReflagProvider, useClient } from '@reflag/react-sdk';
import MyApplication from './MyApplication';

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

5

Check your visitor schema

A visitor schema is required in order for your claims to be able to be read in your published site. Installing and configuring the Reflag integration should automatically set your visitor schema for you.

6

Personalize your content

After setting your visitor schema, you’re ready to tailor your docs experience for the users visiting your site, using the feature flags the user has access to.

Any feature flag value available in Reflag will be exposed as part of the visitor schema under the visitor.claims.unsigned.reflag object. Read more about unsigned claims here.

Head to adapting your content to learn more about personalizing your docs for your users.

Feature flag values are evaluated on the client side, so avoid using this method to pass sensitive or security-critical data.