How to Launch the Live Chat Widget with an External Button

By default, the live chat widget displays a launcher button that users click to open the chat. To hide this default launcher button and use a custom button instead, follow the steps below. This approach gives you greater control over the chat widget’s visibility and enhances the user experience.

Use Cases

Replace the default chat icon with a custom button.
Open chat from key pages like sales, support, or checkout.
Match the chat launcher to your website branding.
Keep the widget hidden until customers need it.
Improve website design with a cleaner, less cluttered interface.
Control chat visibility and behaviour using custom code.

Steps to Customize the Live Chat Widget Launcher

Follow the steps below to customize the live chat widget launcher;

1. Hide the Default Chat Launcher Button

To hide the default launcher button on your website, modify the widget settings in the window.boldChatSettings object.

<script>
  window.boldChatSettings = {
     maintainIsOpen: false,  // Ensures the widget starts closed on page reload
     isLauncherVisible: false  // Hides the default launcher button
  };
</script>

isLauncherVisible: false – Hides the default live chat launcher button, allowing you to use a custom button instead.
maintainIsOpen: false – Ensures the live chat widget remains closed when the page reloads.

2. Create and Use a Custom Launcher

To control the widget using a custom button, use the do:setIsOpen method to toggle the chat widget’s visibility.

HTML for the Custom Launcher Button

<button id="chatButton" onclick="toggleWidgetPopup()">Chat With Us</button>

JavaScript to Control the Widget

<script>
   window.$boldChat = window.$boldChat || [];  // Ensure the BoldChat array is initialized globally

   let isWidgetOpen = false;  // Tracks whether the widget is open or closed

   function toggleWidgetPopup() {
         window.$boldChat.push(["do:setIsOpen", !isWidgetOpen]);  // Toggle widget state
         isWidgetOpen = !isWidgetOpen;  // Update the tracking variable
   }
</script>

toggleWidgetPopup() – Toggles the chat widget’s visibility when the custom button is clicked.
do:setIsOpen – Controls the widget’s state (true to open, false to close).
isWidgetOpen – Tracks whether the widget is open, ensuring the button functions as a toggle.

<script>
  window.boldChatSettings = {
    maintainIsOpen: false,  // Widget remains closed on reload
    isLauncherVisible: false
  };
</script>

Permission

To configure the launch of the Live Chat Widget using an External Button, you must have the Manage Settings permission enabled in the admin module.

Troubleshooting

The default launcher is still visible
- Confirm the page contains isLauncherVisible: false inside window.boldChatSettings.
- Confirm the script block that sets window.boldChatSettings runs on the same pages where the widget is loaded.
The custom button does nothing
- Confirm window.$boldChat = window.$boldChat || []; is defined in the global scope before calling push().
- Confirm the button’s onclick="toggleWidgetPopup()" matches the function name.
Widget opens but does not toggle correctly
- Confirm the isWidgetOpen variable is not being reset unexpectedly (for example, by reloading the script or re-rendering the page).
- If the widget can also be opened/closed by other UI actions, the isWidgetOpen variable may become out of sync because it only tracks clicks on the custom button.

Frequently Asked Questions

How do I hide the default live chat launcher button?
Set isLauncherVisible to false in the window.boldChatSettings object to hide the default launcher and use your own custom button. The default chat launcher is hidden, so only your custom control will display.
```
<script>
  window.boldChatSettings = {
    maintainIsOpen: false,  // Ensures the widget starts closed on page reload
    isLauncherVisible: false // Hides the default launcher button
  };
</script>
```
How do I ensure the chat widget starts closed after a page reload?
Set maintainIsOpen to false in window.boldChatSettings. The widget stays closed when the page is reloaded, preventing auto‑open.
```
<script>
  window.boldChatSettings = {
    maintainIsOpen: false,  // Widget remains closed on reload
    isLauncherVisible: false
  };
</script>
```

How can I create a custom button to open and close the chat widget?
Add a button in your HTML and implement a toggleWidgetPopup() function that uses the do:setIsOpen command to control visibility. Clicking the button toggles the chat widget open/closed.

<button id="chatButton" onclick="toggleWidgetPopup()">Chat With Us</button>

<script>
  window.$boldChat = window.$boldChat || [];  // Ensure the BoldChat array is initialized globally
  let isWidgetOpen = false;                   // Track open/closed state

  function toggleWidgetPopup() {
    window.$boldChat.push(["do:setIsOpen", !isWidgetOpen]); // Toggle widget state
    isWidgetOpen = !isWidgetOpen;                           // Update state tracker
  }
</script>

What does the do:setIsOpen command do in live chat?
do:setIsOpen controls the chat widget’s state:

true → open the widget
false → close the widget
Use it by pushing a command to the $boldChat array.

<script>
  window.$boldChat = window.$boldChat || []; // Ensure the BoldChat array is initialized globally.
  // Open the widget
  window.$boldChat.push(["do:setIsOpen", true]);
  // Close the widget
  window.$boldChat.push(["do:setIsOpen", false]);
</script>

Why do I need window.$boldChat and the isWidgetOpen variable?
window.$boldChat ensures the live chat command queue exists before sending commands. The isWidgetOpen variable tracks the widget’s current state so your custom button functions as a toggle. Commands are queued safely, and your toggle logic stays in sync with user clicks.
```
<script>
  window.$boldChat = window.$boldChat || []; // Ensure the BoldChat array is initialized globally.
  let isWidgetOpen = false;                  // Tracks current widget state
  function toggleWidgetPopup() {
    window.$boldChat.push(["do:setIsOpen", !isWidgetOpen]);
    isWidgetOpen = !isWidgetOpen;
  }
</script>
```

Was this article useful?

Dislike

Comments (0)