How to embed HubSpot chatbot inside a page

One common question I get asked about HubSpot Chat is if it can be embedded inside page content, same way as many competitors like Leadoo offer inpage-bots.

With HubSpot conversations, the chat window appears at the bottom of your browser screen. This is the default behaviour and unfortunately there are no other options available through the Chatflow settings.

However, with little bit of custom HTML you can make it load inside a container anywhere inside your page. All you need to do is place a bit of custom code:

<div id="my-chat-container"></div>
<script>
  window.hsConversationsSettings = {
    loadImmediately: true,
    inlineEmbedSelector: '#my-chat-container'
  };
</script>

The end result will look something like this:

To make it more usable, we can add some styling to the container it's loaded in and the iframe element.

#my-chat-container iframe {
  display: block;
  width: 100%;
  height: 400px;
  max-width: 720px;
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 20px rgb(0 0 0 / 10%);
}

And the working end result will look like this, go ahead try it out!

Found this helpful? Feel free to share the post!