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.

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

Frequently Asked Questions (FAQs)

1) How do I hide the default BoldChat launcher button?

Answer: Set isLauncherVisible to false in the window.boldChatSettings object to hide the default launcher and use your own custom button.

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

Result: The default chat launcher is hidden, so only your custom control will show.

2) How do I ensure the chat widget starts closed after a page reload?

Answer: Set maintainIsOpen to false in window.boldChatSettings.

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

Result: The widget stays closed when the page is reloaded, preventing auto‑open.

3) How can I create a custom button to open and close the chat widget?

Answer: Add a button in your HTML and implement a toggleWidgetPopup() function that uses the do:setIsOpen command to control visibility.

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

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

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

Result: Clicking the button toggles the chat widget open/closed.

4) What does the do:setIsOpen command do in BoldChat?

Answer: 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 || [];
  // Open the widget
  window.$boldChat.push(["do:setIsOpen", true]);
  // Close the widget
  window.$boldChat.push(["do:setIsOpen", false]);
</script>

Result: The widget opens or closes based on the boolean value provided.

5) Why do I need window.$boldChat and the isWidgetOpen variable?

Answer: window.$boldChat ensures the BoldChat command queue exists before sending commands. The isWidgetOpen variable tracks the widget’s current state so your custom button functions as a toggle.

<script>
  window.$boldChat = window.$boldChat || []; // Command queue for BoldChat
  let isWidgetOpen = false;                  // Tracks current widget state
  function toggleWidgetPopup() {
    window.$boldChat.push(["do:setIsOpen", !isWidgetOpen]);
    isWidgetOpen = !isWidgetOpen;
  }
</script>

Result: Commands are queued safely, and your toggle logic stays in sync with user clicks.

Related Article

Live Chat Widget JavaScript API Guide