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

How to Create and Customize a Mobile App Widget

Mobile Rescue Widgets are widgets that allow customers to navigate through a visual IVR and directly request a call-back using Fonolo while staying within your Mobile App. With just a few lines of code, you can enable the Client to seamlessly transition from your mobile app to live assistance.

After starting a call-back request, Clients can watch the progress through your mobile app, 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 Mobile 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 mobile widget are the same as for creating a regular Call-Back Profile. To create a mobile widget, however, you will select the ‘Channel’ (1), and then select ‘Mobile Rescue’ (2), as per the screenshot below. Once entering the rest of the information as per the screen shot below, click the green ‘Add New Call-Back Profile’ button (3) in the top right corner of the page.

  • Profile Label – A friendly name for this Mobile 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, Web Rescue, or in this case, Mobile 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 mobile widget,

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

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 (2) in the top right corner of the page.

Call Options

Another step in creating mobile 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).

Pre-Call Questions for Mobile Widgets

Additionally, another step in creating mobile 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 mobile 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.

When adding a new question that Client will be prompted to answer before completing their opt-in for a call-back, several critical parameters must first be selected (1).

  • Label – Give this Question a label for internal reporting purposes.
  • Input Key – For Web Rescue and Mobile Rescue, the Input Key will define variables that are passed through the Javascript of the widget.
  • Type – As shown below, the ‘Type’ of incoming data that is specified will determine how it is handled and passed along to the Agent by Fonolo. For the mobile app widget, change the ‘Type’ to ‘Text input’. This will allow the Client to type the information into the app using the on-screen or physical keyboard on their mobile device.
  • Store Data – For the ‘Store Data’ option, you can opt to have the input data stored on Fonolo’s servers for reporting. Keep in mind that if the data contains sensitive information, you may not want to host this data outside of your own servers.

When using the ‘Text Input’ option (2), there will be some additional configurations that need to be entered.

  • Length – This will determine the required minimum and maximum number of characters for the answer.
  • Flags – Required will force the Client to fill out the field. Visible will make the field visible to the Client. Editable will allow the Client to modify the field.
  • Agent Whisper – This will be the audio that the Agent hears before Fonolo whispers the text-to-speech version of the answer.
  • Default Value – This will be the default text in the field if the Client does no input anything.
  • SIP Header Name – If using SIP and passing this information along in a SIP header, identify the name of the SIP Header here.

When you are satisfied with the information you have entered, click the grey ‘Save Changes’ button (3) at the bottom of the page.

When you are previewing the mobile app with the newly added Pre-Call Question (1), the result will appear like this:

Previewing and Embedding Mobile App Widgets

Once the mobile 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 mobile app.

To Preview your new mobile widget, click the blue ‘Preview’ link (1) beside the widget that you just created under the ‘Call-Back Profiles’ tab. By clicking the blue ‘Mobile URL’ link (2), you will get a pop-up with the web URL that is required to add the widget to your mobile app.

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

When clicking the blue ‘Mobile URL’ link, you will get a pop-up with the web URL that is required to add the widget to your mobile app. Simply copy the URL (1) and add link to it within the necessary part of your mobile app to add the widget.

Was this article helpful?

Related Articles