Widgets
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 a 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.
- Name: Provide a unique name for your widget.
- Public Name: Provide a publicly visible name for your widget. If you do not provide a name, the name from Step 1 will be used as the publicly displayed name.
- Description: Provide a description of the widget's purpose.
- Enable Digital Callback Widget: Only select this option if you are ready for Mindful Callback to start actively using your widget.
- 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.
Template: Select the template you would like to use as the basis for this new widget.
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.
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.
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.
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
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.
Use the following table as a guide to the information in this window.
| Field | Description |
|---|---|
| Parameters | For 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. |
| URL | The URL fields contain the unique endpoints that can be used to invoke the API via GET or POST requests. |
| Example | The 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.
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.
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.
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.
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.
- 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.
- Open any webpage, either locally or via the internet, on which you would like to preview the widget.
- 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.
