Shopify Horizon: Open Inbox Chat From a Link or Button

You can make any link or button on a Shopify Horizon storefront open your Shopify Inbox chat. Add a short onclick to a normal link that points to your contact page. When the chat is available, the click opens it on the current page. When the chat is unavailable, the same link takes the visitor to the contact page, so it always leads somewhere.

A chat link is most useful where visitors usually have a question before they buy: higher-priced products, made-to-order items, and services. We sell services, so we place one next to the buy button on our service pages, where a visitor can confirm the scope before ordering.

We tested the code in this article on Horizon 4.2.0 with Shopify Inbox. Below you will find the code for a single link, a reusable version for several links, the checks to run before you publish, and what to recheck after a theme update.

A click on “Start a chat” opens the chat panel on the same page.

Why open the chat from the link

A contact link asks for several steps: leave the current page, wait for a new one, and fill in a form. Each step is a point where a visitor with a quick question can give up. A chat link asks for one: the visitor types the question on the page they are already on, with the product or service still in view.

That makes the chat the easier way for a visitor to reach you, and the easier way for you to receive the inquiry. The contact page stays as the backup for visitors whose browser cannot load the chat.

What the link does

The chat loads a moment after the rest of the page. A visitor who clicks during that moment goes to the contact page.

Check that your theme has the chat element

Recent Horizon versions place the chat on the page as a <shopify-chat> element, and the code in this article talks to that element. To confirm your theme has it:

1. In Shopify admin, go to Online Store > Themes, open the … menu on your theme, and choose Edit code.
2. Open the snippets folder and look for chat-drawer.liquid.

If the file is there, continue. You also need Shopify Inbox installed, with chat turned on for your online store.

If the file is missing, your theme shows the chat in a different way. The link below still works as a plain contact link, but it will not open the chat. The FAQ at the end covers other themes and chat apps.

Add one chat link with a Custom Liquid block

This version needs no changes to theme files. Work on an unpublished duplicate of your theme first.

1. Open the theme editor and go to the place where you want the link, such as the footer or a product page.
2. Select Add block and choose Custom Liquid.
3. Paste the code below, change the link text, and save.

<a
  href="/pages/contact"
  onclick="var chat = document.querySelector('shopify-chat'); if (!chat || !customElements.get('shopify-chat')) return true; chat.show(); return false;"
>Start a chat</a>

Replace /pages/contact with the address of your own contact page. To show the link as a button in your theme’s button style, add class="button" to the <a> tag.

The code has three parts:

• A normal link. The href is the fallback. Keep it, even though the chat usually opens instead.
• A check. The code looks for the chat element and confirms the chat has loaded. If either check fails, the click continues to the contact page.
• The open command. chat.show() opens the chat, and return false stops the browser from following the link.

Reuse it across several links

If you want chat links in several places, add the logic to the theme once and keep each link short.

1. In Edit code, open snippets/chat-drawer.liquid.
2. Find the line that starts with const shopifyChat = near the top of the <script> block.
3. Paste this code directly below that line and save.

  // Custom: open the chat from a link, or let the link continue
  window.openChatBox = function openChatBox() {
    if (!shopifyChat || !customElements.get('shopify-chat')) return true;

    shopifyChat.show();
    return false;
  };

Each link then needs only one short attribute:

<a href="/pages/contact" onclick="return openChatBox();">Start a chat</a>

This version edits one of Horizon’s own files, so a theme update replaces it. If the function is missing after an update, the links still work as contact links until you add it again.

Use show() to open the chat

The chat closes itself when a visitor clicks anywhere outside the chat panel. Your link is outside the panel. Code that opens the chat by adding the open attribute to the element therefore has a side effect: the first click opens the chat, and a second click on the same link closes it.

show() tells the chat that the click was meant to open it. On our Horizon 4.2.0 store, repeated clicks on the link kept the chat open at desktop width, and the same code opened the chat at phone width.

Test before you publish

Preview the duplicate theme and check each chat link:

• Chat available. Wait for the chat button to appear, then click the link. The chat opens and the page address stays the same.
• Second click. Click the link again while the chat is open. The chat stays open.
• Chat unavailable. Reload the page and click the link right away, before the chat button appears. The contact page opens.
• Phone and desktop. Repeat the first check at both widths.
• Each template. Check every page type where you placed a link, such as the product page and the footer.

Recheck after a Horizon or Inbox update

This setup depends on parts of Horizon and Shopify Inbox that Shopify can change: the <shopify-chat> element, its show() method, and, for the reusable version, the shopifyChat variable in snippets/chat-drawer.liquid. We found no Shopify documentation for show(), so treat it as behavior to recheck instead of a guaranteed feature.

After a theme update, run the tests above on an unpublished copy. Because every link keeps its href, a change on Shopify’s side turns the links into contact links and never leaves them dead. Our guide to updating Shopify Horizon without losing custom code covers the full update process.

FAQ

Does this work on Dawn or another theme?

The code in this article is written for Horizon’s <shopify-chat> element. Other themes load Shopify Inbox in a different way, so on those themes the link behaves as a plain contact link. The pattern itself carries over: a normal link, a check that the chat is ready, and a command that opens it. Only the check and the open command change.

Can I use it with Tidio, Gorgias, or another chat app?

Yes. Chat apps such as Tidio, Gorgias, Zendesk, Intercom, Crisp, and tawk.to each provide their own command for opening the chat. The link keeps the same structure and the same contact-page fallback, and the open command is replaced with the one from your chat app. If you want WhatsApp instead, see our WhatsApp button snippets for Horizon.

Can you add this to my store?

Yes. We add chat links to any Shopify theme, with the chat app you already use, as part of our Shopify Custom Feature Development service. We confirm with you which links should open the chat and where they fall back to, then build and test it in your theme. If your chat app offers no way to open it from a link, we tell you before any work starts.

Can I add the chat link to my header menu?

A menu item in Shopify navigation accepts only a link address, so it cannot carry the onclick used here. A menu link needs a different approach: a small script in the theme that watches for clicks on that one menu item. This article does not cover it.

Does the link work on phones?

Yes. In our Horizon 4.2.0 test, the same code opened the chat at phone width and at desktop width.