Comagic API

Быстрый старт

Начало работы с API

Widget API — это набор JavaScript-методов, событий и свойств, позволяющих изменять вид и поведение виджетов. Пользователю необходимо создать собственные файлы css, html и js, которые заменят файлы по умолчанию.

Шаг 1. Добавление метода кода вставки

Прежде чем использовать функции API, необходимо подготовить, а затем загрузить в браузер файлы. Для загрузки добавьте в код вставки конструкцию следующего вида:

__cs.push(['applyWidgetsOptions', {...}]);

Шаг 2. Указать в методе кода вставки ссылки на компоненты виджетов

Указанные ссылки переопределят компоненты по умолчанию в момент загрузки стандартных компонентов.

Пример переопределения компонентов для персональной формы:

__cs.push(['applyWidgetsOptions', {
   'personal_form': {
       desktop: {
           js: '//comagic.ru/personal_form.js',
           css: '//comagic.ru/personal_form_desktop.css',
           tpls: {
               "personal_form": '//comagic.ru/personal_form.html'
           }
       }
   }
}]);

Как видно из примера, — на сайт загрузятся кастомные стили, шаблоны и скрипт.

Шаг 3. Создание viewcontroller'a

Comagic.UI.createViewController('personal_form', function (settings, tpls) {
    ...
});

Первый аргумент функции — имя viewcontroller'a. Второй аргумент функции — callback — будет вызван, когда будет готово окружение для виджета.

Шаг 4. Создание виджета

Comagic.UI.createViewController('personal_form', function (settings, tpls) {
    var personalForm = Comagic.UI.createWidget('personal_form', {
        settings: settings, // настройки, которые пришли с сервера
        id: settings['id'], // id текущей формы лидогенератора
        template: tpls['personal_form'] // html шаблон в виде строки
    }); 
    personalForm.render(); // при вызыве метода происходит создание dom-элемента и вставка его на страницу
    personalForm.on('leadhide', function () { // реакция на команду закрытия персональной формы
        personalForm.destroy(); // удаление элемента со страницы
    });
    personalForm.getEl('.comagic-personal-form__main-btn').addEventListener('click', function () {
        personalForm.submit(); // отправка данных на сервер о нажатии на ссылку
        window.open(settings['button_url']);
    });
});

Не получилось настроить API?

  1. Посетите портал идей. Возможно, решение вашей проблемы уже найдено.
  2. Обратитесь к своему персональному менеджеру.
Нам интересно ваше мнение о CoMagic.
Пожалуйста, оставьте контакты для связи с менеджером
ФИО*:
E-mail*:
Телефон*:
* - Обязательные для заполнения поля