Set Shopify Online Store Chat to display on one page only

Shopify Apps
,
1

I am trying to set up the Shopify online store chat, but I don’t want it to display on all pages. According to their help, it is all or none. I’ve found several posts where others have set this up to work via a link on one page, but I can’t get it to work.

Some people had a javascript set up and others went with a standard html link, as it no longer runs within an I-frame. I’ve tried the code that seemed to work for many, but it isn’t working for me.

This is the code:

<a href="https://domain.com/pages/contact-us/?show_chat"> Click here for Live Chat</a>

I have the chat enabled (which means it is currently showing on every page), then put this code on the page I wanted the chat link to be on, but it opens a 404 page.

Can anyone tell me what is wrong or what html I need to use for the link, and then how I remove it from the all the other pages? If I un-embed the app I am assuming it won’t work at all.

2

You can hide the chat button with CSS on all pages, but one.
For example – you can have this in “Theme settings”=> Custom CSS:

  inbox-online-store-chat#ShopifyChat[is-open="false"] {
    transform: translateX(-100vw);
  }

And then, on the page you want the chat to show, add a “Custom liquid” section to the template and have this:

<style>
  inbox-online-store-chat#ShopifyChat[is-open="false"] {
    transform: none !important;
  }
</style>

Use of !important will override the previous rule and show the chat widget on this page.

To use a link as a trigger to show chat, you’d need to use JS code, let me know if you need this – I’ve already shared it in forums somewhere, but looks like it was removed by the forums migration…

3

Hi @JeanneMeier

You can hide the chat widget everywhere, then only load/enable it on selected pages (like Contact Us).

Steps to configure Chat Widget:

In the Shopify theme, go to Online Store → Themes → Edit code.

Look in theme.liquid for the Shopify Inbox tag (or the third-party chat app script).

Wrap the script in Liquid conditions
Instead of loading it on every page, load it only on the Contact Us page:

{% if template contains ‘page.contact’ %}

{% endif %}

Replace ‘page.contact’ with the right template or page handle (e.g. page.contact-us if that’s the URL slug).

Save and apply to the live. Hope these steps will slove your problem.

Let me know if you need more help.

Thanks & Regards