Integrations

ChatBotKit is a chatbot platform that allows developers to build and deploy chatbots for various messaging platforms. One of the key features of ChatBotKit is its ability to integrate with other tools and platforms, providing users with a seamless chatbot experience.

Slack Integrations

ChatBotKit offers powerful integration with Slack, a popular collaboration and messaging platform for teams. This integration allows users to deploy chatbots on Slack, enabling them to interact with their chatbot directly from within the Slack platform. With the Slack integration, ChatBotKit users can access a wide range of functionality, including real-time messaging, file sharing, and integrations with other tools and platforms.

Step-by-step Guide

Here is how to integrate ChatBotKit into Slack.

1. Go to Integrations and then click the New Slack Bot button.
2. Fill in the Name and provide your chatbot Backstory.
3. Optionally select the bot Model, Dataset and Skillset.
4. Save the integration by clicking the "Create" button.

Once the Slack Integration is created you can install it by pressing the "Install" button. This button will automatically create the Slack Bot for you and set up all developer information. As a final step, you need to provide the Slack Bot signing secret and Bot Token.

1. Navigate to your Slack Bot (you already have this in a tab open if you have followed so far).
2. Go to "Basic Information".
3. Copy the "Signing Secret" value and paste into the "Signing Secret" field.
4. Go to "OAuth & Permissions".
5. Copy the "Bot User OAuth Token" and paste into the "Bot Token" field.

How to Interact with your ChatBotKit Slack Bot

You can invite the chatbot to any channel. To start a new conversation, simply prefix your message with the chatbot's name. For example:

@MyChatBot How is it going?

Soon after this, you will see a reply to your message. The conversation will carry over the thread. Keep in mind that one thread is one conversation. Multiple users can converse on the same thread.

Discord Integrations

With ChatBotKit, you can easily integrate with Discord, a popular messaging and collaboration platform for gamers and communities. By integrating with Discord, you can chat with your chatbot directly from within the platform, enabling you to access a wide range of conversational AI functionalities.

Step-by-step Guide

To integrate ChatBotKit with Discord, follow these simple steps:

1. Go to your Discord application and navigate to "General Information" to find your Application ID and Public Key.
2. Go to the "Bot" section and click "Reset Token" to obtain your Bot Token.
3. Copy and save these three values - Application ID, Public Key, and Bot Token.
4. In ChatBotKit, navigate to "Integrations" and click New Discord Bot.
5. Provide a name and a backstory for your chatbot.
6. Optionally select the bot model, dataset, and skillset.
7. Optionally provide a handle, which is the slash command used for this bot.
8. Save the integration by clicking the "Create" button.

Additional options to control the session duration and conversation visibility are available in the "Advanced Options".

How to Interact with your ChatBotKit Discord Bot

To start a new conversation with your chatbot, simply use the bot slash command (i.e /chatbotkit). For example:

/chatbotkit How is it going?

Widget Integrations

In addition to the Slack integration, ChatBotKit also offers a widget integration, which allows users to embed chatbots directly on their websites. This feature allows users to engage with their chatbot directly from their website, providing a convenient and seamless experience for their customers. The widget integration is fully customizable, allowing users to tailor the appearance and functionality of their chatbot to fit their specific needs.

1. Go to Integrations and then click the Create Widget Integration button.
2. Fill in the Name and provide your chatbot Backstory.
3. Optionally select the bot Model, Dataset and Skillset.
4. Save the integration by clicking the "Create" button.

Now that the integration is saved you can install it.

1. Click the "Install" button.
2. Copy the widget snippet.
3. Paste the snippet into your website.

You can customise the widget by providing extra dataset properties (default), script URL hash or script URL query parameter. The following options are available for customisation:

Customisation by HTML Data Attributes

To change an option simply supply it as an extra URL query parameter. For example to change the "caption" option do the following:

<script
  id="chatbotkit-widget"
  src="<https://static.chatbotkit.com/integrations/widget/v1.js>"
  data-widget="clcrog2pw1001tyfrrv8yyk3g"
  data-caption="Open Chat"
></script>

Customisations by URL Hash Parameters

To change an option simply supply it as an extra URL hash parameter. For example to change the "caption" option do the following:

<script
  id="chatbotkit-widget"
  src="<https://static.chatbotkit.com/integrations/widget/v1.js#widget=clcrog2pw1001tyfrrv8yyk3g&caption=Open+Chat>"
></script>

Customisations by URL Query Parameter

To change an option simply supply it as an extra URL query parameter. For example to change the "caption" option do the following:

<script
  id="chatbotkit-widget"
  src="<https://static.chatbotkit.com/integrations/widget/v1.js?widget=clcrog2pw1001tyfrrv8yyk3g&caption=Open+Chat>"
></script>

Customisations by Global Object

Alternatively, you can create a global object called chatbokitWidgetConfiguration. This object must be instantiated before loading the widget script. For example:

<script>
  window.chatbokitWidgetConfiguration = {
    options: {
      caption: 'Open Chat',
      icon: '❤️',
    },
  }
</script>
<script
  id="chatbotkit-widget"
  src="<https://static.chatbotkit.com/integrations/widget/v1.js?widget=clcrog2pw1001tyfrrv8yyk3g>"
></script

Customizing The Button Style

The easiest way to customize the button style is with CSS and CSS variables. The following CSS variables are supported:

Customization can be directly applied with CSS. For example:

chatbotkit-widget {
  --button-bg-color: yellow;
  --button-fg-color: black;
}

Full Widget Customization Example

Here is a full example of how to customize the widget using varies methods and options:

<style>
  chatbotkit-widget {
    --button-bg-color: yellow;
    --button-fg-color: black;
  }
</style>
<script>
  window.chatbokitWidgetConfiguration = {
    options: {
      caption: 'Open Chat',
      icon: '❤️',
    },
  }
</script>
<script
  id="chatbotkit-widget"
  src="<https://static.chatbotkit.com/integrations/widget/v1.js?widget=clcrog2pw1001tyfrrv8yyk3g>"
></script

Markdown Support

Both the intro and each individual message support markdown formatting. This means that you can include links and images inside the widget.

Continuous Chat Sessions

The ChatBotKit Widget can support unlimited user sessions. A single session is one continuous conversation with a ChatBot. Sessions are preserved across tabs and windows and automatically synchronized. This means the user can continue the conversation even when navigating to a different part of your website or switching tabs.

This is often the expected best possible experience for your end customers. Still, there are times when you may want to control when and how to chat sessions are created. In these situations, you can use the session parameter to define your unique identifier to distinguish between separate continuous conversations.

The session parameter can be any value - an id or just a random sequence of characters. By default each user gets a unique session every day. Once you set up the session, conversations will continue on the same conversation channel. For example, you may want to distinguish chat sessions that have started from one area of your website from others. Or perhaps, your landing pages might need a completely new chat session. In this case, you can use the session parameter to start separate continuous chats.

It is also equally possible that every page has its own chat session. This means the session will not be preserved when navigating different pages. To do so, use the current page address for the session.

Oring Checks

Your Widget can be configured to only run on specific websites. This is a recommended security feature to ensure that chat sessions can only be initialized from your website alone.

The origin is the web page address without the path (referred to as the "base URL" or "root URL."). It is the portion of the URL that includes the protocol (e.g. "http" or "https"), the domain name, and any subdomains (e.g. "www"), but not the specific page or resource being accessed (the path).

It is advisable to use this feature to ensure that your Widget can only be used from specific locations.

You can use comma (,) to specify multiple origins.

Embedding The Frame

You can also embed the Widget frame directly. This allows you to create your own button or if you require to simply embed the conversation in an iframe. Here is a quick example how to do just that:

<iframe src="<https://static.chatbotkit.com/integrations/widget/{WIDGET_ID}/frame?...parameters>"></iframe>

You your own widget integration id instead of {WIDGET_ID}. You can use the same configuration options.

A working example of this embedding technique can be found here.

Sitemap Integration

With ChatBotKit's Sitemap feature, you can easily import a website's information into your dataset by simply providing the website's sitemap URL. This feature also automatically summarises long pages using AI, making it easier for you to access the most important information.

Step-by-step Guide

To integrate ChatBotKit's Sitemap feature into your dataset, follow these simple steps:

1. Navigate to "Integrations" in ChatBotKit and click New Website Importer.
2. Enter a name and optional description for this integration.
3. Select the dataset you want to import information into.
4. Enter the sitemap URL for the website you want to import information from.
5. Save the integration by clicking the "Create" button.

There are several advanced options that needs to be considered. You can find this information under "Advanced Options".

1. Glob - the glob is a pattern to focus the integration on specific pages. For example you may want to sync only your documentation found at /docs. In this case the glob needs to be set to /docs/**.
2. Expires In - you can use this setting to automatically expire old records. This is useful in case you have a very dynamic website with many changes. Using this feature older records will get removed and replaced by newer records guaranteeing better data consistency.

Once the Sitemap integration is created, ChatBotKit will automatically import the information from the website into your selected dataset. The AI-powered summarisation feature will also be applied to long pages, making it easier for you to access the most important information.

How to Access Imported Information

To access the imported information from the website, simply navigate to the dataset you selected in Step 3. All of the imported information will be available there, including any summarised pages. You can then use this information to train your chatbot or for any other purposes.

Summary

Overall, ChatBotKit's integrations with Slack, Discord, Widget and Sitemap allow users to deploy chatbots on a variety of platforms, providing a convenient and seamless experience for their customers. Whether interacting with a chatbot on Slack or directly from a website, ChatBotKit's integrations make it easy for users to engage with their chatbot in a variety of ways.