Denser Travel •Official launch of the Travel Plan and Itinerary Assistant on ChatGPT Store!!Try it now

Denser AI logoDenserAI

Denser.ai Integration and Installation Full Guide

Published in Dec 10, 2023

3 min read

🔔

You can integrate your chatbot to your website as a widget, an embedded iframe, or pass a user’s query to Denser REST API to get responses.

Find your chatbot Id

When chatbot window is open, you can find the chatbot Id on the url path.

E.g. If your chatbot url is:

https://denser.ai/u/embed/4e1a9c62-c39f-43bb-a127-c7963cb26002

Your chatbot Id is:

4e1a9c62-c39f-43bb-a127-c7963cb26002

Embed in your HTML

Add the following code to your HTML file:

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

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

Replace chatbotId with your chatbot id.

Here are the options you can pass to the init function:

  • chatbotId: The chatbot id
  • apiHost: The API host (default: https://denser.ai)
  • 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 window into your website

Add following code to your webpage.

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

Replace "chatbotId" with your own chatbot Id.

Call your chatbot as REST request

You can paste the following curl command and test http request in a terminal. Remember to replace with your own chatbot Id.

# 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": "4e1a9c62-c39f-43bb-a127-c7963cb26002",
  "question": "Can you summarize this doc?"
}'

The example JSON response format:

// 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"
    },
    ...
  ]
}

OK, now you are ready to integrate your chatbot into your website.

Denser Logo

DenserAI

© 2024 denser.ai. All rights reserved.