Trigger Shopify Inbox Widget with Javascript

Shopify Apps
1

Is there a way to trigger the Shopify Inbox widget open with Javascript? I’m hoping to have different links throughout my site programmatically open/close the widget without having to actually click the Shopify Inbox Widget icon.

Thanks!

-Brice

3 Likes
2

Would also like to know how to do this so that we can customize the button!

3

Hey @bricechristian Shopify Inbox widget is an iframe embedded same as other similar solutions. You can manipulate elements of embedded iframes through vanilla JS, for example below is a code that will trigger a predefined question from menu of 7 questions you can setup upfront in the Admin panel:

document.querySelector("#ShopifyChat").contentWindow.document.querySelector(".interstitial-view__instant-answers-list").querySelector(".instant-answers-list__prompt").click();

I’m working currently on something similar and can share when finished.

4

@Ginko you can get to the button inside Shopify Inbox chat embed using JS:

document.querySelector("#ShopifyChat").contentWindow.document.querySelector(".chat-toggle--bottom-right").click();
5

chat

6

Looks like the inbox chat button is no longer an iFrame and is now a React element. Do you have an updated script that works?

1 Like
7

yes, I am looking for an updated script as well.

8

This is what I got to work.

Live chat with us
3 Likes
9

Updated code based on them changing away from the iFrame to the Web Component. This code will open/close the Shopify Inbox widget, based on whatever it’s current state is. Add that function as the event listener as needed.

function handleChatClick() {
    const chatElement = document?.getElementById(`ShopifyChat`)?.shadowRoot?.querySelector(`.chat-app>button`)
    chatElement && chatElement.click()
}
10

FINALLY! Thank you so much!!!