Embed chat on a page

Develop, Build & Integrate CMS Development
1

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?

2

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

3

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

4

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
chat widget.PNG1000×596 28.9 KB

5

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!

6

Where does this code:

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

fit in this code to make it frame larger

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

I have tried putting it everwhere and the chat box stays small.

7

you have to add the style in the page settings → advanced ->head html

Screenshot 2024-02-29 at 14.51.26.png
Screenshot 2024-02-29 at 14.51.26.png2094×1490 196 KB

i managed to make it full screen

8

I used the iframe code this work perfect for me

<head>
<style>
#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%);
}
</style>

</head>
<body>
<div id=“my-chat-container”></div>
<script>
window.hsConversationsSettings = {
loadImmediately: true,
inlineEmbedSelector: ‘#my-chat-container’
};
</script>
</script>
</body>

9

Hello all,

Thank you for that information. I am trying to embed this in a Wordpress site, and I can’t figure out exactly how to make it work.

I’m currently using a “Custom HTML” block, in which I’ve pasted the following code (@Cbarley’s), but nothing happens :

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

I have the HubSpot tracking code on the website, but I do not have the Wordpress HubSpot plugin. Am I missing something?

Thanks a lot!

10

@SamStAmour ,

Any errors in the console?

Do you have a link to the site so we can see?

11

Hi Dennis,

Thank you for your reply! I actually don’t have a live page right that would show anything, unfortunately. But it’s ok, I’ve asked colleagues to help me figure this out.

Thanks,

Samuel

12

This worked great for me. However, whenever we load the page, it jumps the view down to where I embedded chat. Any wonders why that is the case? Below is the code that I have used on that page.
<div id=“my-messages-container”></div>
<script>
window.hsConversationsSettings = {
loadImmediately: true,
inlineEmbedSelector: ‘#my-messages-container’
};
</script>

13

Hi,

I have the same issue, but no sure where should I place the below style code:

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

Should I used

<div