Add Chat Button to GitBook

What is GitBook

GitBook is a static site generator for docs.

Get an API key

Follow these steps to create an API key for your web assistant.

Find your organizationId and integrationId

To find your organizationId:

1. Go to the Inkeep Dashboard
2. Go to the Settings tab (under the Organization heading)
3. Copy the ID field

To find your integrationId:

1. Go to the Inkeep Dashboard
2. Select your project under Projects
3. Go to the Assistants tab
4. Select your assistant
5. Copy the ID field

Installing widget for your website

1. Navigate to GitBook
2. Click Install
3. After installation, navigate to Docs sites tab and enable the widget for your desired site

Initialize the widget

Navigate to the Configuration tab to customize your settings.

The Base Widget Setting is required for the widget to function. Your configuration should resemble the example below:

{
  "apiKey": "INKEEP_API_KEY",
  "integrationId": "INKEEP_INTEGRATION_ID",
  "organizationId": "INKEEP_ORGANIZATION_ID",
  "primaryBrandColor": "#26D6FF",
  "organizationDisplayName": "Inkeep"
}

Once the configuration is applied, the widget will appear on the site you enabled the widget for. If the configuration is not applied, you may also need to edit the Chat Button Type field in order for Gitbook to recognize that configuration is complete (you can just remove the last letter and re-add it to trigger a refresh).

For a full list of customizations, check out the Chat Button documentation.

Our Gitbook integration is currently using an older version of our widget, we are working on updating it to the latest version. Some of the configuration options found in these docs may not be available, but the relevant configuration options can be found here.

Positioning

We support customization of styles via custom css in baseSettings, you can style "Ask AI" button by targetting it's class as so:

const baseSettings = {
  theme: {
    //...Other base Settings

    // Custom styles injection
    styles: [
      {
        key: "custom-theme",
        type: "style",
        value: `
         .ikp-chat-button__container {
           // Position the Ask-AI button on the left
           left: 1.5rem;
         }
       `,
      },
    ],
  },
};

You can find more information in the Custom Styles documentation.