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.