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 call-generator forms configured and you want to change their appearance. After you specify the widget's name call_generator in the structure, changes will be applied to all the call-generator forms.

Adding a checkbox linking to a personal-data agreement, using the application generator as an example

To add a checkbox to an application generator, you need to add the method beforeViewControllerRun in the structure applyWidgetsOptions, and change the settings is_personal_info_enabled and personal_info_text in the object settings. By default, is_personal_info_enabled = false and 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}; // to keep the widget working correctly, return the 'settings' and 'tpls' objects
            }
        }
    }
}]);

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

Using .callgear-widget to change a widget

Consider the use of .callgear-widget in the example of how to change the position of the widget or hide the widget on the page. .callgear-widget is the base class of all widgets; it 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 the extension *.css (for example, style.css) and then connect them 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>

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

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

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

Hiding the widget on a page

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

Changing the position of the consultant / sitephone

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

Changing the position of the lead generator

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

Calling a 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 and 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', {
    'offline_message_generator': {
        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 the values of all application generator fields
                        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 and 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', {
    'offline_message_generator': {
        desktop: {
            afterViewControllerRun: function () {
                var call_generator = CallGear.UI.getWidget('call_generator'); // getting the call generator's widget object
                call_generator.on('leadsubmit', function(request) {
                    var values = call_generator.getValues(), // getting the values of all call generator fields
                        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.