Add chat to your knowledge base

You can embed Kustomer chat on your Kustomer knowledge base. To embed Kustomer chat on your website or web app, see Add chat to your website.

To add chat to your Kustomer knowledge base, add the configured Web SDK code to a Global JavaScript file to use with your custom Knowledge Base theme.

Prerequisites

Before you get started, you'll need the following:

• The API key from the configured Web SDK code for your Kustomer organization or brand. See Chat Management: Install Chat in the Kustomer Help Center to learn more.
• Access to a custom (that is, not the default theme) knowledge base theme in Kustomer.

👍

Note: Add chat to customer knowledge base themes

You can only add new files for custom knowledge base themes.

Step 1: Create a new Global JavaScript file

First, create a new Global JavaScript file with the name chat for your customized knowledge base theme.

To add the JavaScript file:

1. Go to Settings and select Knowledge Base > Themes > [Your custom theme] to open the editor for the selected custom theme.

2. In the theme editor, locate the Theme Files panel (contains three sections: Pages, Components, and Globals). Select + Add to open the Create Theme File modal.

3. In the Create Theme File modal, select or enter the following:

   • Theme Target: Global
   • File Name: chat
   • File Type: JS

   Select Create to open the editor for the new file in Kustomer. You'll also see chat.js listed under Globals in the Theme Files panel.

Step 2: Edit the new chat.js file

Next, edit the new chat.js file with code that will display the chat icon in the bottom right corner of your Knowledge Base.

To edit the chat.js file:

1. Copy and paste the following code into the empty chat.js file.

window.addEventListener('DOMContentLoaded', function () {
     var script = document.createElement('script');
     script.src = 'https://cdn.kustomerapp.com/chat-web/widget.js';
     
     // Replace API_KEY with your API Key 
     script.setAttribute('data-kustomer-api-key', 'API_KEY');
    
     var body = document.getElementsByTagName('body')[0];
     body.appendChild(script);
   });
   
   window.addEventListener('kustomerLoaded', function () {
     Kustomer.start({
     brandId: 'BRAND_ID'
     });
   });

2. Replace API_KEY with the API key from the Web SDK code for your Kustomer organization or brand. To learn more, see Chat Management: SDK.

3. Select Save to save your changes.

When applying the saved theme, the chat widget icon will now appear on the bottom right corner of your custom knowledge base.