Opening chat from Hubspot landing page

SOLVE
kaevans
Member

Hello all,

 

I am trying to open our hubspot live chat when a user clicks a button on a hubspot landing page.

 

I don't see a way in doing that.

 

Anyone know?

 

Thanks!

 

0 Upvotes
1 Accepted solution

Accepted Solutions
MatthewShepherd
Solution
HubSpot Employee

Hi @kaevans 

There isn't an easy way to add an onclick attribute to your CTA. If you need to use a HubSpot CTA then you can try adding #hs-chat-open to the URL of the current page within a CTA, but that reloads the page and isn't a great experience. The best approach is to add the hyperlink code to your rich text content module using Advanced->Source code. The code above just displays a link, so if you want this to look like a CTA button you'll need to use some CSS styling. HubSpot has some CSS classes already built into their default stylesheets so you could try adding a class to your link as follows and see what that looks like:

<a href="#" onclick="window.HubSpotConversations.widget.open();" class="hs-button primary">Open Live Chat</a>

 
If the above doesn't work you'll need to add your own CSS to turn the link into a button. Sites like this can help generate the required CSS for your button. Once you have your CSS code you can add it inline, in the head of your page or in the site stylesheet.


Matthew Shepherd

Senior Inbound Consultant

Professional Services | HubSpot

He/Him

linkedin.com/in/matthewshepherd/
https://www.hubspot.com/services/professional

View solution in original post

10 Replies 10
MatthewShepherd
HubSpot Employee

Hi @kaevans 

You can append #hs-chat-open to a URL to make the chat widget open on that page. If you are trying to open the chat widget on the page the user is already on, I find the best way is to use some JavaScript in the onclick attribute of your button link as follows 

 

<a href="#" onclick="window.HubSpotConversations.widget.open();">Open Live Chat</a>

 


Matthew Shepherd

Senior Inbound Consultant

Professional Services | HubSpot

He/Him

linkedin.com/in/matthewshepherd/
https://www.hubspot.com/services/professional
kaevans
Member

Thank you. I saw that but I don't see a way of adding the onclick part...where do I add that on the landing page CTA button?

0 Upvotes
MatthewShepherd
Solution
HubSpot Employee

Hi @kaevans 

There isn't an easy way to add an onclick attribute to your CTA. If you need to use a HubSpot CTA then you can try adding #hs-chat-open to the URL of the current page within a CTA, but that reloads the page and isn't a great experience. The best approach is to add the hyperlink code to your rich text content module using Advanced->Source code. The code above just displays a link, so if you want this to look like a CTA button you'll need to use some CSS styling. HubSpot has some CSS classes already built into their default stylesheets so you could try adding a class to your link as follows and see what that looks like:

<a href="#" onclick="window.HubSpotConversations.widget.open();" class="hs-button primary">Open Live Chat</a>

 
If the above doesn't work you'll need to add your own CSS to turn the link into a button. Sites like this can help generate the required CSS for your button. Once you have your CSS code you can add it inline, in the head of your page or in the site stylesheet.


Matthew Shepherd

Senior Inbound Consultant

Professional Services | HubSpot

He/Him

linkedin.com/in/matthewshepherd/
https://www.hubspot.com/services/professional

View solution in original post

JWharton
Contributor

In the url field of a module, I can paste 

"#" onclick="window.HubSpotConversations.widget.open();"

and get partly there.

 

But the page reloads (and back to top) before launching the chat window. Any suggestions would be greatly appreciated!

0 Upvotes
JWharton
Contributor

Resolved this by removing the " at the start and end of that line.

0 Upvotes
SarahMayo
Contributor

Hi JWharton, could you clarify what you mean? I think I'm trying to do the same thing as you with a button on a landing page, and having the same issue where the chat pops open the way I want it to, but it jumps the browser back up to the top of the page.

0 Upvotes
MatthewShepherd
HubSpot Employee

Hi @SarahMayo 

Try changing your onclick to code to:

 

onclick="window.HubSpotConversations.widget.open(); return false;"

 

That stops the link scrolling to the top for me.


Matthew Shepherd

Senior Inbound Consultant

Professional Services | HubSpot

He/Him

linkedin.com/in/matthewshepherd/
https://www.hubspot.com/services/professional
SarahMayo
Contributor

Brilliant, that worked perfectly, thanks so much!!!

JWharton
Contributor

Because I'm putting this into a url field of a module, I had to do it like this: 

#" onclick="window.HubSpotConversations.widget.open(); return false;

Notice no opening or closing quotation marks.

0 Upvotes
SarahMayo
Contributor

Ahhh I see. I wound up implementing mine a little differently with the URL applied in the source code of a rich text module. That "return false;" component was the missing piece for me.

0 Upvotes