1. Home
  2. Fonolo Portal
  3. Manage
  4. Call-Back Profiles
  5. How to Create and Customize a Web Rescue Widget

How to Create and Customize a Web Rescue Widget

Web Rescue Widgets are widgets that allow customers to navigate through a visual IVR and directly request a call-back using Fonolo, all without needing to call in to your phone queue. With just a few lines of code, you can enable the Client to seamlessly transition from web to live assistance. This also gives you the ability to offer them a Scheduled Call-Back at a later time, helping you to smooth out spikes in call volume.

After starting a call-back request, Clients can watch the progress through the widget so they know when to expect the call back. They’ll see status messages like “Calling Company”, or “Waiting on Hold”. You can also include Pre-Call questions that will request information from your Client, and pass it to your agents to improve their efficiency.

To create a new Web Rescue Widget, start by going to MANAGE (1) > Call-Back Profiles (2).

Then click on the green ‘Add New Profile’ button (1) in the top right corner of the page to begin creating your widget.

The initial settings for creating a web widget are the same as for creating a regular Call-Back Profile. To create a web widget, however, you will select the ‘Channel’ (1), and then select ‘Web Rescue’ (2), as per the screenshot below.

  • Profile Label – A friendly name for this Web Widget for you to recognize it within your Fonolo Portal.
  • Geo. Whitelist – A whitelist of countries and regions that Fonolo is allowed to place calls within. This is decided under Admin > Settings > Geographic Permissions. If none are customized, a Default Whitelist will be used.
  • Channel – Here you can set which call-back channel this profile will be attached to (In-Call Rescue, Mobile Rescue, or, in this case, Web Rescue).
  • Language – If you provide support channels in multiple languages, you can specify an alternative language here. We currently support English, French and Spanish, but can add additional language if required.
  • Client CID Number – This will be the number that appears to the Client when they receive their call-back from Fonolo.
  • Client CID Name – This will be the name that the number belongs to that the Client will see when they receive their call-back from Fonolo.
  • Agent CID Number – This will be the number that your Agent will see when they answer the placeholder call from Fonolo. The default will be the Client’s callback number.
  • Agent CID Name – This will be the Caller ID name that the Agent will see when they answer the placeholder call from Fonolo.  The default will be ‘Fonolo’.

If you would like the phone number that the Client entered to receive their call-back on to appear as the Agent CID Number, the Macro {{$client_number}} will fill this in during each call for you automatically. Once all of the settings are correct, click the green ‘Add New Call-Back Profile’ button in the top-right corner of the page.

Next, click on the ‘Appearance’ tab (1) at the top of the page to modify the function and appearance of the web widget,

When on the Appearance tab, there are a number of configurations that need to be made. First, the Appearance (1) configurations will determine how the widget looks on your website. Text Content (2) will determine the text that is displayed within the web widget at the different points of the call-back process. Once a call-back request is placed, the web widget will automatically update with live information based on the status of the call-back request, giving your Client updated information on when they should receive their call-back.

  • Display Type – The Overlay Widget will appear when a link is clicked (1), in the middle of the page (2) with the background around the widget grayed out.

    The Embedded widget will be placed directly on a page within your site, and will always be visible (1).
  • Theme – The visual theme will determine the colors that will be used in this web widget.
  • Width/Height – This will determine the size of the widget, in pixels (px). Each dimension can be etween 25 and 1280 px.
  • Content Area – Selecting different ‘Content Areas’ will display the selected ‘Content’ directly below. You should examine each individual Content Area to customize what information will be displayed to the Client in the widget.

Content Types

  • Info Link Title – This link will bring up more information about the widget and how it works.
  • Info Content – This is the default body text of the widget that the Client will see before they being requesting a call-back.
  • Header Title – This is the main title of the widget
  • Message #1 – Main Page – This text will appear above the Call Options you have added to the widget for Clients to request call-backs from.
  • Message #2 – Call Header – This is the header information that is passed back to Fonolo to initiate the call-back request.
  • Message #3 – Pre-Call – This is the information that the Client will see in the Widget while they are waiting for their call-back.
  • Message #4 – Call In-Progress – This is the information that the Client will see in the Widget while they are on their call-back.
  • Message #5 – Post-Call – This is the information that the Client will see in the Widget after their call-back is complete.
  • Callback Scheduled – This is the information that the Client will see in the Widget if they have scheduled a call-back for a later time.
  • After Hours – This is the information that the Client will see in the Widget when the queues are closed and not accepting call-backs at that time.
  • De-Activated – This is the information that the Client will see in the Widget if the widget is deactivated from within Fonolo.

Once all of this information has been entered, click the green ‘Save Changes’ button (3) in the top right corner of the page.

Call Options

Another step in creating web widgets that is unique from a regular Call-Back Profile is the order of the Call Options. When on the Call Options tab under Call-Back Profiles, your Targets will be listed on the left side of the screen. From the Call Options tab, as you add different Targets from the left side (1) over to the right side (2), you will be making these Targets available to Clients through the widget.

Beside each of the Call Options, ‘Move’ will allow you to move that target over to another, pre-existing Call-Back Profile, ‘Edit’ will allow you to configure the Extension and Caller ID (CID) for that Target, and ‘Delete’ will allow you to remove the Target from the list.

Clients will see these Targets in the order that they are displayed within the table on the right. To re-order the different call-options you are making available to your Clients, click the ‘Burger’ icon (3) beside each of the Call Options, and drag it up and down to change the order. When you are satisfied with the order of the different Targets, click the green ‘Save Changes’ button (4) in the top right corner of the page.

Option Settings

After adding a Target to a Call Option, click ‘Edit’ to set the Fonolo Extension and CID information. you then need to assign the matching Fonolo Extension, which is where call-back are first transferred to once a client opts-in for a call-back.

(1) Rename Option – By default, the name of the Call Option will be the same as the Target. This can be changed if the Target will be used in multiple Call-Back Profiles, or multiple times within the same Call-Back Profile.
(2) Country Code Override
(3) Client Caller ID Override – Here, you can set the Caller ID Name and the Caller ID Number that the Client will see when they receive their call-back from Fonolo
(4) Agent Caller ID Override – Here, you can set the Caller ID Name and the Caller ID Number that the Agent will see when they answer the call placed by Fonolo to hold a place in line for the Client

Once all settings have been configured, click ‘Save Changes’ at the bottom of the Pop-up window (5).

Scheduled Call-Backs for Web Widgets

Another step in creating web widgets that needs to be considered differently from regular Call-Back Profiles is the setup of Scheduled Call-Backs.

For Scheduled Call-Backs, the options that are presented to the client are listed visually within the widget, as opposed to listed by an automated voice prompt during the Call-Back request, as per the screenshot below..

Pre-Call Questions for Web Widgets

Additionally, another step in creating web widgets that needs to be considered differently from regular Call-Back Profiles is the setup of Pre-Call Questions.

Pre-Call Questions, when being prompted and answered within a web widget, as opposed to over the phone, must be presented differently. As per the example below, you are unable to request a Client to speak their name, but instead, you can ask them to type their name into the widget.

The result will appear like this:

There are several different types of Pre-Call Questions that can be asked within the widgets. Alternatively, you can pass information along in hidden, pre-filled questions.

Previewing and Embedding Web Widgets

Once the Web Widget has been completely configured, you are then ready to preview the widget to make sure it looks and functions the way you want it to, and then to embed the widget within your website.

To Preview your new web widget, click the blue ‘Preview’ link (1) beside the widget that you just created under the ‘Call-Back Profiles’ tab.

Previewing the widget will give you a pop-up that will display what the widget will look like.

By clicking the blue ‘Embed Code’ link (2), you will get a pop-up with the code that is required to add the widget to your webpage. Simply copy the code and add it into the necessary part of your web page to add the widget.

Related Articles