How to embed HubSpot live chat or chatbot to a dedicated page

You can easily add HubSpot's live chat feature or chatbot to your website, as a floating widget on a page, which can be seen in the image below.

However, in some cases, you may need or want a dedicated webpage where you can display live chat or chatbot in the content area which can easily be visible to the user. See the example here and through the image below:

In this knowledge base, we will be covering live chat and chatbot creation only via the HubSpot webpage method. But, the basic principle will be the same if you need to install it on an external (outside HubSpot) webpage.

The following steps are needed to achieve our goal:

Create a Live Chat	Create a Module	Create a HubSpot page

1. Create a live chat or chatbot in HubSpot

1. On the top menu in HubSpot click on Conversations > Chatflows.
2. At the top right click Create chat flow.
3. Select Website, Live chat and click Next.
4. If you have multiple inboxes set up in your account, click the Select an inbox dropdown and select a different inbox
5. Select Who on your team will be shown in the live chat and set the automatic welcome message.
6. You can choose to automatically assign conversations to specific team members as well as ask visitors for their email addresses.
7. Select your display options at the bottom and then click “Who” on the left menu bar.
8. Decide who should see this chat flow and then click “When” on the left menu bar.
9. You can now select which pages on your website you would like your live chat to be displayed on.
10. Once you are happy, finally select “Options” on the left menu bar and choose your language and privacy settings.
11. Once you are done you can then switch on your live chat using the slider at the top right.

<div id="hubspot-conversations-inline-parent">

<div id="hubspot-conversations-inline"></div>

</div> 

#hubspot-conversations-inline-parent > div {

max-width: 600px;

margin: 0 auto;

}

#hubspot-conversations-inline-parent iframe {

width: 100%;

margin: 0 auto;

height: 500px;

}

window.hsConversationsSettings = {

loadImmediately: false,

inlineEmbedSelector: '#hubspot-conversations-inline',

enableWidgetCookieBanner: true,

disableAttachment: true

};

window.hsConversationsOnReady = [

() => {

window.HubSpotConversations.widget.load();

},

];