Set up AI chatbot

Our AI chatbot is basically an AI Agent that uses your knowledge base as its source material.

Before you Enable AI chatbot widget for my knowledge base, use the Personalize the chatbot responses section to help refine your chatbot's tone and context:

1. Go to KB settings > AI chatbot. The AI chatbot page opens.
2. In the Personalize the chatbot responses section, follow the prompts to add context and personality to your chatbot:
   1. Enter a description of your chatbot's tone and personality in the Tone of voice field, max of 200 characters. This can determine how formal or informal, friendly or professional your chatbot's responses are. For example, for the chatbot in our Support KB, we use "friendly and helpful, uses occasional owl puns". 🦉
   2. Enter some context about your organization or audience in the Finish this sentence: "You are a chatbot answering questions for..." field, max of 200 characters. Include your organization's name and some information about its products or its intended audience. For example, for the chatbot in our Support KB, we use "KnowledgeOwl, a company that makes B2B knowledge base software."
3. Be sure to Save your changes.

The AI chatbot comes with some fairly simple branding out of the box. To make it more your own, consider customizing the chatbot in these two ways:

1. Customize the default text the chatbot uses to greet readers, prompt them for information, and so on. Refer to Customize default text for AI chatbot for instructions on making those changes.
2. Customize the branding for the chatbot. We walk through these instructions below.

You can take control of the chatbot's branding to change the chatbot window itself and the launcher button that opens the chatbot. We cover the options available in more detail below.

Customize the chatbot launcher button

The chatbot launcher button is the button and text that displays wherever you have the chatbot embedded. Before you make any changes, it will use a speech bubble icon followed by the phrase "Ask a question...", like this:

Sample chatbot launcher button with default text and branding

To customize the chatbot launcher button:

1. Go to KB settings > AI chatbot.
2. In the Customize branding and default text section, select the Edit branding button:
   Select Edit branding in the Customize branding and default text section
   The Chatbot branding modal opens with the Chatbot tab selected.
3. Select the Launcher button tab:
   Select the Launcher button tab
4. Use the controls in this tab to customize the launcher button how you'd like. The Button preview on the right will automatically update as you make changes:
   1. Edit the Button text to replace "Ask a question..." with the text of your choice. Text must be 30 characters or less. You can add emojis here.
   2. Edit the Button icon to change the icon displayed in the button. Choose from one of three options:
      1. Speech bubble (default)
      2. Linus the owl: The KnowledgeOwl mascot. A smaller version of him is in the chatbot footer by default.
      3. Custom: Use this option to upload your own custom icon in .png, .jpg, .gif, .webp, or .svg format, max file size of 500KB (0.5MB). Upload a new file by dragging and dropping it into the Drop image area or select browse to browse to a file for upload. If the icon you'd like to use already exists in your knowledge base, select Choose from library to browse to and select that existing file.
   3. Edit the Button background color hex code to change the background color of the button. Default is white.
   4. Edit the Button text color hex code to change the color of the text displayed in the button. Default is black.
   5. Edit the Button border color to change the color of the border outline around the button. Default is a medium grey.
5. Be sure to Save your changes.

Wherever your chatbot is embedded, the launcher button will update when a reader navigates to a new page or refreshes.

Customize the chatbot window branding

Once a reader selects the chatbot launcher button, the chatbot opens. The chatbot window has a small title in the upper left. The center of the window includes a star icon, a subheading, and some text to prompt your reader to submit a question. Below that is a small warning label about AI being fallible, a box and button to submit questions, and a footer which contains "Powered by KnowledgeOwl":

Sample chatbot window with default branding

Most of the text here is customized in the chatbot's default text settings, but the rest of this is considered branding. To

To customize the chatbot window:

1. Go to KB settings > AI chatbot.
2. In the Customize branding and default text section, select the Edit branding button:
   Select Edit branding in the Customize branding and default text section
   The Chatbot branding modal opens with the Chatbot tab selected.
3. Use the controls in this tab to customize the launcher button how you'd like. The Interactive demo on the right will automatically update as you make changes:
   1. To remove the star icon, change the Chatbot avatar. Choose from these options:
      1. None: Keeps the default star icon.
      2. Speech bubble: Uses the same speech bubble icon as the chatbot button launcher uses by default.
      3. Linus the owl: Uses the KnowledgeOwl logo mascot, Linus.
      4. Custom: Use this option to upload your own custom image to use as an avatar in .png, .jpg, .gif, .webp, or .svg format, max file size of 500KB (0.5MB). Upload a new file by dragging and dropping it into the Drop image area or select browse to browse to a file for upload. If the icon you'd like to use already exists in your knowledge base, select Choose from library to browse to and select that existing file. Feel free to reuse the custom launcher button icon you used!
   2. Add text to display above the "Powered by KnowledgeOwl" statement into the Custom footer.
   3. Add Custom CSS to style the chatbot window even more.
   4. If you'd like to remove the "Powered by KnowledgeOwl" statement in the footer, turn on the Hide "Powered by KnowledgeOwl" toggle. This feature is available on select plans.
4. Be sure to Save your changes.

Wherever your chatbot is embedded, the chatbot window will reflect these changes the next time a reader opens it.

Common chatbot custom CSS customizations

Here are some of the custom CSS customizations authors most want to make:

Change the initial submit question button color

Before a reader enters a question, the submit question button has a light grey background color. To change this color:

1. Copy the CSS below:

   /* Change chatbot initial submit question button color */
   ko-chatbot-sv button.bg-\(--bgGray\)[aria-label="Submit question"] {
       background-color: #e9e9e9;
   }

2. Paste it into the Custom CSS for your chatbot.
3. Edit the background-color in row 3 to be the color you'd like to use.
4. If you've customized the Submit button aria-label text in Customize > Default text > AI Chatbot, you'll need to update the aria-label in row 2 to match your customized text string.

Change the submit question button color

The submit question button turns from grey to black once a reader enters a question. To change the color:

1. Copy the CSS below:

   /* Change chatbot submit question button color */
   .ko-chatbot-sv button.bg-black[aria-label="Submit question"] {
       background-color: #000000;
   }

2. Paste it into the Custom CSS for your chatbot.
3. Edit the background-color in row 3 to be the color you'd like to use.
4. If you've customized the Submit button aria-label text in Customize > Default text > AI Chatbot, you'll need to update the aria-label in row 2 to match your customized text string.

Change the introductory text font color

When the chatbot opens, it displays a lot of introductory text. All of this text is black by default. To change the color of the font:

1. Copy the CSS below:

   /* Change font color on intro screen */
   .ko-chatbot-sv .text-\(length\:--fontLg\),
   .ko-chatbot-sv .text-center {
       color: #000000;
   }

2. Paste it into the Custom CSS for your chatbot.
3. Edit the color in row 4 to be the color you'd like to use.

Make the AI chatbot your own. Customize or translate the wording it uses, such as the button label, AI disclaimer, intro text, and more.

Use this text customization to better match your knowledge base's tone or to translate the chatbot interface into another language.

Refer to Customize AI chatbot text for full instructions and descriptions of the various text strings you can edit.

Custom response rules let you define a pre-written response that the chatbot delivers when a reader's message matches a keyword or AI-detected intent, bypassing normal AI search. Use them to handle queries that fall outside your knowledge base, like routing live chat requests, catching troubleshooting queries, or redirecting out-of-scope questions.

To add a custom response rule:

1. Go to KB settings > AI chatbot. The AI chatbot settings page opens.
2. Scroll to the Custom response rules section and select Add rule. The Add rule modal opens.
3. Enter a name for the rule in the Rule title field.
4. Select a Rule type and make other selections to set up the trigger:
   1. Keyword match: Use this rule type to match on specific words or phrases. This works well if you know exactly what you want to trigger the custom rule.
      1. Select a Match type: Contains (phrase appears anywhere in the message) or Exact (message must equal the phrase exactly, case-insensitive).
      2. Enter one or more trigger phrases in the Phrases field.
      3. Select + Add phrase to add additional phrases.
   2. AI intent: phrase: Use this rule type to trigger the custom response using variations on a phrase without having to manually enter each of them. You enter the phrase and our AI will determine the intent of the phrase and trigger when a reader enters a phrase with similar intent, even if it's worded differently.
      1. Enter one or more phrases in the Phrases field.
      2. Select + Add phrase to add additional phrases.
   3. AI intent: scenario: Use this rule type to describe a scenario that should trigger the custom response in plain language. The AI matches messages that fit the described situation.
      1. Enter a description in everyday language of the scenario in the Scenario description field. Be as specific as possible: a more detailed description reduces the chance of false matches.
5. Enter your pre-written response in the Response message editor. The editor supports basic formatting including bold, italic, underline, lists, and links.
6. Optional: Use the Call-to-action options if you want to add a call-to-action button to the response:
   1. None (default): No button is shown.
   2. Link: Displays a button that takes the reader to a URL. Enter a Label for the button and the destination URL.
   3. Developer event: Fires a ko-ai-chatbot:cta-click postMessage event when a reader clicks the button. Enter a Label and an Event ID. Refer to the AI chatbot JavaScript API Reference for listener setup examples.
7. Select Add rule to save. The rule is added to the Custom response rules list.

Edit or delete a custom response rule#

Each rule in the Custom response rules list has action buttons in the Actions column:

• To edit a rule, select the pencil icon. The Edit response rule modal opens with all fields pre-populated. Make your changes and click Save rule.
• To delete a rule, select the trash icon. A confirmation dialog names the specific rule and asks you to confirm before permanently removing it.
• To reorder rules, use the up and down arrow buttons. Remember that the first matching rule wins, so put your most specific rules near the top.

Want to test the chatbot for a bit before releasing it to the world? Use the Reader access section in KB settings > AI chatbot to control who can see and use the AI chatbot in your knowledge base.

Choose from one of these options:

1. All readers (default): Use this option if you want everyone who can view your knowledge base to view and use the chatbot.
2. Authors only: Use this option if you want only logged-in authors to view and use the chatbot. This option can be especially useful if you want to test the chatbot without showing it to your readers.
3. Specific reader groups: Use this option if you want only members of certain reader groups to view and use the chatbot. Only readers assigned to these groups will see the chatbot button and be able to interact with it. This option can be especially useful if you want to share the chatbot only with certain groups, like internal teams or premium customers.

The AI chatbot is turned on by default on new accounts; existing accounts must opt in to use the AI chatbot in your knowledge base.

1. Go to KB settings > AI chatbot. The AI chatbot settings page opens.
2. Be sure you've already followed the instructions to Personalize the chatbot responses.
3. Turn on the Enable AI chatbot widget for my knowledge base control.
4. Save your changes.

The AI chatbot will now appear in the lower right of all knowledge base pages!

I can't turn on the AI chatbot

If you can't flip the toggle to turn the AI chatbot on, you should see a message with text like this:

Semantic search must be enabled before you can turn on the AI chatbot. Go to search settings to enable it, then re-index your knowledge base.

If you see this message, your knowledge base doesn't have semantic search turned on. Follow the instructions to enable semantic search and perform a reindex. Then you should be able to turn the chatbot on.

While it isn't necessary to turn on the AI chatbot, you may need to review your content and update some of its structure to get the best performance out of the chatbot.

Refer to How to optimize your content for the AI chatbot for a list of content best practices that can help improve your chatbot's performance.