Feature flags

Pass visitor data into your docs through a feature flag provider.

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

LaunchDarkly

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.

3

Install the GitBook helper

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

npm install @gitbook/adaptive

4

Configure your client

Finally, 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'),
    );
})();

Once connected, any feature flag value available in LaunchDarkly will be exposed as part of the visitor schema under the unsigned.launchdarkly.flags object.

Bucket

1

Install the Bucket Integration

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

2

Set up your secret key

Add your secret key from your Bucket settings.

3

Install the GitBook helper

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

npm install @gitbook/adaptive

4

Configure your client

Finally, you’ll need to use the withBucket helper with the LaunchDarkly React SDK to pass context into GitBook.

import { withBucket } from '@gitbook/adaptive';
import { BucketProvider, useClient } from '@bucketco/react-sdk';
import MyApplication from './MyApplication';

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

Once connected, any feature flag value available in Bucket will be exposed as part of the visitor schema under the unsigned.bucket.flags object.

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