Embed chat on a page

New Member

Hi, 


Though I am fully aware that the main functionality of the chat widget is to have it pop-up on your website or HubSpot pages, I'd actually like to make a page where the chat is embedded as part of the actual page body. Apparently, there's nothing native for this in HubSpot. Anyone with a workaround for this? 

CSS
4 Replies 4
HubSpot Alumni

Hi @EpiGo , I believe you should be able to embed the messages widget inline anywhere. If you search for "inline embed styling" here(https://developers.hubspot.com/docs/methods/conversations_api/hubspot-conversations-javascript-api) you should see that it's possible

Reply
0 Upvotes
HubSpot Alumni

This code:

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

worked for me on this page: https://www.playtimepottery.net/global-form-events-test 

Reply
0 Upvotes
New Contributor

Thanks for that code!

 

How did you get the chat widget to be that size? Mine is defaulting to the smallest size possible:

 

chat widget.PNG

New Contributor

You need to make sure your styling the div appropriately with CSS.

 

If this is your div for embedding the chat:

<div id="my-messages-container"></div>

Then you need a style to resize it:

#my-messages-container {
height: 500px;
width: 300px;
}

 

Something like the above should do the trick - Good luck!

 

 

Reply
0 Upvotes