How to Make a Button Open the 3CX Chat Widget on Your WordPress Website

If you’re running the 3CX live chat widget on your WordPress site, you’ve probably noticed it places a floating chat bubble in the bottom corner of the page. That’s great, but what if you want a button, icon, or link elsewhere on the page to open the same chat window when clicked? Maybe you have a “Chat with us” icon in your footer, a call-to-action in your hero section, or a contact page button that should kick off a live chat. (like we do here.)

By default, 3CX doesn’t offer a simple one-line shortcut to do this. But it is absolutely doable and this guide walks you through exactly how to set it up, step by step.

What You’ll Need

A WordPress website with the 3CX Live Chat plugin installed and working
Access to your theme’s header/footer injection area (a plugin like Insert Headers and Footers works perfectly, or Divi’s Integration tab if you use Divi)
The ability to edit your page with a page builder (Divi, Elementor, or similar) or directly in HTML

No coding experience required. We’ve tried our best to make this as simple as possible – you’ll mostly be copying and pasting.

How the 3CX Widget Works (The Short Version)

When the 3CX plugin loads on your page, it injects a custom web component called <call-us-selector>. Inside that element, buried two levels deep in something called a Shadow DOM (a self-contained chunk of HTML that browsers use to isolate widget code), sits the actual chat button with the ID wplc-chat-button.

To open the widget programmatically, we need to reach into that nested structure and simulate a click on that button. That’s exactly what the JavaScript below does.

Step-By-Step Process:

Step 1: Add an ID to Your Trigger Button

Whatever element you want users to click — a Divi Blurb module, an Elementor button, a plain HTML link — needs a CSS ID so the script can find it.
In Divi:
Open the module settings → go to the Advanced tab → find the CSS ID & Classes section → enter launch-chat in the CSS ID field.
In Elementor:
Open the widget settings → go to the Advanced tab → find CSS ID → enter launch-chat.
In plain HTML:

<a href="#" id="launch-chat">Chat with us</a>

Note: Make sure any existing link URL on the button is cleared or removed. The script handles the click — you don’t want a URL accidentally firing at the same time.

Step 2: Add the JavaScript to Your Site

This script does two things: it defines a function that opens the chat widget, and it binds that function to your button once the page has loaded.

<script>
function openChatWidget(attempt = 1) {
  const widget = document.querySelector('call-us-selector')
    ?.shadowRoot?.querySelector('call-us')
    ?.shadowRoot?.getElementById('wplc-chat-button');

  if (widget) {
    widget.click();
  } else if (attempt < 20) {
    // Widget may still be loading — retry up to 20 times
    setTimeout(() => openChatWidget(attempt + 1), 500);
  } else {
    console.warn('3CX widget did not load in time.');
  }
}

document.addEventListener('DOMContentLoaded', function () {
  const trigger = document.getElementById('launch-chat');
  if (trigger) {
    trigger.style.cursor = 'pointer';
    trigger.addEventListener('click', function (e) {
      e.preventDefault();
      openChatWidget();
    });
  }
});
</script>

Where to paste it:

In Insert Headers and Footers plugin:

Paste into the Scripts in Footer section

In Divi:

Go to Divi → Theme Options → Integration tab → paste into the “Add code to the ” field

In Elementor:

Use a Custom Code widget or the Theme Builder footer

Step 3: Save, Clear Cache, and Test

Save your changes

Clear any caching plugin (WP Rocket, W3 Total Cache, LiteSpeed, etc.)

Open your homepage in a fresh browser window

Click your button. The 3CX chat window should open! Hoo-ray!

Troubleshooting

If it doesn’t work on the first try, here are the most common issues:

The widget doesn’t open and nothing happens:

Open your browser’s developer console (press F12, then click the Console tab). Type typeof openChatWidget and press Enter. If it returns "undefined", the script isn’t loading — double-check where you pasted it and that the page cache has been cleared.

Console shows “3CX widget did not load in time”:

The script ran before 3CX finished loading. Try increasing the retry limit in the script from attempt < 20 to attempt < 40, which gives the widget more time.

The button click does nothing at all:

Type document.getElementById('launch-chat') in the console. If it returns null, the CSS ID wasn’t saved correctly on your module. Go back to your page builder and confirm the ID is set to exactly launch-chat with no spaces or capital letters.

You have a caching or CDN layer:

Make sure to purge both your WordPress cache plugin AND any CDN cache (Cloudflare, etc.) after making changes.

Why This Works (For the Curious)

The 3CX widget uses a two-level nested Shadow DOM:

<call-us-selector>
  └── shadow root
       └── <call-us>
            └── shadow root
                 └── <button id="wplc-chat-button">  ← this is what we click

Standard JavaScript can’t reach inside a Shadow DOM with a normal getElementById or querySelector on the document. You have to traverse each shadow root explicitly, which is why the selector chain looks the way it does. The retry loop exists because the widget loads asynchronously — it might not be ready the instant the page fires its DOMContentLoaded event.

Summary

What to do Where

1. Add CSS ID launch-chat to your button Page builder → Advanced → CSS ID
2. Paste the <script> block Theme Options / Insert Headers and Footers (footer)
3. Clear cache Caching plugin + CDN
4. Test Click your button. Chat should open

That’s it. Once it’s working, any button, icon, or link on any page of your site can open the 3CX chat widget by simply giving it the launch-chat ID — the script will handle the rest.

Published by Fidalia Networks. Your telco without the telco headaches. 😉