←back to tutorials

How to Create an AI Widget for Any Website

In this tutorial you will learn how to quickly create an AI widget for any website easily using the ChatBotKit AI Widget builder.

If you're interested in creating an artificial intelligence (AI) bot using the ChatBotKit AI Widget builder, we've got a comprehensive step-by-step guide for you. The instructions will walk you through the process of not just building, but also effectively implementing and managing your AI bot, allowing you to seamlessly integrate it into any website of your choice.

Step-by-Step Guide

  1. Access the Widget Builder:
  2. Enter Website URL:
    • Once the builder is open, you will find a field to enter a URL. For example, type "notion.so" into this field.
  3. Preview the Website:
    • Click the "Preview" button. ChatBotKit will automatically capture a screenshot of the website you specified and extract relevant information along with site-specific colors.
  4. Customize Appearance:
    • You can adjust the color scheme by selecting one of the suggested colors in the palette or using color pickers for both the background and foreground colors.
  5. Additional Options:
    • Decide if you want to display the bar, use a bubble-style message, and whether the messages should be rounded. These settings can help align the widget’s look with your website’s design.
  6. Create the Widget:
    • Once you are satisfied with all the settings and customizations, click the "Make" button to create your AI widget.

Here is a visual representation of the process:

The final step involves pressing the "Make" button to generate your widget.

widgetAIbuilderwebsiteUItutorial