Open Shopify Inbox/Chat widget with in text hyperlink

Shopify Discussion
1

Hi all. Thank you for reading this. I am looking add a text link in my about us page that says ‘Chat with our team’ and when a user clicks this the Shopify Inbox widget opens in the bottom right hand corner of the screen.

Does anyone know how this is possible?

Thanks in advance.

1 Like
2

You could click the button using JS, e.g:


Hello, please contact us

Ideally this would function without JS so you would enter a real href (to your contact page) and only open the chat if JS is enabled.

1 Like
3

Hi, thank you for the reply. I have JS enabled but this code doesn’t work?

I have tried a few different ID’s for the Shopify chat button but had no luck.

Thanks in advance

4

Use the hyper link:
https:///?show_chat

It works on my site, check it out:
https://leivine.com/pages/contact-us/

Click on “live chat”

4 Likes
5

chat

1 Like
6

Works great, thanks!

7

This only works once. If you close the chat widget and then again tap the link, it doesn’t work. Can you tell me how to fix that?

8

Thank you @LeivineWine ! It worked for me too (repeatedly) using the hyperlink below:
https:///?show_chat

Check it out here:

Send us a Woof!

Click on the “chat” link.

9

Where do i place the code within my theme? I use Impulse by archetype.

10

Came across this while trying to do this myself and came up with a somewhat simpler solution that works repeatedly and is easy to get working anywhere without special attributes on the link. Put the script below where ever custom JS goes in your theme.

Then all you have to do is have the chat link point to #chat, which you can do in any rich text field in the theme editor, for example:


Chat with our team
11

Hello

I have the “Boost” Theme and want to have the same thing.. but I am having problems putting this code into the “page.contact.json”..

Can you please help me with this?

12

You should use:

document.getElementById(`${iframeId}`).shadowRoot.querySelector("button.chat-toggle").click();

instead of

document.getElementById(`${iframeId}`).contentWindow.document.querySelector("button.chat-toggle").click();
1 Like
13

Ah, looks like they changed it to no longer live in an iframe. I’ve updated the code to be even simpler now:
1 Like
14

This should be the accepted solution ^^^

15

Hi!

Thanks very much for this workaround. Do I understand it correctly that this script prevents the chat icon from showing on the website and will only be visible when the link to #chat is clicked?
I inserted the script in the header section of theme.liquid. Nonetheless, the chat icon is still showing up all the pages. Did I put the script in the wrong place?