How do I Add an API Key to an Interaction?

Add API Keys

The VHT Callback® cloud instance uses API keys to authorize communication between a call me application (widget) and the VHT Callback cloud solution. Adding API keys is the first step in creating a widget.  Perform the following steps to add an API key:

Step 1: Select API & Applications from the side navigation menu.
Step 2: Click the API Keys tab.
Step 3: Click +Add API Key.
Step 4: Add a name to identify the API key.
Step 5: Add the Host (website) of where the widget will be placed. If the widget will be placed on more than one host, separate them with a comma.

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

Step 6: To test your widget locally, click the Allow Local option.

BEST PRACTICE: Allow local should be selected for testing purposes only. When your widget is "live", be sure to go back and disable this option. This protects your widget from being duplicated and used by a third party to create callbacks at your call target.

Step 7: Click Save to create your system generated API key.

How do I Edit an API Key?

Edit API Keys

Perform the following steps to edit an API key:

Step 1: Select API & Applications from the side navigation menu.
Step 2: Click the API Keys tab.
Step 3: Click Edit next to the key being updated.
Step 4: Make the necessary changes.
Step 5: Click Save.

How do I Delete an API Key?

Delete API Keys

Perform the following steps to delete an API key:

Step 1: Select API & Applications from the side navigation menu.
Step 2: Click the API Keys tab.
Step 3: Click Delete next to the key being removed.
Step 4: Click Save.

How do I add a call me widget to a website?

Creating Widgets

Perform the following steps to create a widget:

Step 1: Select API & Applications from the side navigation menu.
Step 2: Click the Applications tab.
Step 3: Complete the following fields:

  • Choose a Target Type- Choose between an interaction or call target.
  • Choose an APIKey- This will provide you with a list of already created API Keys.
  • Choose a Style- There are two style options to choose from, they are (1) Modal- a popup widget, or (2) Inline- places the widget wherever the tag is located. If modal is selected, you will need to also enter a modal title and a name to your popup button in the additional spaces that appear.
  • Choose a Theme- Determine how your widget will display on the page. You can choose a default (uses the VHT Callback cloud styling) or a custom (you provide the style) theme.

Step 4: Complete the following options fields as needed:

  • Show all Steps (Interaction only) – if you want to reveal every step of the interaction to the customer.
  • Prompt for phone number first (Interaction only) – if you want to have the customer type their phone number at the very beginning of the interaction.
  • Show preview of ECBT – If you want the widget to display the estimated callback time.
  • Auto refresh callback time – If you want the widget to refresh the callback time as it changes.

Step 5: Phone Number Validation – 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 6:  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 7: 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 8: Click the Show Widget Code button to generate the script.

NOTE: The data-metadata-[metadata-name]=”” attribute within the JavaScript code 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 numeric information is whispered to the agent when they take the customer’s call.
IMPORTANT: If collecting metadata through the widget, the associated call target must be set so that it requires the data-metadata-[metadata-name]=”” attribute.

Step 9: Add the JavaScript code to your website’s HTML. This is done by copying each element and pasting it into your HTML. Click Display on this page if you want to test the widget on the current page before copying it to your site.

How do I add a Call Me widget that offers scheduled callbacks to a website?

Scheduled Callback

Perform the following steps to add a Call Me widget to a website that offers scheduled callback:

Step 1: Select Call Targets from the side navigation menu.
Step 2: From the provided list, choose the call target you want to add the scheduled callback option too.
Step 3: Click the Schedule Callbacks option found in the registration settings section.
Step 4: Configure the following options:

  • Allow Scheduling Callback Outside Hours – Select this option if you want the widget to continue offering scheduled callbacks outside of operating hours.
  • Max Scheduled Callbacks Per Interval – Enter the maximum number of scheduled callbacks allowed per 30-minute interval
  • Number of Days Out to Schedule Callbacks – Enter the number of days out from the current date that the system will allow the scheduling of callbacks.
  • Minimum Number of Scheduling Options – Enter the minimum number of scheduling options, in 30-minute increments, that will be presented to the customer.

Step 5: Click Save Changes to save as a draft.
Step 6: Click Publish to activate the changes to your organization.
Step 7: Select API & Applications from the side navigation menu.
Step 8: Click the Applications tab.
Step 9: Complete the following fields:

  • Choose a Target Type- Choose between an interaction or call target.
  • Choose an APIKey- This will provide you with a list of already created API Keys.
  • Choose a Style- There are two style options to choose from, they are (1) Modal- a popup widget, or (2) Inline- places the widget wherever the tag is located. If modal is selected, you will need to also enter a modal title and a name to your popup button in the additional spaces that appear.
  • Choose a Theme- Determine how your widget will display on the page. You can choose a default (uses the VHT Callback cloud styling) or a custom (you provide the style) theme.

Step 10: Complete the following options fields as needed:

  • Show all Steps (Interaction only) – if you want to reveal every step of the interaction to the customer.
  • Prompt for phone number first (Interaction only) – if you want to have the customer type their phone number at the very beginning of the interaction.
  • Show preview of ECBT – If you want the widget to display the estimated callback time.
  • Auto refresh callback time – If you want the widget to refresh the callback time as it changes.

Step 11: Click the Show Widget Code button to generate the script.
Step 12: Add the HTML code to your CSS. This is done by copying each element and pasting it into your CSS. Click the Display on this page button if you want to test the widget on the current page before copying it to your site.

How do I add language customization to a web widget?

Customizing the language

The web widget has a number of new options that can be added to your page to customize the language of your widget.  To do so, add the following options to the widget code and change the message between the " " to customize the language of a widget:

Language labels

  • data-language-estimated-callback-time="Your estimated callback time is"
  • data-language-minutes="Minutes"
  • data-language-cancel-callback="Cancel Callback"
  • data-language-callback-cannot-be-scheduled="The Callback cannot be scheduled"
  • data-language-callback-is-currently-disabled="Callback is currently disabled"
  • data-language-callback-cancelled="This Callback has been cancelled"
  • data-language-please-enter-the-following="Please enter the following"
  • data-language-please-enter-your-phone-number="Please enter your phone number"

Buttons

  • data-language-call-me="Call Me"
  • data-language-cancel="Cancel Callback"

Dial Settings

  • data-phone-number-placeholder="43 —“
  • data-minimum-phone-length="8"
  • data-maximum-phone-length="18"
  • data-invalid-phone-message="Sorry, that number is not valid"
  • data-enforce-country-code="1"

Error Messages

  • data-no-phone-message="No phone message is available"
  • data-general-error-message="Error."

Label placeholder

Add the following option to the widget code to populate fields with label placeholders. This will continue until overridden manually:

  • data-use-labels-as-placeholders="true"

How do I add a Callback Is Not Available message to a web widget?

Adding a Callback Is Not Available message

Adding a ‘onerror’ scripting logic allows for a “Callback is not available" message to be displayed when the callback option is not available or an error is encountered while loading the widget.

Sample HTML script

< html>
< !-- Use this element to activate the modal -->
< button class="cp_widget_modal_button btn btn-default" onclick="CP.openWidget('cp_widget_id_5510')">Open< /button>

< !-- Your widget code -->
< !-- Paste this into your page where you want the widget to appear -->
< script onerror="document.write('Callbacks are currently unavailable at this time')" src="http://httpstat.us/500?sleep=1000" async data-widget-uniq-id="cp_widget_id_5510" data-api-key="35900c59bb2f06e221fbd6b801bf6c03" data-widget-type="cp_modal" data-client-id="1" data-show-phone-first="" data-show-all-steps="" data-show-ecbt-preview="" data-refresh-wait-time="" data-language-please-enter-the-following="Please enter the following" data-language-please-enter-your-phone-number="Please enter your phone number" data-language-please-select="Please select an option" data-widget-theme="default" data-modal-title="asdf" data-widget-html-url="https://preview.virtualhold.com/api/v3/call_targets/4.html" data-call-target-id="4" >

< /body>

New to the VHT Callback cloud product? Get started here.

Discover it: Read about the API & Applications screen in the VHT Callback cloud instance.