Embed chat on a page

[EpiGo]

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? 

[JMARRUGO]

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

[MrHalversen]

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>

[SamStAmour]

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!

[dennisedson]

@SamStAmour ,

Any errors in the console?

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

[SamStAmour]

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

[cbarley]

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

[cbarley]

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 

[Erin]

Thanks for that code!

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

[grantges]

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!

[KMing]

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. 

[tnz]

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

i managed to make it full screen