The VHT Callback® cloud application lets you offer more contact options to your customers. You can create a button (or web widget) for your website that offers your customers an ASAP or scheduled callback. These widgets can collect a customer’s metadata, and that information can be whispered to your call center agent before they take the customer’s call. Customers can also view their callback status when they return to your web page because the web widget places a cookie in the customer’s browser as they register their call.

Callback widget creation workflow

The API & Applications screen contains three tabs: Applications, API Keys, and reCAPTCHA Keys. Creating a web widget (also called an Application) is a multi-step workflow that requires information on the tabs, from right to left.

Workflow menu

  1. Optional – Add a reCAPTCHA key to the system to prevent bots from signing up for callbacks. If adding a reCAPTCHA key, perform this step first.
  2. Add an API key to allow the VHT Callback cloud system to interact with your call center.
  3. Configure your widget, or application, and generate the widget script for use in your website.
  4. Apply your widget to your website.

Then, follow the Additional tutorials to customize your widget and manage your keys.

1. reCAPTCHA Keys

Adding a reCAPTCHA key to your widget

You can add reCAPTCHA functionality to your widget in order to prevent bots from signing up for callbacks via your widget. Once the reCAPTCHA key has been added your VHT Callback cloud instance, it becomes available for use in widget setup.

BEFORE YOU BEGIN:

  • This workflow section is optional. If you do not plan to use a reCAPTCHA key, skip ahead to API Keys.
  • If you plan to incorporate reCAPTCHA functionality in your widget, follow this tutorial first before proceeding to API Keys.
  • If you do not already have a set of public and private reCAPTCHA keys, visit the Google reCAPTCHA site for signup information. Using reCAPTCHA requires a Google account.

Step 1: Select API & Applications from the side navigation menu.
Step 2: Select the Recaptcha Keys tab.
Step 3: Click +Add Recaptcha Key.
Step 4: Identifier – Add a descriptive name to identify the reCAPTCHA key.
Step 5: Public Site Key – Enter the public version of your reCAPTCHA key, also called your Site Key.
Step 6: Private Key – Enter the private version of your reCAPTCHA key, also called your Secret Key.
Step 7: Click Save to apply the reCAPTCHA key to the system.

IMPORTANT: Expect an approximately 30-minute delay for domain registration before you can actively use the reCAPTCHA key. Google requires this time to confirm that your domain is associated with your unique reCAPTCHA key.

2. API Keys

Adding an API key to your widget

The VHT Callback cloud application uses API keys to communicate with the web widget.

BEFORE YOU BEGIN:
Identify all of the web pages that will contain the widget. You will need the URLs for this workflow section.

Step 1: While still on the API & Applications screen, click the API Keys tab.
Step 2: Click +Add API Key.
Step 3: Identifier – Add a descriptive name to identify the API key.
Step 4: Host – Enter all URLs where the widget will be placed. If the widget will be placed on more than one host, separate the URLs with a comma.
Step 5: Allow Local (optional) – Select this option if you plan to test the widget locally.

IMPORTANT: Disable Allow Local after testing is done. Do this to protect your web widget from people who want to copy the code off of your website, and imitate your widget.

Step 6: Key – This field will be automatically populated once you save the API key configuration.
Step 7: Recaptcha Key (optional) – Select your reCAPTCHA key from the dropdown list.
Step 8: Click Save to apply the configurations and create your API key.

NOTE: Any URL listed in the Host field will be whitelisted in the VHT Callback cloud application.

3. Applications

Configuring the widget for your website

Step 1: On the API & Applications screen, click the Applications tab.
Step 2: Choose Interaction or Call Target.

An interaction is an interactive dialog between your call center and a customer. You can display interactions on your website through a widget, or by using SMS technology. A typical interaction setup would start with an opening question, followed by a few response options. If the user chooses one of those options, they receive a next step or take a predetermined action.

BEFORE YOU BEGIN
Configure your interaction.

Step 3: Choose an Interaction or Call Target – Click on the Interaction option. Select the name of your interaction from the dropdown list.
Step 4: Choose an ApiKey – Select an API key from the dropdown list.
Step 5: Choose a Style – Select  from the Modal (a pop-up dialogue box) or Inline (part of the text on your website) style formats.
Step 6: Choose a Theme – Select from Default or Custom. Custom allows your web admin to supply the widget styling.
Step 7: Show all Steps (optional) – if you want to reveal every step of the interaction to the customer.
Step 8: Prompt for phone number first (optional) – if you want to have the customer type their phone number at the very beginning of the interaction.
Step 9: Show preview of ECBT (optional) – If you want the widget to display the estimated callback time.
Step 10: Auto refresh callback time (optional) – If you want the widget to refresh the callback time as it changes.
Step 11: Phone Number Validation (optional) – Select Enforce Phone Number Length.

NOTE: This setting checks that any entered phone numbers contain the correct number of digits, so that callbacks can be made.

Step 12: If you selected Enforce Phone Number Length, the Minimum Callback Number Length field appears. The default value is 1 digit. Set this value to the fewest phone number digits that are valid in your region.
Step 13: If you selected Enforce Phone Number Length, the Maximum Callback Number Length field appears. The default value is 11 digits. Set this value to the most phone number digits that are valid in your region.
Step 14: Generate Script – Click Show Widget Code to generate your widget’s script.

A call target is a destination where callback requests are sent to be processed. They also represent a holding queue associated with a contact center.

BEFORE YOU BEGIN

  • Configure your call target.
  • If you configured your call target to collect metadata, the widget will contain a field to collect that information.

Step 3: Choose an Interaction or Call Target – Click on the Call Target option.Select the name of your call target from the dropdown list.
Step 4: Choose an ApiKey – Select an API key from the dropdown list.
Step 5: Choose a Style – Select  from the Modal (a pop-up dialogue box) or Inline (part of the text on your website) style formats.
Step 6: Choose a Theme – Select from Default or Custom. Custom allows your web admin to supply the widget styling.
Step 7: Show all Steps (optional) – if you want to reveal every step of the interaction to the customer.
Step 8: Prompt for phone number first (optional) – if you want to have the customer type their phone number at the very beginning of the interaction.
Step 9: Show preview of ECBT (optional) – If you want the widget to display the estimated callback time.
Step 10: Auto refresh callback time (optional) – If you want the widget to refresh the callback time as it changes.
Step 11: Phone Number Validation (optional) – Select Enforce Phone Number Length.

NOTE: This setting checks that any entered phone numbers contain the correct number of digits, so that callbacks can be made.

Step 12: If you selected Enforce Phone Number Length, the Minimum Callback Number Length field appears. The default value is 1 digit. Set this value to the fewest phone number digits that are valid in your region.
Step 13: If you selected Enforce Phone Number Length, the Maximum Callback Number Length field appears. The default value is 11 digits. Set this value to the most phone number digits that are valid in your region.
Step 14: Generate Script – Click Show Widget Code to generate your widget’s script.

NOTES: If collecting metadata through the widget, the associated call target must be set to require the data-metadata-NAME=”” attribute. This JavaScript attribute allows your website to send customer metadata to the VHT Callback cloud platform along with the callback request. The customer metadata is associated with the callback, and the information is whispered to the agent when they take the customer’s call.

4. Apply the widget to your website

Integrate the widget code with your website code

Step 1: Click Display on this page to test the widget on the configuration screen.
Step 2: (Optional) Click Change Settings to adjust your widget settings (follow the preceding widget workflow tutorials).
Step 3: Copy the generated JavaScript code, and paste it into your site’s HTML.

Additional tutorials

reCAPTCHA key tutorials

How do I edit an existing reCAPTCHA key?

BEFORE YOU BEGIN
On the API Keys tab, check if your reCAPTCHA key is currently in use. If the key is in use, follow the API key tutorials > How do I edit an API key? tutorial to change the API key selection before following this tutorial.

IMPORTANT: Editing or deleting an existing reCAPTCHA key in the VHT Callback cloud system may cause widget errors. Check your API keys to see if the reCAPTCHA key you plan to edit or delete is in use.

Step 1: Select API & Applications from the side navigation menu.
Step 2: Select the Recaptcha Keys tab.
Step 3: Identify the reCAPTCHA key you want to edit and click Edit.
Step 4: The IdentifierPublic Site Key, and Private Key fields may be updated.
Step 5: When finished editing, click Save to apply your changes.

How do I delete a reCAPTCHA key?

IMPORTANT: Editing or deleting an existing reCAPTCHA key in the VHT Callback cloud system may cause widget errors. Check your API keys to see if the reCAPTCHA key you plan to edit or delete is in use.

Step 1: Select API & Applications from the side navigation menu.
Step 2: Select the Recaptcha Keys tab.
Step 3: Identify the reCAPTCHA key you want to remove and click Delete.
Step 4: When prompted to confirm that you want to delete the reCAPTCHA key, click Delete Recaptcha Key.

API key tutorials

How do I edit an API key?

Step 1: Select API & Applications from the side navigation menu.
Step 2: Select the API Keys tab.
Step 3: Click Edit next to the API key you want to update.
Step 4: The following fields may be edited:

  • Identifier – Change the human-readable name used within the VHT Callback cloud system.
  • Hosts – Add, edit, or remove domains where the web widget appears.
  • Allow Local – Change whether or not you want the API key to be available for local website testing.
  • Recaptcha Key – Change your reCAPTCHA key selection, or set the API key so that it does not use a reCAPTCHA key (NO RECAPTCHA option).

Step 5: Click Save to apply your changes to the system.

How do I delete an API key?

BEFORE YOU BEGIN
On the Applications tab, check if your API key is currently in use. If the key is in use, follow the Applications tutorial > How do I edit my web widget? tutorial on selecting another API key before following this tutorial.

Step 1: Select API & Applications from the side navigation menu.
Step 2: Select the API Keys tab.
Step 3: Identify the API key you want to delete and click Delete.
Step 4: When prompted, click Delete API Key to confirm the key deletion.

Customization tutorials

How do I edit my web widget (application)?

Once you generate an application (web widget) script in the VHT Callback cloud system, you can make changes to the phone number placeholder (data-phone-number-placeholder), minimum and maximum number of required digits in a phone number, an error message for invalid phone numbers, and the country code being used. Here are some ways you can edit the script:

  • While your generated script is still on screen, click the Change Settings button, and follow the Application tutorial steps to change your applications configuration.
  • While your generated script is still on screen, manually edit the script in the Generated Script field.
  • Copy your generated script to a local text editor, and make edits manually.
  • Paste your generated script into your site’s HTML, and make edits manually.
  • Generate a new script by following the full widget creation workflow.
IMPORTANT: The VHT Callback cloud system does not store generated scripts for future use.

How do I allow users to schedule a callback via the web widget?

BEFORE YOU BEGIN:

  • If you want to allow customers to select a  scheduled callback, in addition to the option for an ASAP callback, you need to configure your widget’s call target to allow scheduled callbacks.

Step 1: Select Call Targets from the side navigation menu.
Step 2: In the call target list, select the call target that is associated with your web widget.
Step 3: On the Call Targets > General tab, find the Registration Settings section.
Step 4: Select the Schedule Callbacks option to allow your web widget users to schedule a callback.
Step 5: When finished, scroll to the page header, and click Save Changes. Then click Publish to apply your changes to the system.

IMPORTANT: If your call target does not currently allow scheduled callbacks, follow the instructions for configuring a scheduled callback.

How do I replace the default English text displayed in my widget?

Once you generate your widget (application) script, you can customize the text that displays to the user on-screen. Incorporate translations, or replace the default text with verbiage that aligns with your company’s messaging. This can be done while you are still in the Generate Script field, or after you have pasted the generated script into your website.

To edit the text:
The English text found between two quote marks (" … “) can be replaced with translations or customized verbiage. The following table contains the sections of widget script that can be edited.

To add lines to the script:
Within the script tags, in any order, enter the Script label from the table, an equals sign without spaces, and your desired text in quote marks. Use the format shown in the following example.

EXAMPLE:
data-language-estimated-callback-time="Your estimated callback time is"

Available for all widgets

Available for widgets offering scheduled callbacks

How do I add an error message for when callbacks are unavailable?

If callbacks are unavailable, adding the onerror script to your website lets you display an error message. The default message is:

Callbacks are currently unavailable at this time

If desired, you can translate the error message, or edit it to align with your website’s verbiage. See the following example.

IMPORTANT: Place the error message script directly within the HTML code of your website, anyplace within the body tags.
EXAMPLE:

onerror="document.write('Place your custom text here.')"
IMPORTANT: To test the error messaging on your widget, add the following statement within the script tag. It is vital that you remove this statement before publishing your widget on your live site.

src="http://httpstat.us/500"

This src statement forces the widget to see the callback service as non-responsive, and will display your error message.

How do I manually customize dial settings for a widget offering callbacks in non-U.S. regions?

Change your widget’s dial settings manually if you are not using North American phone number dialing standards.

Once you generate your widget (application) script, you can make changes to the phone number placeholder, minimum and maximum number of digits required in a phone number, the country code being used, and an invalid phone number error message. This text can be edited while you are in the Generate Script field, or within your website’s code.

To add lines to the generated script:
Within the script tags, in any order, enter the Script label from the table, an equals sign without spaces, and your desired text in quote marks. Use the format shown in the following example.

EXAMPLE:
data-minimum-phone-length="8"