How to add a Dropchat bot to your HubSpot website globally.

Adding a Dropchat bot to every page of your HubSpot site at once, with zero coding required.

NOTE: This guide is for adding the chatbot to at the site level only. If you have added the code snippet at the page level already, it will conflict with site and the chatbot will not function properly. Only do one or the other. If you want a guide on how to add a Dropchat to a single page only, use this guide.

Below is a guide on how to use Dropchat and HubSpot websites together to make an AI chatbot assistant. This guide contains instructions on how to add the chatbot to your HubSpot website.

  •  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 entire HubSpot website, 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 the gear icon at the top right (next to the bell icon). 
  • From there, scroll all the way down the sidebar on the left-hand side until you reach the "Tools" section. Then navigate to Content, then to "Pages".
  • Now you will need to take the code snippet you copy-pasted from Dropchat earlier, and paste it into the text box labeled "Site header HTML".

  • You will be asked to Save this change. Click the orange "Save" button.


  • Now, the blue Dropchat bubble should be at the bottom right of each page of your website.

  • Click the blue bubble icon below to interact with your new chat assistant. Below is a clip of the chatbot functionality in action, using an example landing page.