Help desk software with unlimited agents starts at $99.  Learn More

simple support ticket system

separator-arrow-iconAdministration & Configuration

How to Launch a Help Widget on Button Click

Updated on : September 22, 2022

The widget can be customized to appear when a customer clicks a button or link on your website or a product.

To open the widget on external button or link,  put the following code example before the widget embed code:

<script>
             window.BolddeskWidgetConfig = {
                   created: (args) => {
                       // When the widget is rendered, the created event will be triggered.
                  }
            }
</script>

Bind onclick event for button or link, then call the widget API to open the popup BolddeskWidget(“open, “popup”).

Note: The function BolddeskWidget(“open, “popup”) will trigger the widget to show.

<button onclick=”openWidgetPopup()” type=”button”> Contact Us</button>

  <script>
           function openWidgetPopup() {
                BolddeskWidget(“open”, “popup”);
           }
</script>

<script>
             window.BolddeskWidgetConfig = {
                   created: (args) => {
                       // When the widget is rendered, the created event will be triggered.
                  }
            }
</script>  

The following properties can be found in the created event argument:

{
     type: widget | form,
      id: Widget Id | Web form Id,
      name: Widget Name | Web form Name
}

Note: You can predict the widget  rendered based on the ID and name of the fields if multiple widgets are rendered on the same page.

How to hide launcher button

Add the following code example and set the hideLauncher to true, to hide the widget when the page loads. By doing this, the launcher will not be shown, and a widget popup appears when an external button or link is clicked.

<script>
             window.BolddeskWidgetConfig = {
                             widget: {
                                           hideLauncher: true
                             },
                             created: (args) => {
                                           // When the widget is rendered, the created event will be triggered.                              }
              }
</script>  

Note: You can also call the BolddeskWidget(“hide, “launcher”) widget API to hide the launcher button

The sample page that shows a widget popup when an external button is clicked.

Widget Pop-up Page
Widget Pop-up Page

Was this article helpful?

    Live Chat Icon