Кнопка вызова формы

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

Пример кнопки вызова на сайте InWear

Обратите внимание!

Для работы модальной формы на вашем сайте необходимо установить скрипт eSputnik. Для его получения перейдите во вкладку “Сайт” → “Формы” и нажмите “Получить код”. Далее укажите домен вашего сайта, добавьте скрипт в код сайта перед закрывающим тегом <body>. Скрипт должен быть установлен на всех страницах.

 

Создание кнопки вызова

  1. Перейдите в раздел “Сайт” →“Формы” и выберите вкладку “Кнопки вызова”.

Формы - Кнопки вызова

  1. Нажмите “Новая кнопка вызова”.

Создание кнопки вызова

  1. Задайте название кнопке.

Название для кнопки вызова

  1. Выберите наиболее подходящую кнопку вызова. Ее можно будет доработать в редакторе.

Выбор внешнего вида

Контент

По клику на кнопку в меню слева откроются настройки ее контента. В них можно:

  1. Задать размеры, внутренние и внешние отступы, а также настроить выравнивание элементов.

Отступы для кнопки

  1. Выбрать дизайн кнопки, задав нужный фон, толщину и цвет обводки, а также тень.

Дизайн кнопки

  1. Задать форму кнопки: оставить квадратной или сделать крглой.

Форма кнопки 

  1. Задать мобильные настройки.

Мобильные настройки для контента

Оформление

  1. Во вкладке “Оформление” задайте позиционирование (расположение) кнопки и отступы от краев экрана.

Позиционирование кнопки

  1. Вкладка “Стиль текста” дает возможность выбрать шрифт (если он требуется для кнопки).

Стиль текста кнопки

  1. В “Адаптивности” задайте ширину экрана, начиная с которой отображение формы перестраивается на мобильную версию. По умолчанию это менее 576 пикселей.

Адаптивность кнопки

  1. Во вкладке “Анимация появления” выберите эффект, с которым будет появляться кнопка.

Анимация появления кнопки

  1. В “Цикличной анимации” можно выбрать анимацию для кнопки. Например, задать настройки для ее пульсации.

Цикличная анимация для кнопки

Получится такой эффект:

Пример цикличной анимации

  1. Задайте настройки для мобильной версии, перейдя во вкладку “Мобильные настройки”.

Настройки отображения на мобильном

Верхняя панель настроек

Верхняя панель настроек

  1. Стрелки “Назад” и “Вперед” позволяют отменить или вернуть внесенные изменения в кнопку.

  2. Настройки мультиязычности:

  • настройки внешнего вида формы выполняются только для основного языка, откуда копируются во все остальные языковые версии;

  • в языковых версиях можно поменять только текст;

  • форма отображается на языке сайта, который определяется по значению атрибута lang в теге html; если его нет – по языку браузера.

  1. Цвет фона окна. Позволяет проверить, как кнопка будет смотреться на нужном фоне.

  2. Кнопки перехода на мобильную или десктопную версию формы. 

  3. Предпросмотр формы.

  4. Закрыть без сохранения.

  5. Далее (сохранение).

Параметры кнопки

Существует три типа параметров кнопки вызова:

  • Внешний вид.

  • Условия показа.

  • Форма будет отображаться (здесь нужно выбрать, какая форма отобразиться при нажатии на кнопку).

Параметры кнопки

  1. Внешний вид мы уже рассмотрели. Разберемся с условиями показа. Для этого нажмите кнопку “Редактировать”.

Условия показа кнопки

Здесь можно настроить:

  • частоту показа;

Частота показа кнопки

  • когда показывать кнопку;

Когда показывать кнопку

  • кому показывать;

Кому показывать кнопку

  • страницы, на которых будет показываться форма: добавить или исключить ненужные;

Страницы, на которых будет показываться форма

  • управление отображением формы с помощью API: по клику на элемент страницы или с помощью JavaScript. Если вы хотите использовать кастомный лаунчер для запуска формы, вставьте CSS-селектор элемента вызова. Чтобы показать форму при каком-либо дополнительном условии, скопируйте JavaScript-код ниже.

Способы показа

  1. Выберите форму, которая будет отображаться после нажатия на кнопку. Для этого нажмите на кнопку “Выбрать”.

Форма, которая будет отображаться при нажатии

  1. Сохранив все настройки, проверьте, как кнопка будет отображаться на сайте. Для этого нажмите на кнопку “Смотреть на странице”, так как по умолчанию она не видна.

Смотреть кнопку на странице

  1. Введите ссылку на сайт и нажмите “Смотреть на странице”.

Сайт, на котором будет показываться форма

При удачном выполнении всех шагов форма отобразится на вашем сайте согласно заданным условиям.

Пример показа кнопки

  1. После тестирования кнопки откройте ее, нажав на кнопку “Видна посетителям сайта”, и нажмите “Сохранить”.

Включить кнопку для всех

Чтобы остановить показ кнопки, нажмите на кнопку “Видна только вам”, после этого – “Сохранить”.

Остановить показ кнопки

  1. Во вкладке “Статистика” можно увидеть результаты формы.

Статистика кнопки

  1. В меню кнопки есть возможность привязать необходимую форму, отредактировать кнопку, скопировать ее или удалить.

Меню кнопки

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email