How do I add a Dropchat bot to my HTML page?

Adding a custom Dropchat script to into your HTML code.

  •  First, log into your Dropchat account.

  • Click into any of the chatbots you have made previously. If you have not made a chatbot before, check out this guide. In this example, we will use a chatbot we already made from a PDF of the Bitcoin white paper.

  • After clicking into your chatbot, navigate to the "Manage Chatbot" tab towards the top left.
  • In the middle section, under "Share Chatbot", click the blue "Embed" button. 

A pop-up will appear with options on how to add a Dropchat to your site. In this example, we will be creating a chat bubble in the bottom right of your site, which is the most user-friendly option for most websites.

  • Click the "Copy Code" icon on the top code snippet option.

Now that you have this code snippet copy-pasted, we can go to into your HTML code.

In this example, we are going to use boilerplate HTML code which looks like this:

<!DOCTYPE html>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="style.css" rel="stylesheet" type="text/css" />

  Hello world
  <script src="script.js"></script>


In the index.html file, copy and paste the Dropchat code snippet before the closing </head> tag.

You will see the Dropchat bubble has appeared at the bottom right of your website.