Prerequisite

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

Integrate to Your Website

Access Control

On the main screen of your selected chatbot, make sure you selected Access Control. Make sure Web Access tab is selected under the Access Control 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 your chatbot Id

Select Chat above Access Control on the screen of your selected chatbot. Chatbot Id can be found on the right side panel after selecting the Chat page.

Embed Chatbot as Widget

Add the following code to your HTML file. Replace {chatbotId} with your chatbot id.

<script type="module">
  import Chatbot from "https://cdn.jsdelivr.net/npm/@denserai/embed-chat@1/dist/web.min.js";

  Chatbot.init({
    chatbotId: "{chatbotId}",
  });
</script>

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 (default: black)
  • 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",
      },
    },
  });
</script>

Embed chatbot as iframe

Add following code to your webpage. Remember to replace {chatbotId} with your own chatbot Id.

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

Call your chatbot as REST request

Generate API Key

On the main screen of your selected chatbot, make sure you selected Access Control. Then select REST API Access tab under the Access Control panel.

If REST API access has been enabled and you know the API key, you can use that existing API key for Zapier integration. Otherwise, click Generate API Key button to generate a new API key.

Test REST request

You can paste the following curl command and test http request in a terminal. Remember to replace {your_chatbot_id} with your own chatbot Id, and replace {your_api_key} with the API key generated in the last step

# curl commamd format to call denser chat as http request
curl https://denser.ai/api/query -X POST -H "Content-Type: application/json" -d \
'{
  "chatbotId": "{your_chatbot_id}",
  "question": "Can you summarize this doc?"
  "key": "{api_key}"
}'

The example JSON response format look like the following.

// Response of calling POST https://denser.ai/api/query
{
  "statusCode": "200",
  "answer": "Answer from your chatbot",
  "docSources": [
    "http://example.com", // Document level source
    ...
  ],
  "sources": [
    {
      "source": "http://example.com", // Webpage link or file name
      "title": "Example title", // Empty for file-based chatbots
      "text": "Resource text that supports the answer content"
    },
    ...
  ]
}