HTML

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> <html>

<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width”>
<title>Document</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
Hello world
<script src=”script.js”></script>
</body>

</html>

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.

HTML

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

Products

Getting Started

Resources

Company