launching chat from a link

SOLVE
zogics
Participant

We would like to be able to launch the chat conversation from the click of a link. We have a couple of uses cases on our e-commerce site:

 

1) is the "Talk to an Expert" link on our product description pages like here:

https://zogics.com/gym-wipes/antibacterial-gym-wipes-z800-4-rolls-case

(located under quantity option and above add to cart button)

2) the "click here" text link after "Chat:"

3) In our footer - the live chat option 

 

We migrated our chat service from SnapEngage - and we used to use JavaScript to make this happen.

 

<a onclick="return SnapEngage.startLink();" href="javascript&colon;void(0);" title="Talk to an Expert">Talk To An Expert</a>

 

Does anyone know the equivalent on click link for the HubSpot chat? Or an alternative solution?

1 Accepted solution

Accepted Solutions
MFrankJohnson
Solution
Thought Leader

Try this ...

<a id="click-to-chat__cta--text" class="cta cta--blue" style="margin-top: 20px;" onclick="window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();">Chat with Sales</a>

 

Note: The date of each post here is increasingly important as HubSpot evolves to be the #1 CRM platform of choice world-wide.

-- Visit

 

Hope that helps.

 

Be well,
Frank


HubSpot's Hiring World-Wide!

View solution in original post

29 Replies 29
MFrankJohnson
Solution
Thought Leader

Try this ...

<a id="click-to-chat__cta--text" class="cta cta--blue" style="margin-top: 20px;" onclick="window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();">Chat with Sales</a>

 

Note: The date of each post here is increasingly important as HubSpot evolves to be the #1 CRM platform of choice world-wide.

-- Visit

 

Hope that helps.

 

Be well,
Frank


HubSpot's Hiring World-Wide!

View solution in original post

zogics
Participant

You are a "super-genius" - yes it works. Thank you thank yoy!

0 Upvotes
MFrankJohnson
Thought Leader

No genious. Just resourceful HubSpot researcher.

Please mark as solved. Thanks

 

Note: The date of each post here is increasingly important as HubSpot evolves to be the #1 CRM platform of choice world-wide.

-- Visit

 

Hope that helps.

 

Be well,
Frank


HubSpot's Hiring World-Wide!

0 Upvotes
soumlabs
Contributor

Hey but where do i put this piece of code? I'm no programmer. Also, i see their website they have moved the chat widget to middle of the pages. How to do it?

0 Upvotes
Anonymous
Not applicable

No code required, just "Append #hs-chat-open to the end of your URL to trigger the chat widget launch."

 

Reference: https://knowledge.hubspot.com/articles/kcs_article/conversations/chat-with-your-website-visitors

 

🙂 

soumlabs
Contributor

That is not the solution. It will refresh the page upon clicking the hyper link. I don't want the page to refresh.

0 Upvotes
Anonymous
Not applicable

Then it would help to specify your requirments in more detail 

0 Upvotes
soumlabs
Contributor

I just want it to work like it is working in the website of the originial poster of this thread. Click the hyperlink and the chat opens up without refreshing the page.

 

Go to the footer of this website and click the live chat hyperlink text

 

https://zogics.com/gym-wipes/antibacterial-gym-wipes-z800-4-rolls-case

0 Upvotes
Anonymous
Not applicable

@soumlabs  If you want the button/link to open the chat bubble without a page refresh/reload, then don't use the full page link, and just link to the anchor instead.

 

here you go:

 

<a href="#hs-chat-open">Open chat</a>

 

Did my post help your query? Help the community by Marking it as a solution if it solved your query. In addition, Upvotes are welcome too.

0 Upvotes
soumlabs
Contributor

It was worse than refreshing page. When I clicked the hyperlink, it took my off to a different 404 not found page and then it opened the chat window.

@Anonymous 

0 Upvotes
MFrankJohnson
Thought Leader

- see Chat with your website visitors regarding use of #hs-chat-open

- see original solution above (also, image below)

 

hubspot-chat-code-onclick-click-to-open.png

 

 

Note: The date of each post here is increasingly important as HubSpot evolves to be the #1 CRM platform of choice world-wide.

-- Visit

 

Hope that helps.

 

Be well,
Frank


HubSpot's Hiring World-Wide!

0 Upvotes
Anonymous
Not applicable

@MFrankJohnson  Please stick to DRY principles. Not sure why you'd want to add JS when a simple anchor link works and is the suggested solution as per the Hubspot documentation - link above

0 Upvotes
MFrankJohnson
Thought Leader

>>"MFrankJohnson Please stick to DRY principles. Not sure why you'd want to add JS when a simple anchor link works and is the suggested solution as per the Hubspot documentation..."

 

WOW, Lopser. Appreciate the flogging.


However, one of the reasons the HubSpot Community exists is because HubSpot documented/suggested solutions don't always solve for all use cases.


-ps
The HubSpot Community is a place where EVERYONE is welcome to post their solutions without being patronized or condescended to. BTW - DRY development speaks to reduction in reduncancy and code repetition specifically -- not the use of alternative solutions or .js.

#nlmtu

 

Note: The date of each post here is increasingly important as HubSpot evolves to be the #1 CRM platform of choice world-wide.

-- Visit

 

Hope that helps.

 

Be well,
Frank


HubSpot's Hiring World-Wide!

Anonymous
Not applicable

@MFrankJohnson I'm not saying your solution isn't correct, I'm saying that you are recreating the wheel when it's not neccessary - there's a simpler way to implement.

 

A couple of extra characters or requests here and some more there all adds up and will impact your website performance.

 

Re: my previous reply, you are right, everyone is welcome to post. I apologise, sometimes my OCD gets the better of me.

 

Best of luck

soumlabs
Contributor

The anchor redirected the page to a 404 and then it opened the chat. 

0 Upvotes
soumlabs
Contributor

@MFrankJohnson I couldn't try your method as I don't know where to put code. Explain?

0 Upvotes
RZhang
Member

Hi  i have tried it, but i dont work.
is there anything wrong??

https://campaign.innovatingautomation.asia/test 

 

0 Upvotes
PamCotton
Community Manager

Hello @RZhang could you please provide us more details in what was changed on your end? 

 

Thank you,

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




RZhang
Member

Hi Pam,

I want to realize the effect like that:

When I click a button, the chat box come out in a new tab. Please check the attachment.

https://community.hubspot.com/t5/Tickets-Conversations/launching-chat-from-a-link/td-p/252778


Best Regards

0 Upvotes
WareWorks
Member

Hi Frank

 

This is not working for me and generating a client side error, Any idea about this?

 

Uncaught TypeError: Cannot read property 'messages' of undefined
at HTMLAnchorElement.onclick ((index):503)

 

0 Upvotes
MiaSrebrnjak
Community Manager

HI @WareWorks,

 

Welcome to the Community! It would be great if you can share which troubleshooting steps you have taken so far and include a screenshot of the error so the Community has more information to work with. 

 

Thanks

Mia 


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


WareWorks
Member

Hi Mia

 

I have resolved this issue. Thank you for your help. 

 

WW

MiaSrebrnjak
Community Manager

Thank you @WareWorks, I'm glad you were able to find a solution!

 

Have a great rest of your day

Mia 


Wusstest du, dass es auch eine DACH-Community gibt?
Nimm an regionalen Unterhaltungen teil, indem du deine Spracheinstellungen änderst !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


mediPr
Member

I implemented this on my websites and it was working, but a recent update seems to have broken it on two independent website. Anyone experiencing the same? Any solutions? Thanks

0 Upvotes
PamCotton
Community Manager

Hello @mediPr 

 

Would you be able to provide us more information about what is happening in your end?  The more information, screenshots, and details you can provide, the better I can advise on the next steps.

 

Thank you,

Pam

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




0 Upvotes
pixii
Participant

@mediPr I had the same thing happen to buttons across my entire site, sometime in the last few weeks.

 

I found something that works.

 

Solution:

 

Where your code had:

onclick="window.hubspot.messages.EXPERIMENTAL_API.requestWidgetOpen();"

 

Replace with:

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

 

This should fix it.

sharonlicari
Community Manager

Thank you for sharing @pixii 


¿Sabías que la Comunidad está disponible en Español?
¡Participa hoy en conversaciones en el idioma de tu preferencia,cambiando el idioma en tus configuraciones!

Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


mediPr
Member

Hi, thanks so much. Excellent. This solved my issue!

MatthewShepherd
HubSpot Employee

For anyone looking to not load their chat widget at all until a button is clicked (rather than popping open a chat widget that has already loaded as discussed above), take a look at this post: https://community.hubspot.com/t5/Tips-Tricks-Best-Practices/onclick-action-doesn-t-work/m-p/457288#M...


Matthew Shepherd

Senior Inbound Consultant

Professional Services | HubSpot

He/Him

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