Looking for something?

You will find your answers here!

    Sorry, we didn't find any relevant articles for you.

    Send us your queries using the form below and we will get back to you with a solution.

    vhtcx issue

    The Digital Callback widget is the preferred callback widget plugin for use with the Mindful Callback system. The Digital Callback widget can be used on your website to offer ASAP or scheduled callbacks, making the customer experience more convenient when using a web browser or mobile device.  

    The Callback system offers a wide range of customization options to fine tune your web widgets to look, feel, and function just the way you want. In this guide, we will walk through the process of setting up new widgets, testing them, and deploying them on your website or mobile application. 

    BEFORE YOU BEGIN

    Digital Callback widgets require a Callback Call Target to manage the callback requests. If you have not already set up a call target, see How do I set up a Call Target? before proceeding.


    IMPORTANT

    • This guide covers Digital Callback widgets only. For information on using pre-existing legacy widgets, see the deprecated Legacy widget tutorials article. For information on the configurable settings related to legacy widgets, see API & Applications and Interactions.
    • Digital Callback widgets are an optional feature of the Callback system. Please contact a VHT representative for more information on activating this feature for your Organization.

    Overview

    After briefly reviewing background information, this quick-start guide walks through the following steps to help you to quickly set up and deploy callback widgets.

    1. Create and configure a template
    2. (Optional) Create a User Data Set
    3. (Optional) Create an Access Control Policy
    4. Create and configure a widget
    5. Test and embed a widget
    6. (Optional) Use Intents to dynamically select widgets

    Background information

    The Digital Callback application provides a quick way for your organization's web developers to create and embed a Call Me widget on your web page. We recommend that your organization uses the Digital Callback application in a few common scenarios (also called use cases).

    First, take a quick look to see if our terminology is unfamiliar to you.

    Glossary

    • Access Control - In Digital Callback instances: creating a list of the IP addresses, associated with your web servers, that will be routing callback requests from your website to the Digital Callback application.
    • Access Control Policy (ACP) - An individual policy that ties a whitelist to a widget.
    • Rate limit - In the Digital Callback application: the system stops processing incoming requests from the same IP address when a quantity limit and time period limit are both met.
    • Template (also called Widget Template) - The callback request form that the customer sees on your website. Here is where you craft the customer experience.
    • Whitelist IPs - The IP addresses of your web servers, which will route callback requests to the Digital Callback application.
    • Widget - The web element that your customer interacts with in order to request a callback.
    • Widget configuration - The behaind-the-scenes configuration that you perform, so that Digital Callback and Mindful Callback can work together.

    Digital Callback use cases

    There are three basic use cases to leverage your integration with the Digital Callback platform:

    1. Call Me widget embedded on your web page
    2. REST API invoked from your application
    3. REST API invoked from your web server

    To learn more about each use case, expand any of the following content.

    Use case 1: Call Me widget embedded on your web page

    Our simplest callback handling solution is for your web developer to embed the Digital Callback Call Me widget, configured in the product, on your organization's website. Expand the following box to learn more. Your organization's web developer can embed a Digital Callback Call Me widget on your website, and callback requests will be directly sent to the Digital Callback application.


    How are callback requests handled?

    1. Your organization placed a Digital Callback widget on your website.
    2. Your customers request callbacks via the widget on your website.
    3. Callback requests are processed directly by the Digital Callback application, where the widget sends a request with a unique IP address/contact number to the application for processing.

    Rate Limit use case

    In this diagram, a customer/bot/hacker placed too many callback requests via the widget in quick succession. The Digital Callback application identified the incoming source by the requestor's IP address.

    What happens once the rate limit is met?

    Once the max number of requests within a defined timespan has been reached:

    • The individual placing the callback requests via your web widget will see an error message in the widget letting them know they've exceeded their maximum requests 
    • The Digital Callback application will prevent additional callback requests from being registered in the callback registration queue.

    Use case 2: REST API invoked from your application

    A less common solution is for your web development team to create a custom widget or application on your website for sending callback requests to the Digital Callback application. 

    Your organization's web developer can create a callback button on your website (using an API), and callback requests will be directly sent from your button to the Digital Callbackapplication.

    For more information on developing apps to invoke the REST API, see the Developer Guide in the Digital Callback documentation.


    How are callback requests typically handled?

    1. Your organization used an API to collect callback requests on your website.
    2. Your customers request callbacks via the button on your website.
    3. Callback requests are processed directly by the Digital Callback application, where the API sends a request with a unique IP address/contact number to the application for processing.

    Rate Limit use case

    In this diagram, a customer/bot/hacker placed too many callback requests via the widget in quick succession. The Digital Callback application identified the incoming source by the requestor's IP address.

    What happens once the rate limit is met?

    Once the max number of requests within a defined timespan has been reached:

    • The individual placing the callback requests via your web widget will see an error message in the widget letting them know they've exceeded their maximum requests.
    • The Digital Callback application will prevent additional callback requests from being registered in the callback registration queue.

    Use case 3: REST API invoked from your web server

    For added security, we recommend implementing the Digital Callback application so that your web server sits between your website (where your customer makes the request) and the Digital Callback application (where requests are processed). Expand the following box to learn how using a web server and our Access Control Policies can give you a more secure experience.

    Now that we have opened our API endpoints for web servers to access them, you can utilize Digital Callback handling on the back end for large scale call processing. Here's how the callback request flow will look:


    How are callback requests handled when made via API endpoints from a web server?

    1. Your organization implemented a way for your customers to request a callback via a digital channel. 
    2. Your customers request callbacks.
    3. Callback requests are proxied through your web server (your software can apply its own authentication), and your web server forwards the callback requests to the Digital Callback application via a POST request. 

    Won't rate limits cause a problem, since all the traffic is coming from one IP address?

    Here, an issue with the previously-instituted rate limits occurs, because the Digital Callback application receives ALL of your organization's callback requests from the same IP address. This level of traffic will trigger the rate limits, even though the requests are legitimate and should be registered.

    This is where Access Control comes in

    Access Control Policies (ACPs) allow you to identify an IP address whitelist -- either individual IP addresses or a range of IP addresses -- and apply that whitelist to a specific widget and its associated API endpoints. This will then permit all requests coming from the whitelisted IP addresses to be registered in the Digital Callback application. 

    NOTE

    Different widgets on your site can use different whitelists. You are not limited to a single whitelist.

    What extra security is there if I use an ACP?

    This feature introduces a security feature by only allowing traffic from identified IP addresses. Incoming traffic to the Digital Callback application (via that specific API endpoint) from all other IP addresses is blocked.


    Step 1: Create and configure a template

    Before creating a widget, you must first configure a template to apply to the widget. Templates control the visual presentation and formatting of the widgets to which they are applied. Storing such visual configuration in templates, outside of the widgets themselves, allows you to store sets of configured options to apply to several widgets at once.

    Expand the content below for a step-by-step guide to creating and configuring a new widget template.

    Try it: Create a new template

    Quick access: Digital Callback > Templates tab

    1. To create a new template with the default configuration, click Add New Template, or... 
    2. To begin by using an existing template's configuration to create a new one, find the template you wish to copy, then click Clone
    3. If you have created a new template rather than cloning, enter a name and description in the fields provided, then click Save template.
    4. Locate your new template on the Templates tab, then click Edit in its row to open the Edit Digital Callback Template screen.
    5. Edit the information in each of the following tabs on the Edit Digital Callback Template screen, or click the links to learn more about each tab.
    1. Details: Set the internal name and description of your template.
    2. HTML: Customize the HTML code used to display buttons and text.
    3. Callback Form: Customize the options and inputs provided to customers to help them request a callback.
    4. API Message: Edit the default API responses that the template uses to communicate with your customers. 
    5. Date/Time Format: Customize the way that dates and times are presented.
    6. EWT Format: Customize the way that the Estimated Wait Time is presented.
    7. Error Messages: Customize various error messages displayed to customers in specific scenarios.

    IMPORTANT

    Widget template configuration tabs cannot be edited if the saved Digital Callback template is currently in use.


    Step 2: (Optional) Create a User Data Set

    User Data Sets allow you to define a set of key-value pairs (KVPs) that can be sent by a Digital Callback widget to the Callback application. 

    A User Data Set allows Callback to receive data, but you must still configure a Metadata item for your Call Target in order to pass the data on to the call center. For more information on configuring Metadata items, see How do I work with user data and metadata?

    Try it: Create a User Data Set

    Quick Access: Digital Callback > User Data Sets

    1. Click + Add New User Data Set to open the Create Digital Callback User Data screen.

    2. Name (required): Enter a name to identify the User Data Set.

    3. Description: Enter a description to define the purpose of the User Data Set.

    4. Click + Add New Key to add the first key representing a user data KVP.

    5. In the window that appears, enter a Key Name for the KVP. This name must precisely match the KVP that will be received by the widget.

    6. Enter a value in the Default Value field, if applicable. This value will be assigned to the KVP if no value is received.

    7. If you wish to replace any value that is submitted for this KVP with the  specified default value, enable the Replace Value from widget with Default Value checkbox.

    8. Click Save to save the User Data Key, then repeat steps 4 - 6 for all remaining keys you wish to define for the User Data Set.

    You can return to any previously created User Data Set to make updates, as well.

    Try it: Edit or Delete a User Data Set

    Quick Access: Digital Callback > User Data Sets

    Edit a User Data Set

    1. To edit a User Data Set, click Edit in the row corresponding to any existing set.

    2. Update the Name and Description fields as needed.

    3. Click Edit on any row in the User Data Set Keys table to update the Key Name and Default Value fields as needed, then click Save in the edit window.

    4. Click Save Changes on the Edit Digital Callback User Data screen to save all the changes you made to the User Data Set.

    Delete a User Data Set

    To delete a User Data Set, click Delete in the row corresponding to any existing set.


    Step 3: (Optional) Create an Access Control Policy

    Use Access Control Policies with your callback widgets when all of your callback request traffic will be routed through your own web server or servers. This creates a secure environment where all traffic coming from your approved IP addresses is safely passed through the Digital Callback widget for processing, and any traffic not on your whitelist is blocked. An additional benefit of the Access Control Policy is that it allows you to bypass callback request rate limits for traffic coming from a single IP address.

    New Access Control Policies can be created in two different ways. You can choose to start fresh with a new, empty policy, or clone an existing policy to start with an existing list of whitelisted IP addresses. If you choose to clone an existing Access Control Policy, you can then add or remove IP addresses from the new policy as needed to fit its intended purpose.

    Try it: Create an Access Control Policy

    Quick Access: Digital Callback > Access Control Policies

    1. To create a new Access Control Policy with nothing configured, click Add New Access Control Policy, or...
    2. To use an existing Access Control Policy as a template for the new one, click Clone in the row corresponding to the policy that you wish to clone. 
    3. Enter a unique name for the new policy in the Name field.
    4. (Optional) Enter a description to further identify the new policy in the Description field.
    5. If you are cloning an existing Access Control Policy, click Save, then click Edit on the new row associated with the policy to continue.
    6. Click Add New Address to add an IP address to the whitelist.
    7. In the Add Whitelisted IP Address to Access Control Policy modal window, enter the IP address in the Address field. If you wish to use the IP address of the server you are using to access the Callback user interface, you can click Use my IP address to automatically populate it in this field.

    TIP

    To add a range of IP addresses, follow CIDR notation:

    For example, you want to use IP addresses 1.1.1.0 to 1.1.1.255 -- this would be entered into the Address field as 1.1.1.0/24

    Also, /24 is the largest block size that is allowed.

    1. (Optional) Enter descriptive text to identify the server in the Description field.
    2. Click Save to return
    3. Repeat Steps 6-9 for any additional IP addresses you would like to add to the new Access Control Policy, then save your changes.

    You can return to any previously created Access Control Policy to make updates, as well.

    Try it: Edit or delete an Access Control Policy

    Quick Access: Digital Callback > Access Control Policies

    Edit an Access Control Policy

    1. To edit an Access Control Policy, click Edit in the row corresponding to any existing entry.

    2. Update the Name and Description fields as needed.

    3. Click Edit on any row in the Access Control Policy Whitelisted IP Addresses table to update the Address and Description fields as needed, then click Save in the edit window.

    4. To remove an IP address from the policy, click Delete in the appropriate row.

    5. Click Add New Address to add more IP addresses to the policy.

    6. To remove an Access Control Policy entirely, click Delete Access Control Policy.

    7. Click Save Changes on the Edit Digital Callback Access Control Policy screen to save your changes.

    Delete an Access Control Policy

    To delete an Access Control Policy, click Delete in the row corresponding to any existing set.

    Assign API Access Tokens to your Access Control Policy (ACP) for additional functionality. Learn more here.


    Step 4: Create and configure a widget

    With your template complete, you can now proceed to set up a new Digital Callback widget. 

    Choose your callback type

    Decide if you want to offer ASAP callbacks, scheduled callbacks, or both types of callback options.

    Important

    If you choose to offer scheduled callbacks in your widget, make sure your Call Target has that option selected. 

    Not sure if your Call Target offers scheduled callbacks via a widget? Here's the path for checking on it: 

    Mindful Callback application > Call Target (in the sidebar menu) > General tab > Callback Scheduling Settings section > Widget Scheduled Callbacks

    Pop-up vs. inline web widgets

    Try it: Create an inline widget

    What does an inline widget look like to your customers? The inline form will look like it is a part of your web page. In this example, you can see a teal-colored inline callback request widget placed into a sample web page layout.



     

    Try it: Create a pop-up widget

    What does a pop-up widget look like to your customers? On your website, you'll have a button that says something like "Request a callback" or "Call me". When your customer clicks that button, a pop-up window will appear on-screen that contains details and prompts for registering a callback request.

    NOTE

    While this may be called a pop-up widget, it is not the same as a pop-up ad. Customer pop-up ad blockers in their browser will not block a pop-up callback widget.


    Quick Access: Digital Callback > Widgets

     


    Once you save your widget, you have the option to:

    • Edit (Edit button) portions of the widget settings
    • Test (API Endpoints button) your widget’s functionality
    • Preview (Embed button) your widget in a live website
    • Delete (Delete button) the widget entirely

    View API Endpoints and parameters

    Quick Access: Digital Callback > Widgets > API Endpoints

    You can test the functionality of your widget in a command-line environment with the information in the API Endpoints modal window. Click API Endpoints 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.  

    To learn more about using the API endpoints and parameters, see API Endpoints in the Reference section.


    Step 5: Test and embed a widget

    Quick Access: Digital Callback > Widgets > Embed

    The Embed button 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 or another web asset. 


    Step 6: (Optional) Use Intents to dynamically select widgets

    Digital Callback Intents allow you to create interactive dialogues to determine a customer's needs before offering a callback via web widget.

    You can use Intents to ask a series of questions that will determine which widget to use to request a callback. Customers can interact with an Intents dialogue in a single place, and they will be able to register a callback on different Call Targets based on their responses.

    Click for instructions on adding Intents




    Was this article helpful?

    Still can't find what you are looking for?

    Our award-winning customer care team is here for you.

    Contact Support

    Powered by