Blog, Website & Page Publishing

kaevans
Member

Opening chat from Hubspot landing page

SOLVE

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
MatthewShepherd
Solution
Key Advisor

Opening chat from Hubspot landing page

SOLVE

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

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.

View solution in original post

10 Replies 10
SarahMayo
Contributor

Opening chat from Hubspot landing page

SOLVE

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

JWharton
Contributor

Opening chat from Hubspot landing page

SOLVE

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

Opening chat from Hubspot landing page

SOLVE

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
MatthewShepherd
Key Advisor

Opening chat from Hubspot landing page

SOLVE

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

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
MatthewShepherd
Solution
Key Advisor

Opening chat from Hubspot landing page

SOLVE

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

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
JWharton
Contributor

Opening chat from Hubspot landing page

SOLVE

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

Opening chat from Hubspot landing page

SOLVE

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

0 Upvotes
SarahMayo
Contributor

Opening chat from Hubspot landing page

SOLVE

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
Key Advisor

Opening chat from Hubspot landing page

SOLVE

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

Freelance HubSpot Consultant
CRM Consultant | SEO Specialist

Did my post help answer your query?Help the community by marking it as a solution.
kaevans
Member

Opening chat from Hubspot landing page

SOLVE

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