Embedding Chatflow inline

Develop, Build & Integrate CMS Development
, , ,
1

Hi all,

I am trying to embed my chatflow like how it is done on this page.

here is my code:

module.html
<div class="chat-container">
 <div id="hubspot-chat" style="height: 500px; width: 100%;"></div>
</div>

module.css
.chat-container {
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 background-color: white;
 border-radius: 8px;
 overflow: hidden;
 max-width: 1000px;
 margin: auto;
}

module.js
window.hsConversationsSettings = {
 inlineEmbedSelector: '#hubspot-chat'
};

I can see that the chat container is loading, but the actual chatflow isn’t rendering. What am i missing?

For context, our website is hosted on Hubspot.

Any help would be greatly appreciated.

2

Hey @DJohnson4 - thanks for posting in the Community!
Can you please:
-Provide any screenshot(s) that reflect what you’re seeing on your live page where the chatflow should be rendering
-A direct link to your page (if published) so that we can try and reproduce the issue on our end
Shane, Community Manager

3

@STierney, I figured it out in the end. It was nothing to do with the code or the chatflow itself, it was actually to do with the webpage and the fact it needed to be published to render the chatflow.