Примеры использования 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() должен быть подключен компонент “Консультант”.