I have build a community and added chat support on the community page. The chat window appears and work perfectly once we click on Chat icon (at bottom right) on the page. Further I am trying to open same chat window on a custom hyperlink text which is on the same page in another section.

enter image description here

While exploring for the solution, I found some article and able to open this chat window using below javascript snippet.


But when I try the same code in either Aura or LWC, this always fails because document.getElementsByClassName returns null.

Aura controller method:

var elements = document.getElementsByClassName("flatButton");
console.log("===elements.length: " + elements.length); // return 0

LWC js:

var elements = document.getElementsByClassName("flatButton");
console.log("===elements.length LWC: " + elements.length);

var spanTest = document.querySelector("#helpButtonLabel");
console.log("===spanTest LWC: " + JSON.stringify(spanTest));

let firstClass = this.template.querySelector(".flatButton");
console.log("===firstClass LWC: " + JSON.stringify(firstClass));

Below is the chat button HTML markup that I found:

<div class="embeddedServiceHelpButton helpWrapper helpButtonEnabled forceCommunityEmbeddedServiceHelpButton" data-aura-rendered-by="5:251;a" data-aura-class="forceCommunityEmbeddedServiceHelpButton" style="display: block;">
<button class="flatButton" aria-label="Chat with an Expert" data-aura-rendered-by="6:251;a">
    <span role="presentation" aria-hidden="true" class="help x-small embeddedServiceIcon" data-aura-rendered-by="10:251;a" data-aura-class="embeddedServiceIcon"><!--render facet: 11:251;a--><!--render facet: 12:251;a--><!--render facet: 13:251;a-->
        <svg focusable="false" aria-hidden="true" data-key="chat" viewBox="0 0 100 100" class="icon">
            <path d="M50 7.692c-25.577 0-45.962 18.846-45.962 42.116 0 7.307 2.116 14.23 5.577 20.384.577.962.77 2.116.385 3.27L4.038 89.808c-.576 1.538.962 2.884 2.5 2.5l16.54-6.346c.96-.385 2.114-.193 3.268.384 6.923 3.846 15.192 6.154 24.04 6.154 25.19-.192 45.768-18.846 45.768-42.308-.192-23.654-20.77-42.5-46.154-42.5zm-23.077 50c-4.23 0-7.692-3.46-7.692-7.692s3.462-7.692 7.693-7.692 7.692 3.46 7.692 7.692-3.46 7.692-7.692 7.692zm23.077 0c-4.23 0-7.692-3.46-7.692-7.692s3.46-7.692 7.692-7.692 7.692 3.46 7.692 7.692-3.46 7.692-7.692 7.692zm23.077 0c-4.23 0-7.692-3.46-7.692-7.692s3.46-7.692 7.692-7.692S80.77 45.768 80.77 50s-3.462 7.692-7.693 7.692z"></path>
    <span aria-live="polite" aria-atomic="true" class="helpButtonLabel" data-aura-rendered-by="14:251;a">
        <span class="assistiveText" data-aura-rendered-by="15:251;a">Live chat:</span>
        <span class="message" data-aura-rendered-by="17:251;a">Chat with an Expert</span>

Any help will be much appreciated. Not sure if this is happening because of locker services, but I am trying to access this in the same org that means all components are within the same namespace.

  • Unless that button lives inside the component, you're not going to be able to get ahold of it with an LWC or Aura component unfortunately. Jan 13 at 15:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.