Launching the Bold Chat Widget with an External Button

By default, the BoldChat 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.

Steps to Customize the BoldChat 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 chat launcher button, allowing you to use a custom button instead.
• maintainIsOpen: false – Ensures the 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 BoldChat array initializes

   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.

See also

• Live Chat Widget JavaScript API Guide