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.