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.

Specify the version of the widget to use in the Inkeep SDK Version field. For example:

@inkeep/cxkit-js@0.5

Configure the widget in the Settings (JSON) field, valid JSON is required, you can validate your JSON using an online tool like JSONLint:

{
  "ChatButton": {
    "baseSettings": {
      "apiKey": "REPLACE_WITH_YOUR_INKEEP_API_KEY",
      "primaryBrandColor": "#26D6FF",
      "organizationDisplayName": "Inkeep"
    },
    "aiChatSettings": {
      "aiAssistantAvatar": "/img/logo.svg", 
      "exampleQuestions": [
        "Example question 1?",
        "Example question 2?",
        "Example question 3?"
      ]
    }
  }
}

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

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.