WordPress: Open a LiveChat window by clicking a link or button using Elementor

ApalloSaute

One of our clients uses Elementor as a WordPress site builder. Over the past few months, we've helped them clean up their inbound marketing efforts, minimize the adjustments they've implemented, and improve systems communication—including analytics.

The customer has LiveChat, a fantastic chat service with robust Finland Phone Number Database Google Analytics integration for every step of the chat process. LiveChat has a very good API to integrate into your website, including the ability to open a chat window using the onClick event in the anchor tag.

This is what it looks like:

This is useful if you can modify the underlying code or add your own HTML. However, with Elementor, the platform is locked down for security reasons, so you can't add an onClick event to any object. If you add this custom onClick event to your code, no error type will appear, but the code will be removed from the output.

Using a Click Listener on a class
One of the limitations of the onClick methodology is that you would have to edit every single link on your site to add this code. An alternative methodology is to include a script on the page that listens for a specific click on your page and runs the code for you. This can be done by searching for any anchor tag with a specific CSS class. In this case, we mark the anchor tag with a class called openchat.

We don't want our button to show until Livechat loads, so we'll add a class to our theme that will initially hide any button with this class:

Elementor class
For any Elementor object we want to open chat, we just need to set the class as openchat.

elementor link
elementor advanced settings classes
JavaScript for Livechat to open OnClick
Now we can either add a script to our footer or Google Tag Manager to load LiveChat, show the buttons after loading, and then open the chat window if any element with the openchat class is clicked.