Your Website

Prerequisite

Has a Denser Bot Ready for Integration

This step assumes that you already have a chatbot at Denser.ai. If not, please follow one of these guides to create your own chatbot.

• AI Website Search and Conversational Chatbot
• AI File Search and Chat Guide

Access Control

On the main screen of your selected chatbot, make sure you selected Security. Make sure Web/Embed tab is selected under the Security panel. Usually, website integration aims to serve public visitors that do not require authentication. Thus, select Public access option and then click Save button as shown in the following screenshot.

Find Site Integration Panel

On the main screen of your selected chatbot, make sure you selected Integration. You should find a list of cards displayed in the Integration panel. Please find the card with name Website. Click Get Code button to open dialog window.

Embed Chatbot as Widget

The code for integrating chatbot as a widget is under the section Copy code to integrate as a chat widget.

You can use the Copy icon button to copy the code snippet to clipboard and paste it into the html file of your website.

To customize the widget, you can pass the following list of options to the init function.

• theme: theme object
  • theme.button.size: The button size medium or large (default: medium)
  • theme.button.backgroundColor: The button color (default: white)
  • theme.button.color: The button text color, which is applied to the arrow icon on button (default: black)
  • theme.button.iconCover: When set to true, user provided image/icon covers the entire circular widget. (default: false)
  • theme.button.bottom: The button bottom position (default: 20px)
  • theme.button.right: The button right position (default: 20px)

Example:

<script type="module">
  import Chatbot from "https://cdn.jsdelivr.net/npm/@denserai/embed-chat@1/dist/web.min.js";
 
  Chatbot.init({
    chatbotId: "<chatbotId>",
    theme: {
      button: {
        size: "large",
        backgroundColor: "black",
        color: "white",
        bottom: "20px",
        right: "20px",
        iconCover: true,
      },
    },
  });
</script>

Embed chatbot as iframe

The code for integrating chatbot as a widget is under the section Copy code to integrate as an embedded frame. You can adjust styles of iframe such as width and height.

<iframe
  width="100%"
  height="500"
  frameborder="0"
  src="https://denser.ai/u/embed/{chatbotId}"
>
</iframe>