topic Re: Embed chat on a page in CMS Development

Embed chat on a page

EpiGo — Tue, 23 Apr 2019 12:05:04 GMT

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?

Re: Embed chat on a page

cbarley — Tue, 30 Apr 2019 20:11:05 GMT

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

Re: Embed chat on a page

cbarley — Tue, 30 Apr 2019 20:33:48 GMT

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

Re: Embed chat on a page

Erin — Thu, 05 Dec 2019 16:13:25 GMT

Thanks for that code!

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

Re: Embed chat on a page

grantges — Fri, 21 Aug 2020 15:07:57 GMT

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!

Re: Embed chat on a page

SamStAmour — Wed, 28 Jul 2021 15:21:53 GMT

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!

Re: Embed chat on a page

dennisedson — Thu, 29 Jul 2021 15:28:40 GMT

@SamStAmour ,

Any errors in the console?

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

Re: Embed chat on a page

SamStAmour — Tue, 03 Aug 2021 18:04:15 GMT

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

Re: Embed chat on a page

MrHalversen — Fri, 04 Mar 2022 21:27:02 GMT

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>

Re: Embed chat on a page

JMARRUGO — Fri, 19 May 2023 12:51:16 GMT

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

Re: Embed chat on a page

KMing — Fri, 09 Jun 2023 20:40:46 GMT

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.

Re: Embed chat on a page

tnz — Thu, 29 Feb 2024 13:54:38 GMT

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

i managed to make it full screen

Re: Embed chat on a page

KSharma29 — Sun, 24 Nov 2024 23:11:49 GMT

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>