# Embed chat on a page

**URL:** <https://community.hubspot.com/t/embed-chat-on-a-page/14078>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [April 23, 2019, 12:05pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078 "2019-04-23T12:05:04Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![EpiGo](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/epigo/32/48165_2.png) [@EpiGo](https://community.hubspot.com/u/EpiGo)\
**Post date:** [April 23, 2019, 12:05pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/1 "2019-04-23T12:05:04Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![cbarley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley/32/82559_2.png) [@cbarley](https://community.hubspot.com/u/cbarley)\
**Post date:** [April 30, 2019, 8:11pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/2 "2019-04-30T20:11:05Z")

</div>

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](https://developers.hubspot.com/docs/methods/conversations_api/hubspot-conversations-javascript-api)) you should see that it’s possible

---

<div class="post-metadata">

**Author:** ![cbarley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley/32/82559_2.png) [@cbarley](https://community.hubspot.com/u/cbarley)\
**Post date:** [April 30, 2019, 8:33pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/3 "2019-04-30T20:33:48Z")

</div>

This code:

```auto
<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](https://www.playtimepottery.net/global-form-events-test)

---

<div class="post-metadata">

**Author:** ![Erin](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/erin/32/38459_2.png) [@Erin](https://community.hubspot.com/u/Erin)\
**Post date:** [December 5, 2019, 4:13pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/4 "2019-12-05T16:13:25Z")

</div>

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](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/b/5b48febf066c5c71eb441f654a71f52c31a729d7.png)

---

<div class="post-metadata">

**Author:** ![grantges](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/grantges/32/82448_2.png) [@grantges](https://community.hubspot.com/u/grantges)\
**Post date:** [August 21, 2020, 3:07pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/5 "2020-08-21T15:07:57Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![KMing](https://avatars.discourse-cdn.com/v4/letter/k/bb73d2/32.png) [@KMing](https://community.hubspot.com/u/KMing)\
**Post date:** [June 9, 2023, 8:40pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/6 "2023-06-09T20:40:46Z")

</div>

Where does this code:

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

fit in this code to make it frame larger

```auto
<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.

---

<div class="post-metadata">

**Author:** ![tnz](https://avatars.discourse-cdn.com/v4/letter/t/ba8739/32.png) [@tnz](https://community.hubspot.com/u/tnz)\
**Post date:** [February 29, 2024, 1:52pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/7 "2024-02-29T13:52:48Z")

</div>

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

 ![Screenshot 2024-02-29 at 14.51.26.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/c/8/c89196f0287e2a88243cc4185305c576f3f4d677.png)

i managed to make it [full screen](http://uzh-25915504.hs-sites-eu1.com/testpagechat)

---

<div class="post-metadata">

**Author:** ![KSharma29](https://avatars.discourse-cdn.com/v4/letter/k/a88e57/32.png) [@KSharma29](https://community.hubspot.com/u/KSharma29)\
**Post date:** [November 24, 2024, 11:11pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/8 "2024-11-24T23:11:49Z")

</div>

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\>

---

<div class="post-metadata">

**Author:** ![SamStAmour](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/samstamour/32/106695_2.png) [@SamStAmour](https://community.hubspot.com/u/SamStAmour)\
**Post date:** [July 28, 2021, 3:21pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/9 "2021-07-28T15:21:53Z")

</div>

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 :

```lia-code-sample
<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!

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [July 29, 2021, 3:28pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/10 "2021-07-29T15:28:40Z")

</div>

@SamStAmour ,

Any errors in the console?

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

---

<div class="post-metadata">

**Author:** ![SamStAmour](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/samstamour/32/106695_2.png) [@SamStAmour](https://community.hubspot.com/u/SamStAmour)\
**Post date:** [August 3, 2021, 6:04pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/11 "2021-08-03T18:04:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MrHalversen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mrhalversen/32/26012_2.png) [@MrHalversen](https://community.hubspot.com/u/MrHalversen)\
**Post date:** [November 18, 2021, 10:40pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/12 "2021-11-18T22:40:38Z")

</div>

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\>

---

<div class="post-metadata">

**Author:** ![JMARRUGO](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@JMARRUGO](https://community.hubspot.com/u/JMARRUGO)\
**Post date:** [May 19, 2023, 12:51pm UTC](https://community.hubspot.com/t/embed-chat-on-a-page/14078/13 "2023-05-19T12:51:16Z")

</div>

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`