# launching chat from a link

**URL:** <https://community.hubspot.com/t/launching-chat-from-a-link/12983>\
**Category:** Tickets & Conversations\
**Created:** [February 13, 2019, 5:03pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983 "2019-02-13T17:03:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![zogics](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/zogics/32/29572_2.png) [@zogics](https://community.hubspot.com/u/zogics)\
**Post date:** [February 13, 2019, 5:03pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/1 "2019-02-13T17:03:35Z")

</div>

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:

> **[Zogics Antibacterial Disinfecting Wipes, Z800-4 (4 rolls/case)](https://zogics.com/gym-wipes/antibacterial-gym-wipes-z800-4-rolls-case)**
>
> Our best selling disinfectant wipes.

(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: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?

---

<div class="post-metadata">

**Author:** ![MFrankJohnson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mfrankjohnson/32/22490_2.png) [@MFrankJohnson](https://community.hubspot.com/u/MFrankJohnson)\
**Post date:** [February 13, 2019, 9:58pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/2 "2019-02-13T21:58:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zogics](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/zogics/32/29572_2.png) [@zogics](https://community.hubspot.com/u/zogics)\
**Post date:** [February 13, 2019, 10:24pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/3 "2019-02-13T22:24:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MFrankJohnson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mfrankjohnson/32/22490_2.png) [@MFrankJohnson](https://community.hubspot.com/u/MFrankJohnson)\
**Post date:** [February 13, 2019, 10:41pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/4 "2019-02-13T22:41:38Z")

</div>

No genious. Just resourceful HubSpot researcher.

Please mark as solved. Thanks

---

<div class="post-metadata">

**Author:** ![soumlabs](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/soumlabs/32/98997_2.png) [@soumlabs](https://community.hubspot.com/u/soumlabs)\
**Post date:** [August 9, 2019, 10:05am UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/5 "2019-08-09T10:05:41Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [August 20, 2019, 8:20am UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/6 "2019-08-20T08:20:40Z")

</div>

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](https://knowledge.hubspot.com/articles/kcs_article/conversations/chat-with-your-website-visitors)

🙂

---

<div class="post-metadata">

**Author:** ![soumlabs](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/soumlabs/32/98997_2.png) [@soumlabs](https://community.hubspot.com/u/soumlabs)\
**Post date:** [August 20, 2019, 10:36am UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/7 "2019-08-20T10:36:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [August 20, 2019, 11:25am UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/8 "2019-08-20T11:25:44Z")

</div>

Then it would help to specify your requirments in more detail

---

<div class="post-metadata">

**Author:** ![soumlabs](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/soumlabs/32/98997_2.png) [@soumlabs](https://community.hubspot.com/u/soumlabs)\
**Post date:** [August 20, 2019, 1:02pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/9 "2019-08-20T13:02:18Z")

</div>

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

> **[Zogics Antibacterial Disinfecting Wipes, Z800-4 (4 rolls/case)](https://zogics.com/gym-wipes/antibacterial-gym-wipes-z800-4-rolls-case)**
>
> Our best selling disinfectant wipes.

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [August 20, 2019, 1:10pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/10 "2019-08-20T13:10:19Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![soumlabs](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/soumlabs/32/98997_2.png) [@soumlabs](https://community.hubspot.com/u/soumlabs)\
**Post date:** [August 20, 2019, 5:17pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/11 "2019-08-20T17:17:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MFrankJohnson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mfrankjohnson/32/22490_2.png) [@MFrankJohnson](https://community.hubspot.com/u/MFrankJohnson)\
**Post date:** [August 20, 2019, 1:28pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/12 "2019-08-20T13:28:57Z")

</div>

- see [Chat with your website visitors](https://knowledge.hubspot.com/articles/kcs_article/conversations/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](https://d2qpr2jzcazej7.cloudfront.net/original/2X/4/4377d244d8bf16366f5f2341272feb89b78f1fdb.png)

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [August 20, 2019, 1:32pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/13 "2019-08-20T13:32:17Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![MFrankJohnson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mfrankjohnson/32/22490_2.png) [@MFrankJohnson](https://community.hubspot.com/u/MFrankJohnson)\
**Post date:** [August 20, 2019, 2:06pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/14 "2019-08-20T14:06:28Z")

</div>

\>\>

_“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

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [August 20, 2019, 2:12pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/15 "2019-08-20T14:12:25Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![soumlabs](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/soumlabs/32/98997_2.png) [@soumlabs](https://community.hubspot.com/u/soumlabs)\
**Post date:** [August 20, 2019, 5:23pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/16 "2019-08-20T17:23:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![soumlabs](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/soumlabs/32/98997_2.png) [@soumlabs](https://community.hubspot.com/u/soumlabs)\
**Post date:** [August 20, 2019, 5:26pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/17 "2019-08-20T17:26:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cquesadad](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cquesadad/32/38789_2.png) [@cquesadad](https://community.hubspot.com/u/cquesadad)\
**Post date:** [June 16, 2022, 11:28am UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/18 "2022-06-16T11:28:08Z")

</div>

Perfect! I understod: here the complete solution that wordked for me:

`<a id="click-to-chat__cta--text" class="cta cta--blue" style="margin-top: 20px;" onclick="window.HubSpotConversations.widget.open()" href="#hs-chat-open">Chat with Sales</a>`

---

<div class="post-metadata">

**Author:** ![kvlschaefer](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kvlschaefer/32/71076_2.png) [@kvlschaefer](https://community.hubspot.com/u/kvlschaefer)\
**Post date:** [June 16, 2022, 9:05pm UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/19 "2022-06-16T21:05:32Z")

</div>

Thanks for sharing, @cquesadad!

---

<div class="post-metadata">

**Author:** ![CAmmann](https://avatars.discourse-cdn.com/v4/letter/c/f04885/32.png) [@CAmmann](https://community.hubspot.com/u/CAmmann)\
**Post date:** [April 28, 2023, 5:40am UTC](https://community.hubspot.com/t/launching-chat-from-a-link/12983/20 "2023-04-28T05:40:25Z")

</div>

That works, however, with the delay set. Does anyone know how the chat window will open immediately?

[Next page](https://community.hubspot.com/t/launching-chat-from-a-link/12983.md?page=2)
