I am trying to open a Messaging for In-App and Web chat programmatically, and I see that there may be some methods to do so, particularly embeddedservice_bootstrap.utilAPI methods such as:
embeddedservice_bootstrap.utilAPI.showChatButton()
The documentation shows what looks like a set up where the MIAW chat is added to a conventional website. However, I am trying to utilize these methods on an LWR site and have been unable to. Has anyone been able to pull this off? If so, how? I'm not sure what I am missing here.
I found the answer for this:
In order to open a MIAW chat button programmatically, in my case via a button placed elsewhere on the page, you will need to use a javascript event. To be clear, you will be using the event conventionally, not in the method described here which would be more helpful in communicating one LWC to another. The MIAW chat is not an LWC itself, but the prechat is, so that made it so that I had to use a conventional JS event.
1. Go to your desired site and drop in the Embedded Messaging component with your MIAW chat that you want to use in the Experience Builder.
2. In the left side main menu, click Settings > Advanced > Edit Head Markup.
3. In the Head Markup editor, add a simple listener like so:
document.addEventListener('launchMIAWChat', function(e){ embeddedservice_bootstrap.utilAPI.launchChat();});4. Click Save.
5. Create an LWC that holds the button you want to use to trigger the chat.
6. Make it so that button calls a method in the LWC JS file when clicked.
7. Within the method that gets triggered on click, dispatch a JS event to the document object that has a value that matches the value your listener is listening for. Make sure to double check this since this is an easy area to make a mistake that keeps the whole thing from working:
document.dispatchEvent(new CustomEvent("launchMIAWChat"));8. Save and deploy to the org.
9. Add the button LWC to your page.
10. You should now be able to click and have the chat open right up whether it is hidden or not.
