Примеры использования Widget API - Comagic Widget API

Применение своих стилей и шаблонов через applyWidgetOptions

Для применения своих стилей и шаблонов необходимо в код вставки добавить ссылки на них, используя конструкцию __cs.push(['applyWidgetsOptions', {...}]). В методе указываем ссылки на компоненты (js, css, templates) виджетов, тип устройства и имя виджета.

Типы устройств:

  • desktop
  • mobile

Список имён виджетов:

  • personal_form
  • call_generator
  • offline_message_generator
  • sitephone
  • consultant

Пример использования пользовательских js, css и tpls для десктопного генератора звонка.

<head>
    <script>
        var __cs = __cs || [];
        ...
        __cs.push([“applyWidgetsOptions”, {
            // имя виджета, для которого применяем кастомизацию
“call_generator”: {
                // тип устройства, для которого применяем кастомизацию
desktop: {
                    js: “//app.comagic.ru/widget/js/lead/desktop/call_generator.min.js”,    //кастомизированный JS-файл
                    css: “//app.comagic.ru/widget/css/lead/desktop/lead_call_generator_desktop.css”,    //кастомизированный CSS-файл
                    tpls: {
                        "call_generator": “//app.comagic.ru/widget/html/lead/desktop/call_generator.html” //кастомизированный шаблон виджета
                    }
                }
            }
        }]);
    </script>
    <script type="text/javascript" async src="//app.comagic.ru/static/cs.min.js"></script>
</head>

Кастомизация применяется для всех виджетов, соответствующих указанному имени. Например, у вас настроено несколько форм генератора звонка и вы хотите изменить их внешний вид. После того, как вы укажете в конструкции имя виджета call_generator, изменения будут применены ко всем формам генератора звонка.

Добавление чекбокса для ссылки на персональное соглашение на примере генератора заявки

Для добавления чекбокса на генератор заявки необходимо в консутркцию applyWidgetsOptions добавить метод beforeViewControllerRun и изменить свойства is_personal_info_enabled и personal_info_tex’ в объекте settings. По умолчанию ‘is_personal_info_enabled’ = false, ‘personal_info_text’ = "Согласен с обработкой персональных данных".

__cs.push(['applyWidgetsOptions', {
    'offline_message_generator': {
        desktop: {
            beforeViewControllerRun: function (settings, tpls) {
                settings['is_personal_info_enabled'] = true;
                settings['personal_info_text'] = 'Даю согласие на обработку персональных данных';
                return {settings: settings, tpls: tpls}; // необходимо возвращать объекты ‘settings’ и ‘tpls’, для дальнейшей корректной работы виджета
            }
        }
    }
});

Полученную конструкцию добавляем в код вставки CoMagic на сайте. Если при снятом чекбоксе попытаться отправить заявку, то чекбокс станет красного цвета, а заявка не отправится, пока чекбокс не будет выбран.

Использование .comagic-widget для изменения виджета

Рассмотрим использование .comagic-widget на примере изменения положения виджета/скрытия виджета на странице. .comagic-widget - базовый класс всех виджетов, является индикатором того, что элементы с этим классом относятся к виджету. По-умолчанию класс пустой и не содержит блока объявления стилей.

Добавление стилей на страницу с помощью подключения файла *.css

Для добавления стилей на страницу можно добавить их в файл с расширением *.css, например style.css и подключить их через <link rel="stylesheet" href="style.css">, где href - путь до места, где расположен файл style.css.

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

Добавление стилей на страницу с помощью тега <style></style>

Для добавления стилей на страницу с помощью тега <style></style>, достаточно определить этот тег в своем html файле, и внутри этого тега задавать правила стилей

Примеры использования .comagic-widget с тегом <style></style>

Скрытие виджета на странице

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

Изменение положения консультант/сайтфона:

<html>
    <head>
        ...
        <style>
            .comagic-widget {
                justify-content: flex-start | center | flex-end; // положение виджета по вертикали сверху | по центру | снизу
                left: 0; // положение виджета слева
                right: 0; // положение виджета справа
            }
        </style>
    </head>
    <body>
        ...
    </body>
</html>

Изменение положения лидогенератора:

<html>
    <head>
        ...
        <style>
                 .comagic-widget {
                    align-items: flex-start | center | flex-end; // положение виджета по вертикали сверху | по центру | снизу 
                    justify-content: flex-start | center | flex-end; // положение виджета по горизонтали слева| по центру | справа
}
        </style>
    </head>
    <body>
        ...
    </body>
</html>

Соверешние звонка посетителю сайта после отправки заявки через лидогенератор

Рассмотрим использование метода ComagicWidget.sitephoneCall() c формой лидогенератора для совершения звонка после отправления заявки.

В конструкцию applyWidgetsOptionsнеобходимо добавить метод afterViewControllerRun и подписаться на событие leadsubmit, внутри которого мы будем вызывать метод ComagicWidget.sitePhoneCall с данными, полученными с формы генератора заявки.

__cs.push(['applyWidgetsOptions', {
    // имя виджета, для которого применяем кастомизацию
'offline_message_generator': {
        // тип устройства, для которого применяем кастомизацию
desktop: {
            afterViewControllerRun: function () {
                var offline_message_generator = Comagic.UI.getWidget('offline_message_generator'); // получение объекта виджета генератора заявки
                offline_message_generator.on('leadsubmit', function(request) {
                    var values = offline_message_generator.getValues(), // получение значений всех полей генератора заявки
                        phone = values['phone'];

                    phone && ComagicWidget.sitePhoneCall({phone: phone}); // вызов ComagicWidget.sitePhoneCall
                });
            }
        }
    }
});

Полученную конструкцию добавляем в код вставки CoMagic на сайте. Так как мы используем метод ComagicWidget.sitephoneCall() для совершения звонка, то вызов будет обрабатываться по настройкам сайтфона. Компонент “Сайтфон” должен быть подключен и настроен.

Отправка заявки после заказа звонка через лидогенератор

Рассмотрим использование метода Comagiс.addOfflineRequest() c формой лидогенератора для отправления заявки после заказа звонка. В конструкцию applyWidgetsOptions необходимо добавить метод afterViewControllerRun и подписаться на событие leadsubmit, внутри которого мы будем вызывать событие Comagic.addOfflineRequest с данными, полученными с формы генератора звонка.

__cs.push(['applyWidgetsOptions', {
    // имя виджета, для которого применяем кастомизацию
'call_generator': {
        // тип устройства, для которого применяем кастомизацию
desktop: {
            afterViewControllerRun: function () {
                var call_generator = Comagic.UI.getWidget('call_generator'); // получение объекта виджета генератора звонка
                call_generator.on('leadsubmit', function(request) {
                    var values = call_generator.getValues(), // получение значений всех полей генератора звонка
                        phone = values['phone'];

                    phone && Comagic.addOfflineRequest({phone: phone}); // вызов Comagic.addOfflineRequest
                });
            }
        }
    }
});

Полученную конструкцию добавляем в код вставки CoMagic на сайте. Для использования метода Comagiс.addOfflineRequest() должен быть подключен компонент “Консультант”.

Доступ в демо-кабинет
ФИО*:
E-mail*:
Телефон*:
* - Обязательные для заполнения поля