Adding a Dropchat bubble chatbot on a single HubSpot website page.
NOTE: This guide is for adding the chatbot to a single website page only If you have added the code snippet at site level already, it will conflict with page and the chatbot will not function properly. Only do one or the other. If you want a guide on how to add a Dropchat bot to all of the pages on your entire website, use this guide.
Below is a guide on how to use Dropchat and HubSpot web pages together to make an AI chatbot assistant. This guide contains instructions on how to add the chatbot to your HubSpot web page.
- 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 HubSpot web page, which is the most user-friendly option in most cases.
- Click the "Copy Code" icon on the top code snippet option.
- Now, log in to your HubSpot account. Once you are in, navigate to "Content" and then "Website Pages" on the left-hand sidebar.
- Navigate to "Settings" at the top left of the navigation bar and select "Advanced".
Paste the code snippet from earlier into the box in the pop-up labeled "Head HTML".
- Exit out of the pop-up. If your web page is not published already, you can deploy it to the web using the orange "Publish" button at the top right of the website builder.
- Once published, you can visit the link to see your Dropchat bubble chatbot in action. In this example, we are using a basic sign-in page to demonstrate the chatbot.
- Click the blue bubble icon below to interact with your new chat assistant. Below is a clip of the chatbot functionality in action.
