1. Home
  2. Fonolo Portal
  3. Manage
  4. Call-Back Profiles
  5. Front-End Responsive Web Rescue Customization Using JavaScript
  1. Home
  2. Useful Guides
  3. Front-End Responsive Web Rescue Customization Using JavaScript
  1. Home
  2. Responsive Call-Back Widget Guides
  3. Front-End Responsive Web Rescue Customization Using JavaScript

Front-End Responsive Web Rescue Customization Using JavaScript

Fonolo’s Responsive Web Rescue Widgets allow customers to navigate through a visual IVR and directly request a call-back. With just a few lines of code added to your website, 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.

For more information about Fonolo’s new Responsive Web Widget please visit NEW! About Fonolo’s Responsive Call-Back Widget

This guide will outline the customization options that are available for configuring the customer’s experience of a Responsive Widget.

Methods of Customization of the Responsive Web Rescue Widget

The Responsive Web Widget interface can be configured in two ways:

  • Back-End Configuration using the Fonolo Portal
    The back-end configuration, which can adjust the appearance and content of the Responsive Widget, can be configured in the Fonolo Portal. For more information on back-end configuration of the widget using the Fonolo Portal please visit How to Create and Customize a Responsive Web/Mobile Rescue Widget
  • Front-End Configuration using CSS and JavaScript loader options
    JavaScript styling options can be configured by including arguments for our “fonolo” function in the script that is added in the header of the website code for where the widget will be placed. These arguments affect the “container” and “iframe” objects in which the Responsive Web Widget loads on the page. Regular CSS styling rules can also be applied to the elements.

Front-End JavaScript loader options

The Responsive Widget loads as a button in the bottom right of the page. When clicked, the pane slides up and displays the queues available to the user to initiate a call-back. The responsive design uses both an iframe object and div container object that can have CSS styling rules assigned to them.

For more information on how deploy the Responsive Web Rescue Widget. Please visit Placing the Widget on a Webpage

The Default Script and Configurable Arguments

The following is the default script tag that must be added to the head of your page for the widget to load:

<script async src="https://platform.fonolo.com/v2"></script>
<script>
    window.fopts = window.fopts || []; function fonolo() { window.fopts.push(arguments); }
    fonolo("<Profile SID>");
</script>

This is the minimum information that is required to successfully deploy the widget.

Please Note: The “<Profile SID>” placeholder tag must be replaced with the correct profile SID value for the widget that you would like to deploy.

Configurable Arguments

For further front-end styling customization, the following default options can be configured as the second argument in the “fonolo” function:

defaults: {
    container: '_fc_widget_container',
    input: {},
    containerStyle: null,
    containerClass: null,
    iframeStyle: { border: 'none', display: 'block', height: '100%', margin: '0px', padding: '0px', width: '100%' },
    iframeClass: null,
    displayWarnings: true
}

The following is a short description for each of the arguments that can be used to adjust the front-end loader options for the widget:

container is the DOM id of the container that the whole widget sits in. This is the frame that pops up when the button is clicked to open the widget. By specifying this attribute, the widget will be loaded as an embedded object in the container.
input – this is a sub-object that lets default values of input fields to be passed in.
containerStyle –  specifying this argument allows the application of styles to the container div element directly;
containerClass – specifying this argument allows the application of a CSS class to the container div element.
iframeStyle – specifying this argument allows the application of styles to the iframe element that sits inside of the container div.
iframeClass – specifying this argument allows the application of a CSS class to the iframe element that sits inside of the container div.
displayWarnings – this is a true/false setting- if set to true, then any warnings that occur when the widget is loaded will be logged to the JavaScript console.

Customization Examples

Pass a default name

<script async src="https://platform.fonolo.com/v2"></script>
<script>
    window.fopts = window.fopts || []; function fonolo() { window.fopts.push(arguments); }
    fonolo("<Profile SID>",
    {
        input: {
            name: "Jane Doe"
        }
    });
</script>
Define a Pre-Selected Option

Along with passing a default name, the Responsive Widget can be configured to automatically open on a pre-selected call-back option when the button is clicked. This can be useful for being able to customize how the Widget functions, and different options can be automatically loaded on different pages. A Pre-Selected Option must be created in the Pre-Call Questions section of the Call-Back Profile settings of the Responsive Widget in the Fonolo Portal. For more information about this please visit How to Configure a Call-Back Profile > Pre-Call Questions

The ‘option’ attribute can be defined in the following code:

<script async src="https://platform.fonolo.com/v2"></script>
<script>
    window.fopts = window.fopts || []; function fonolo() { window.fopts.push(arguments); }
    fonolo("CP5af9c611ed4ec827cfad292f34fa0dca",
    {
        input: {
        
            name: "John Smith",
            option: 2 
        }
    });
</script>
Using CSS Tags with the containerStyle Object

<script async src="https://platform.fonolo.com/v2"></script>
<script>
    window.fopts = window.fopts || []; function fonolo() { window.fopts.push(arguments); }
    fonolo("<Profile SID>",
    {
        containerStyle: {
            border: "solid 5px blue"
        },
        input: {
            name: "Jane Doe",
            option: 2
        }
    });
</script>

Customizing the iframeStyle Argument

<script async src="https://platform.fonolo.com/v2"></script>
<script>
    window.fopts = window.fopts || []; function fonolo() { window.fopts.push(arguments); }
    fonolo("<Profile SID>",
    {
        containerStyle: {
            border: "solid 5px blue"
        },
        iframeStyle: {
            border: "solid 5px yellow"
        },
        input: {
            name: "John Smith",
            option: 2
        }
    });
</script>
Using CSS Classes

<style>
    .my_container_style {
        border: solid 5px green !important;
    }
    .my_iframe_style {
        border: solid 5px orange !important;
    }
</style>
 
<script async src="https://platform.fonolo.com/v2"></script>
<script>
    window.fopts = window.fopts || []; function fonolo() { window.fopts.push(arguments); }
    fonolo("<Profile SID>",
    {
        containerClass: "my_container_style",
        iframeClass: "my_iframe_style",
        input: {
            name: "Jane Doe",
            option: 2
        }
    });
</script>
Embedding a Widget

Instead of the Responsive Widget loading from the pop up button, it can be embedded into the web page by specifying a container, the location of which, can be customized according to the design of the site.

Below is one of the ways to embed the Responsive widget into a web page.

<!DOCTYPE html>
<html lang="en">
<head>
 
<script async src="https://platform.fonolo.com/v2"></script>
<script>
    window.fopts = window.fopts || []; function fonolo() { window.fopts.push(arguments); }
    fonolo("<Profile SID>",
    {
        container: "custom_location"
    });
</script>
 
</head>
    <div id="custom_location"></div>
 
<body>
</body>
</html>
Customizing the Container for the Embedded Widget

The container for the embedded widget can be customized using the standard methods of styling in HTML 5. In this case we have styled the container using the style tags in the head of the HTML code. This can now be treated as any other container.

<!DOCTYPE html>
<html lang="en">
<head>

<style>
    #custom_location {
        padding: 1em;
        background: rgb(55,71,94);
        height: 40%;
        width: 27%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 200px;
    }
</style>

<script async src="https://platform.fonolo.com/v2"></script>
<script>
    window.fopts = window.fopts || []; function fonolo() { window.fopts.push(arguments); }
    fonolo("<Profile SID>",
    {
        container: "custom_location"
    });
</script>

</head>

    <div id="custom_location"></div>

<body bgcolor="#156CB3">
</body>
</html>

Was this article helpful?

Related Articles