Trigger Chat Widget Button Click Using JavaScript in Shopify Theme

Other Questions Shopify
1

I’m working on a Shopify store and need to programmatically activate a chat widget when users click a custom button. The chat widget has a div element with role=“button” that I want to trigger from my own button.

My Custom Button:

<button class="help-trigger">Contact Support</button>

Chat Widget Element:

<div class="chat-widget" data-id="chat-launcher" role="button">

</div>

Current JavaScript Code:

document.querySelector(".help-trigger").addEventListener("click", function () {
    document.querySelector(".chat-widget")?.click();
});

The problem I’m facing is that sometimes the chat widget element isn’t available when my script runs, or the click event doesn’t work properly on the div.

Main Questions:

  1. Could the chat widget be loading asynchronously after page load? How do I wait for it to be ready?

  2. Should I use a different method than .click() for div elements with role=“button”? Maybe dispatchEvent() would work better?

  3. What if the chat widget is embedded in an iframe? How would I access it then?

Any help would be great. The chat system I’m using is Front Chat.