Embeddable Widget APIs

Embeddable Widget API allows you to customize the widgets. For example, you can hide the widget in certain pages or prefill some fields when your customer opens the Contact Form.

The following actions can be done using the widget APIs.

• Hide launcher button
• Show launcher button
• Open the widget
• Close the widget
• Prefill form fields
• Open an article
  
  

Hide launcher button

If you already have a launcher button/link for the help desk widget and you want to hide it, use the following API.

BolddeskWidget('hide', 'launcher')

Show launcher button

You can use the following APIs to show the hidden launcher button.

BolddeskWidget('show', 'launcher')

Open the widget

You can use the open API below to have the widget open when a customer clicks a link or button on your website.

BolddeskWidget('open', 'popup')

To learn how to open the widget pop-up on the external button/link, refer to this article.

Automatically open the widget

If you want to automatically open the widget when a customer visits your website, you can use the API below.

 window.BolddeskWidgetConfig = {
     created: (args) => {
       BolddeskWidget('open', 'popup');
     }
 }

Close the widget

If the widget is already open, use this API to close it.

BolddeskWidget('close', 'popup')

Prefill form fields

To fill out the form (such as name, email), use the prefill API. For dropdown options (single or multi-select), assign the provided ID as the value. For other fields, assign a string value.

BolddeskWidget (fill, form, {
  name: 'Daniel',
  emailId: 'daniel@afgc.inc',
  categoryId: 12,
  cf_country: 21,
  cf_state: 17
});

Open an article

You can use this API to open an article when customers click a link on your website. Make sure to include the article ID when using the API.

BolddeskWidget('open', 'article', {
 id: 123 // article ID
});

Onload customization

Add the following script above the embedded code to hide the launcher and pre-fill the form fields (such as name, email) when the page loads.

<script>
window.BolddeskWidgetConfig = {
   widget: {
       hideLauncher: true
   },
   form: {
       fill: { name: "Daniel", emailId: "'daniel@afgc.inc'", categoryId: 12 }
   },
   created: (args) => {
       // When the widget is rendered, the created event will be triggered.
   }
}
</script>

When a widget is rendered, the created event will be triggered. The following properties can be found in the created event argument.

{
     type: widget,
     id: Widget Id,
     name: Widget Name
}