WordPress: Open A LiveChat Window By Clicking A Hyperlink Or Button Utilizing Elementor

One among our purchasers makes use of Elementor as their WordPress web page builder. We’ve been serving to them clear up their inbound advertising and marketing efforts over the previous few months, minimizing the customizations they applied and enhancing the methods’ communication—together with analytics.

The client has LiveChat, a improbable chat service with strong Google Analytics integration for each step of the chat course of. LiveChat has an excellent API for integrating it into your web site, together with being able to pop open the chat window utilizing an onClick occasion in an anchor tag.

Right here’s how that appears:

<a href="#" onclick="father or mother.LC_API.open_chat_window();return false;">Chat Now!</a>

That is helpful if you happen to can edit core code or add customized HTML. With Elementor, although, the platform is locked down for safety causes, so you cannot add an onClick occasion to any object. When you’ve got that customized onClick occasion added to your code, you don’t get any kind of error, however you’ll see the code stripped from the output.

Utilizing a Click on Listener on a Class

One limitation of the onClick methodology is that you would need to edit each single hyperlink in your web site and add that code. An alternate methodology is to incorporate a script within the web page that listens for a selected click on in your web page, and it executes the code for you. This may be achieved by on the lookout for any anchor tag with a selected CSS class. On this case, we’re designating an anchor tag with a category named openchat.

We don’t need our button to be displayed till Livechat is loaded, so we’ll add a category to the theme to initially cover any button with that class:

.openchat { show: none; }

Elementor Class

For any Elementor object we wish to open the chat, we simply should set the category as openchat.

JavaScript for Livechat to Open OnClick

Now, we will both add the script to our footer or to Google Tag Supervisor to load LiveChat, show the buttons after it’s loaded, after which open the chat window if any component with the openchat class is clicked.

<!-- Begin of LiveChat code -->
<script async="true">
    (operate() {
        var lc = doc.createElement('script');
        lc.kind="textual content/javascript";
        lc.async = true;
        lc.src="https://widgets.theglobalcdn.com/{your area}/widgets-main.js";
        lc.onload = operate() {
            // As soon as the script is loaded, verify for LC_API availability
            waitForLCAPILoad(operate() {
                // Show .openchat parts
                displayOpenChatElements();
                // Add click on listeners to .openchat parts
                addChatButtonListeners();
            });
        };
        var s = doc.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(lc, s);
    })();

    // Wait till LiveChat is open earlier than displaying the button
    operate waitForLCAPILoad(callback) {
        if (window.LC_API) {
            callback();
        } else {
            setTimeout(operate() {
                waitForLCAPILoad(callback);
            }, 100); // Examine each 100 milliseconds
        }
    }

    // Show the button
    operate displayOpenChatElements() {
        var openchatElements = doc.querySelectorAll('.openchat');
        openchatElements.forEach(operate(component) {
            component.fashion.show = 'block'; // Alter this to suit the way you need these parts to look
        });
    }

    // Open the chat window if a button is clicked
    operate addChatButtonListeners() {
        var openchatElements = doc.querySelectorAll('.openchat');
        openchatElements.forEach(operate(component) {
            component.addEventListener('click on', operate() {
                if (window.LC_API) {
                    if (!window.LC_API.chat_window_minimized()) {
                        return false; // If the chat window is already open, do nothing
                    }
                    window.LC_API.open_chat_window();
                }
                return false; // Stop default motion
            });
        });
    }
</script>
<!-- Finish of LiveChat code -->

Constructing a web site with Elementor is straightforward, and I extremely suggest the platform. There’s a terrific neighborhood, tons of assets, and fairly just a few Elementor Add-Ons that improve the capabilities.

Get Began With Elementor Get Began With LiveChat