Skip to content

Widget API examples

Applying your own styles and templates through applyWidgetOptions

To apply your own styles and templates you need to add links that lead to them into the insert code. You can do so by using the structure __cs.push(['applyWidgetsOptions', {...}]). In the method, specify the links to the components (js, css, templates) of the widgets, the type of device and the name of the widget.

Type of device:

  • desktop
  • mobile

List of widget names:

  • personal_form
  • call_generator
  • offline_message_generator
  • sitephone
  • consultant

An example of using custom js, css and tpls for a desktop call generator.

<head>
    <script>
        var __cs = __cs || [];
        ...
        __cs.push([“applyWidgetsOptions”, {
            // name of the widget, to which we apply customization
“call_generator”: {
                // type of device, to which we apply customization
desktop: {
                    js: “//app.callgear.com/widget/js/lead/desktop/call_generator.min.js”,  //customized JS-file
                    css: “//app.callgear.com/widget/css/lead/desktop/lead_call_generator_desktop.css”,  //customized CSS-file
                    tpls: {
                        "call_generator": “//app.callgear.com/widget/html/lead/desktop/call_generator.html” //customized widget template
                    }
                }
            }
        }]);
    </script>
    <script type="text/javascript" async src="//app.callgear.com/static/cs.min.js"></script>
</head>

Customization is applied to all widgets matching the specified name. For example, you have several forms of a call generator configured and you want to change their appearance. After you specify widget's name call_generator in the structure, changes will be applied to all the forms of a call generator.

To add a checkbox to an application generator, you need to add the method beforeViewControllerRun in the structure applyWidgetsOptions, and change the features is_personal_info_enabled and personal_info_tex’ in the object settings. By default ‘is_personal_info_enabled’ = false, ‘personal_info_text’ = "I agree with the processing of personal data".

__cs.push(['applyWidgetsOptions', {
    'offline_message_generator': {
        desktop: {
            beforeViewControllerRun: function (settings, tpls) {
                settings['is_personal_info_enabled'] = true;
                settings['personal_info_text'] = 'I agree with the processing of personal data';
                return {settings: settings, tpls: tpls}; // for further correct operation of the widget you need to return the objects ‘settings’ and ‘tpls’
            }
        }
    }
});

The resulting structure is added to the CallGear insert code on the website. If you try to send an application when the checkbox is removed, the checkbox will turn red and the application will not be sent until the checkbox is selected.

Using .callgear-widget to change widget

Consider the use of .callgear-widget on the example of how to change the position of the widget / hide the widget on the page. .callgear-widget - the base class of all widgets, is an indicator that elements with this class belong to the widget. By default, the class is empty and does not contain a style declaration block.

Adding styles to a page by connecting a *.css file

To add styles to a page, you can add them to a file with extension *.css, for example style.css and then connect then through <link rel="stylesheet" href="style.css">, where href is a link that leads to the style.css file.

<html>
    <head>
        ...
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        ...
    </body>
</html>

Add styles to a page using the tag <style></style>

To add styles to a page using the tag <style></style>, just define this tag in your html file, and set style rules inside this tag.

Examples of using .callgear-widget with the tag <style></style>

Hiding widget on a page

<html>
    <head>
        ...
        <style>
            .callgear-widget {
                display: none;
            }
        </style>
    </head>
    <body>
        ...
    </body>
</html>

Change of position consultant / sitephone:

<html>
    <head>
        ...
        <style>
            .callgear-widget {
                justify-content: flex-start | center | flex-end; // widget vertical position on top | in the middle | on the bottom
                left: 0; // widget position on the left
                right: 0; // widget position on the right
            }
        </style>
    </head>
    <body>
        ...
    </body>
</html>

Change the position of the lead generator:

<html>
    <head>
        ...
        <style>
                 .callgear-widget {
                    align-items: flex-start | center | flex-end; // widget vertical position on top | in the middle | on the bottom 
                    justify-content: flex-start | center | flex-end; // widget horizontal position on the left| in the center | on the right
}
        </style>
    </head>
    <body>
        ...
    </body>
</html>

Calling website visitor after sending an application through the lead generator

Consider using the method CallGearWidget.sitephoneCall() with the lead generator form for making calls after sending applications.

You need to add the method afterViewControllerRun into the structure applyWidgetsOptions, subscribe to the event leadsubmit, inside of which we will call the method CallGearWidget.sitePhoneCall with data from the application generator form.

__cs.push(['applyWidgetsOptions', {
    // name of the widget, to which we apply customization
'offline_message_generator': {
        // type of device, to which we apply customization
desktop: {
            afterViewControllerRun: function () {
                var offline_message_generator = CallGear.UI.getWidget('offline_message_generator'); // getting the application generator's widget object
                offline_message_generator.on('leadsubmit', function(request) {
                    var values = offline_message_generator.getValues(), // getting values ​​of all fields of the application generator
                        phone = values['phone'];

                    phone && CallGearWidget.sitePhoneCall({phone: phone}); // calling CallGearWidget.sitePhoneCall
                });
            }
        }
    }
});

The resulting structure is added to the CallGear insert code on the site. As we use the method CallGearWidget.sitephoneCall() to make a call, the call will be processed according to the sitephone settings. The “Sitephone” component must be connected and configured.

Sending an application after requesting a call through the lead generator

Consider using the method CallGear.addOfflineRequest() with the lead generator form to send an application after requesting a call. You need to add the method afterViewControllerRun into the structure applyWidgetsOptions, subscribe to the event leadsubmit, inside of which we will trigger the event CallGear.addOfflineRequest with data received from the call generator form.

__cs.push(['applyWidgetsOptions', {
    // name of the widget, to which we apply customization
'offline_message_generator': {
        // type of device, to which we apply customization
desktop: {
            afterViewControllerRun: function () {
                var call_generator = CallGear.UI.getWidget('call_generator'); // getting the application generator's widget object
                call_generator.on('leadsubmit', function(request) {
                    var values = call_generator.getValues(), // getting values ​​of all fields of the application generator
                        phone = values['phone'];

                    phone && CallGear.addOfflineRequest({phone: phone}); // call CallGear.addOfflineRequest
                });
            }
        }
    }
});

The resulting structure is added to the CallGear insert code on the site. To use the method CallGear.addOfflineRequest() the “Consultant” component must be connected.