Как создать встроенный блок

Создание встроенного блока на проекте

1. Перейдите в раздел Кампании -> Список кампаний:

2. Нажмите на «Создать кампанию» -> «Встроенный блок»:

3. Выберите папку и нажмите «Создать»:

4. Выберите шаблон:

5. Укажите сайт:

Настраиваем встроенный блок

6. Задайте название:

7. Внешний вид формы

В разделе «Встроенный блок» нажмите «Изменить», затем — «Редактировать»:

Основные настройки:
Настройте внешний вид, расположение встроенного блока:

Также на странице редактирования шаблона можно посмотреть отображения на разных гаджетах и редактировать HTML и CSS код встроенного блока, если это необходимо:

8. Таргетинг
Укажите, кому и при каких условиях показываем блок. Можно ограничить выборку сегментом, источником перехода и т.д.

Например, выводим форму только для женщин:

Подробнее о таргетинге — в статье.

9. Общие настройки:

10. Действия после заполнения формы

• Создать нового клиента

  • Тип данных - в какое поле клиента в Mindbox вписываем данные;
  • Поле формы - откуда из формы забираем данные для записи;
  • Управление подписками - подписываем на канал и тематику.

• Редактировать существующего

  • Тип данных - в какое поле вписываем данные. Редактировать можно пол, зону и публичные дополнительные поля.
  • поле формы - откуда из формы забираем данные для записи.

Дополнительные настройки

• Вызвать подписку на пуши
  Появится попап браузера для разрешения показа вебпушей. В полях для операций уже введены названия операций, которые нужно создать, следуя инструкции. Доступно при подключенном модуле вебпушей.

• Передавать события в Google Analytics при просмотре, заполнении и клике в форме
  Для настройки интеграции с GA следуйте инструкции.

• Webhook
  Настраиваем вызов вебхука:

  • ключ дополнительного поля - переменная для передачи данных;
  • значение дополнительного поля - значение, полученное из формы. Описания полей формы можно найти выше в разделе создания/редактирования клиента и в разделе “Дополнительные поля” при редактировании внешнего вида формы.

• Вызывать пользовательский JS
  Вставляем код, который должен отрабатывать при отрисовке, показе или закрытии формы или выполнении целевого действия.

Как добавить блок на сайт

11. Место отображения

• Встроить блок в селектор:

• где показать блок — перед/после элемента, в начало/конец блока

  • селектор
    

• Поместить блок в нужное место самостоятельно:
  копируем код и вставляем в нужное место в шаблоне сайта:

Как выбрать селектор

CSS-селектор - это элемент, к которому мы собираемся применить определенные свойства CSS.

1. Установите расширение Selector Gadget для Google Chrome. Оно значительно облегчит поиск нужного селектора.
2. Перейдите на сайт, куда вы хотите поставить форму, выберите место на странице, где она должна располагаться.
3. Активируйте Selector Gadget, поднесите курсор мыши к этому месту и скопируйте его селектор.

Существуют селекторы:

• .someClass — соответствует любому элементу с классом "someClass";
• #someid — соответствует элементу с идентификатором "someid".

Детально поиске нужного селектора в статье

Если для одной формы необходимо задать разные селекторы для ПК и мобильных устройств, то в поле выбора селектора нужно использовать:

.popmechanic-desktop [selector_for_desktop], .popmechanic-mobile [selector_for_mobile]

где вместо значений [selector_for_desktop] и [selector_for_mobile] нужно вставить соответствующие селекторы.

12. Проверьте отображение на сайте

Для проверки отображения нужно либо встроить на сайт div-блок, либо выбрать показ по селектору и указать нужный селектор (пункт 9 в инструкции выше).

• Нажмите “Проверить на сайте”. Вставьте ссылку на сайт:

• Перейдите по ссылке:
  

13. Если блок соответствует требованиям, запустите его:

Чтобы клонировать встроенный блок, нажимаем на соответствующую кнопку:

Клонировать можно и в другие кампании.