Please ensure Javascript is enabled for purposes of website accessibility
Widgets
  • 08 Dec 2023
  • 4 Minutes to read
  • Dark
    Light
  • PDF

Widgets

  • Dark
    Light
  • PDF

Article Summary

The Widgets page lists all of the widgets you have created and allows you to create new ones. From here, you can also view REST API Endpoints for your widgets and example cURL requests. You can preview completed widgets on this page, or copy the code needed to embed your widgets into your website.

View the content below to learn more about each function on the Widgets page.

Add Widget

Quick Access: Scheduler > Widgets

The Add Widget button allows you to create a new widget and configure it at the same time. Use the following steps to create and configure a widget.

Click Add Widget to open the Create Scheduler Widget screen.

Screen capture of the Create Scheduler Widget page

  1. Name: Provide a unique name for your widget.
  2. Public Name: Provide a publically visible name for your widget. If you do not provide a name, the name from Step 1 will be used as the publically displayed name.
  3. Description: Provide a description of the widget's purpose.
  4. Enable Digital Callback Widget: Only select this option if you are ready for Mindful Callback to start actively using your widget.
  5. Callback Type: Select either ASAP, Scheduled, or Both.
IMPORTANT
If you select Scheduled or Both for the Callback Type, then the Widget Scheduled Callbacks feature must be enabled for the Call Target assigned to the widget.
  1. Template: Select the template you would like to use as the basis for this new widget.
  2. Call Target: Select the Call Target you would like to assign to this new widget. Any callbacks requested by the widget will be handled by the selected Call Target.
  3. User Data Set (optional): Select a User Data Set to apply to the widget, if you have created one. If you do not intend to apply a custom User Data Set, proceed to the next step.
  4. Access Control Policy (optional): Select an Access Control Policy to apply to the widget, if you have created one. Otherwise, proceed to the next step.
  5. When finished, click Save.

Edit or Delete Widgets

Quick access: Scheduler > Widgets

You can edit or remove widgets directly from the Widgets tab.

To edit a widget, click the Edit icon in the appropriate row, then update any information as needed. All of the configurable settings that were available when creating the widget will be available to edit.

Click Save when you are finished.

To delete a Widget, click the Delete icon in the appropriate row.

Widget API Endpoints

Quick Access: Scheduler > Widgets > Your widget > API Endpoints icon

NOTE
For complete information, see the Widget API reference developer guide.

You can test the functionality of your widget in a command-line environment with the information in the API Endpoints modal window. Click the API Endpoints icon in the appropriate row to view this information for a particular widget. These endpoints can also be used to invoke the API to request callbacks directly in your own application. 

screenshot of the API Endpoints page

Use the following table as a guide to the information in this window.

FieldDescription
ParametersFor both the GET and POST requests, the Parameters fields list the parameters that can be passed along in an API request, including a definition of each parameter.
URLThe URL fields contain the unique endpoints that can be used to invoke the API via GET or POST requests.
ExampleThe Example field provides example code you can use to reach the API.

You can use the copy buttons to the right of each field to quickly copy the contents to your clipboard to paste them into your command-line environment.


API parameters

The available parameters that can be passed into a POST request are detailed on the API page. These parameters allow you to: 

  • request an ASAP callback. 
  • schedule a callback for a specific date and time.
  • attach user data.
  • specify a custom string for reporting purposes.

The GET request requires one parameter, time_zone, which is required in order to obtain the status of a widget.


Available code samples

The Snippet Type drop-down menu allows you to change the example code provided in the API Endpoints window. You can use the example code to test the API in a way that works for you or use it as a starting point in your development process. 

screenshot of the snippet type dropdown menu

Shell (selected by default) will provide an example cURL request to be used on a command line or API platform. Other options include:

  • Ruby
  • Node
  • PHP
  • Javascript

Embed Widgets

Quick access: Scheduler > Widgets > Your Widget > Embed icon

The Embed icon opens the Embed HTML modal window and allows you to preview your widget. The window also contains the HTML elements required for connecting the widget to your website. 

screenshot of the embed H.T.M.L. window

1. Widget Style

Select the Enable default theme and styling checkbox if you would like the system to add a link to a default stylesheet into the code in Box #2, to be included in the <head> element of your HTML code. If the checkbox is deselected, you will need to apply your own CSS styling in your code.

2. Embed tags in code

This section includes three HTML elements that must be copied into the HTML code of the website on which you plan to deploy the widget. Follow the instructions on the screen to place the three elements in the correct locations in your code.

3. Preview bookmarklet

This section includes a button labeled <Your Widget> Preview that will allow you to embed a preview of the widget directly within any webpage. This includes previewing the button on the webpage where the widget will eventually live. This allows you to preview the visuals and test functionality without any changes to your existing webpage.

Use the following steps to preview a widget.

  1. Click and drag the preview button to the bookmarks bar in your web browser. You should see a new bookmark saved with the name of your widget.
  2. Open any webpage, either locally or via the internet, on which you would like to preview the widget.
  3. Click the saved bookmark, then click anywhere on the webpage that you would like to place the preview.

You should see the widget preview loaded in the area of the webpage that you clicked. You can then interact with the widget to review its styling, functionality, and dialogue steps.


Was this article helpful?

What's Next
Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.