LWC: Interacting with the chat widget in a standard portal template

Question

I am using a standard salesforce template for the community portal. I have some custom LWC components that I am building and integrating with the template.

There's a "chat" button in one of my LWC components. When the user clicks on that "chat" button I am supposed to expand the chat widget that salesforce provides us with out of the box.

Is there a way to interact with that widget?

Because of the locker service and the shadow DOM I can't think of a way where I can simulate a mouse click from my custom component on the chat widget. I don't even know if this is possible.

Answer 1

After trying a number of different things I found a hacky solution for this. This solution might not work in the future but as of right now it's working well.

I will begin with the code in my LWC component that contains that custom chat button I mentioned in my question. When that chat button gets clicked on it will invoke a function in the JS side that creates a CustomEvent object and fires it like so:

HTML:

<div class="outter-wrapper">
    <div onclick={chatClick}></div>
</div>

JS:

chatClick() {
    if (this.template.querySelectorAll('.outter-wrapper')[0]) {
        let chatEvent = new CustomEvent(
                    'chatEvent',
                    {
                        detail: {
                            startChat: true
                        },
                        bubbles: true,
                        cancelable: true
                    }
                );
        this.template.querySelectorAll('.outter-wrapper')[0].dispatchEvent(chatEvent);
    }
}

This CustomEvent then gets caught up by vanilla JS code that is nested in the header section of the template. In case you are reading this and are unaware, if you go to the community builder in Salesforce there will be a section Settings->Advanced->Edit Head Markup that will allow you to put in vanilla js code.

Header JS:

document.addEventListener("chatEvent", chatClickHandler, false);

function chatClickHandler(ev) {
    if (ev.detail.startChat === true) {
        startChat();
    }
}

function startChat() {
    var button = document.getElementsByClassName('flatButton')[0];
    if (button != null){
        var buttonLabel = button.getAttribute("aria-label");
        if (buttonLabel != "Agents Offline"){
            button.click();
        }
        else{
            alert('Sorry, chat is not available right now. Please try again later.');
        }
    }
    else{
        alert('Sorry, chat is not available right now. Please try again later.');
    }
}

I hope this helps.