Feature flags

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 Bucket.

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 unsigned.launchdarkly.flags object.

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

Bucket

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

If you’re using Bucket 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 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 to the integration’s configuration.

3

Install the GitBook helper to your application

After setting up the Bucket 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 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>
    );
}

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 Bucket 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 Bucket will be exposed as part of the visitor schema under the unsigned.bucket.flags object.

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.