←back to tutorials

How to embed ChatBotKit Widget inside Notion

Learn how to embed a ChatBotKit Widget into Notion and enhance the functionality of your shared pages. Follow this step-by-step tutorial to create and embed a chatbot into your Notion workspace.

In this tutorial, we will guide you through the process of creating and embedding a ChatBotKit Widget into Notion. Whether you're looking to provide instant access to information, boost customer service, engage visitors, capture leads, or use it internally to organise on tasks and get instant access to relevant information, embedding a chatbot into Notion can upgrade the functionality of your shared pages. Let's get started!

Step 1: Create a ChatBotKit Widget

Before you begin, access your ChatBotKit's account. If you don't have an account yet, sign up at ChatBotKit's main page. Follow these step-by-step instructions to create an AI chatbot widget:

  1. Go to the ChatBotKit's Integrations page and click on the "Create Website Widget" button.
  2. Give your widget a name and an optional description.
  3. Connect the widget to an existing Bot, or select a Backstory, Model, Dataset, and Skillset to suit your interaction needs.
  4. Optionally configure the widget theme. You can make it look like Notion!
  5. Click on the "Create" button to save the integration.

Once you've created the widget, you will have access to a direct URL for embedding as a frame. The URL format looks like this: https://static.chatbotkit.com/integrations/widget/{WIDGET_ID}/frame - WIDGET_ID must be replaced with your actual widget ID. The easiest way to obtain this URL is to type /frame at the end of the URL and copy it.

Step 2: Embed the ChatBotKit Widget into Notion

Now that your widget is ready and you have your direct frame URL, you can embed it into a Notion page as follows:

  1. Copy your direct frame URL that you got from the ChatBotKit.
  2. Open Notion and navigate to the page where you want your chatbot to be displayed.
  3. Click on an empty section of the page and paste the URL. Hit Enter.
  4. Notion will automatically recognize the URL and will give you an option between creating a link or embedding the link. You should click on Embed.

Voila! Your ChatBotKit widget is now embedded into your Notion page, enabling users to interact with the AI. You can resize the chatbot window as per your requirements. Now, enjoy the benefits that your new AI assistant will provide.