Articles in this section
Category / Section

Embeddable Widget APIs

Published:

The Embeddable Widget APIs allow 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 a article

Hide Launcher Button

If you already have a button or link on your website that should launch the Help Widget, and you want to hide the Launcher button for the widget, use the API listed below.

BolddeskWidget('hide', 'launcher')

Show Launcher Button

You can use the APIs listed below to show the Launcher button that is hidden.

BolddeskWidget('show', 'launcher')

Open the Widget

You can use the Open API if you want the widget to open when a customer clicks a link or button on your website.

BolddeskWidget('open', 'popup')

To know how to open the widget pop-up on the external button/link click, please refer to this article:
How to Launch a Help Widget on Button Click

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, simply use the Prefill API. For dropdown type (single or multi-select), assign the id as the value. For other fields, simply assign a string value.

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

Open a article

You can use this API to open a article when your customers click on a link on your website. When using this API, you need to provide the article ID.

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 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
}

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied