Виджет: призыв к действию (CTA) и Форма захвата контактов

Что такое виджет?

Виджет - это компактное приложение, которое добавляется на веб-сайт для расширения его функциональности. Внешне виджет представляет собой интерактивный блок, отображаемый на экране.

Часто используемые форматы виджета - это форма для сбора заявок и контактов клиентов, и банеры “призывы к действия”, например, блок с графикой и текстом, который призывает посетителя сайта записаться на вебинар, купить курс, принять участие в розыгрыше и много другое. И в первом, и во втором случае целью является получение контактной информации от потенциального клиента для дальнейшей работы.

На Kwiga Вы не ограничены в том, для чего Вы создаете виджет. Это может быть баннер, реклама акционных предложений, тизер курса, виджет сбора контактов, или же быструю форму регистрации на вебинар и много другое. Данные из формы могут передаваться непосредственно в CRM на Kwiga, так и на другие сервисы, если Вы используете их для работы с клиентами.

Виджет на Kwiga - это универсальный инструмент, который Вы можете добавить на любой сайт.

Область применения

Сторонний сайт

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

Возможные варианты поведения после ввода данных в форму:

• Перенаправление в профиль новосозданного контакта на платформе Kwiga
• Оставить на текущем сайте и открыть второй шаг формы: в нем можно разместить дополнительную информацию и кнопку, которая перенаправит на нужную страницу.
• Перенаправление на страницу оплаты, указанной платежной системы и автоматическая выдача доступа к продукту после успешной оплаты.

Вебинары

В процессе мероприятия можно отображать виджет в нужной временной метке и необходимой длительности. Количество показываемых виджетов не ограничено.

Кейс:

Стоит задача привлечь максимальное количество участников на вебинар. Для этого снижается порог входа: заводите участников на вебинар через быструю регистрацию, которая не предусматривает ввод электронного адреса или телефона. Далее в процессе вебинара вы проводите продажу и показываете внизу экрана форму сбора контактов. Таким образом вы можете охватить вашим предложением большее количество участников и не потерять их контакты.

Курсы (в разработке)

Вы можете добавить баннер или форму сбора контактов к любому видео на любом уроке.

Кейс:

Вы хотите привлечь новых клиентов на свой платный курс и у вас есть ознакомительный вводный урок. В этом случае, чтобы не терять потенциальных клиентов на форме регистрации до знакомства с вами, вы можете сделать такой урок открытым (доступным без регистрации) и уже в процессе общения показать нужное CTA или форму сбора контактов и превратить посетителей в ваших клиентов.

Создание виджета: общая информация

Чтобы настроить или создать форму необходимо перейти в раздел Настройки - Виджет (CTA). Созданные CTA могут использоваться одновременно на разных сайтах, вебинарах, уроках. В конструкторе на Kwiga Вы можете создать любую форму или баннер, содержащий блоки. Каждый блок в свою очередь может содержать различные элементы: текст, изображение, кнопка, ссылка или поле.

Чтобы создать новый виджет используйте кнопку +СТА.

Структурно каждый виджет состоит из блоков и элементов, входящих в блоки.

Блоки:

• Блок СТА
  Используйте эту опцию, если Вы хотите создать Призыв к действию (CTA). По умолчанию блок содержит два элемента: текст и кнопка. Вы можете дополнять их другими элементами, изменять и заменить эти элементы.
• Форма
  Используйте этот блок, для получения данных от Ваших клиентов. По умолчанию форма содержит два поля для ввода информации (имя и емейл) и кнопку, для отправки данных.
• Свой собственный блок
  Начните создавать свою собственную форму без использования предварительных шаблонов и заготовок.

Элементы, входящие в блоки:

• Кнопка
  С помощью кнопки Вы можете настроить два действия: отправка данных формы или же перенаправление пользователя по ссылке. Когда выбрана опция переход по ссылке можно указать как открывать ссылку: в новом окне/табе или в текущем. Доступны широкие настройки визуального вида кнопки: размер, цвет, цвет при наведении, шрифт, скругление и отступы.
• Текст
  Широкий набор опций по настройке отображения текста. Можно использовать для заголовков и дополнительных описаний в формах или баннерах.
• Графический элемент
  Настройка высоты и ширины изображения, опция растягивания изображения по ширине в %, скругления и механика наложения текста и фона при наведении на изображение. Также можно установить ссылку при клике на элемент.
• Ссылка
  Позволяет указать ссылку и способ открытия: в новом окне/табе или в текущем. Дополнительно управление шрифтом, цветом и отступами элемента.
• Поле
  Вы можете добавить на форму любое поле, которое установлено у Вас в Пользовательских полях на Контактах Доступны стандартные настройки стиля и внешнего вида: размер, шрифт и цвет вводимого текста, шрифт и цвет подсказки, скругление и отступы.
  Дополнительные настройки:
  - обязательное поле
  - скрытое поле: некоторые поля Вы можете добавлять на форму, но не показывать участникам. Это удобно для добавления отметок и отслеживания источника контактов, настройки языка учеников или других параметров, которые необходимо передавать с формы в СRM.

Внимание! Помните что каждый блок и элемент имеет дополнительные настройки для мобильной версии (планшет и мобильные телефоны). Вы имеете возможность переопределить визуальные настройки для мобильных устройств.

Чтобы переключаться между отображением для разных устройств воспользуйтесь этими кнопками управления (находятся справа вверху на панели управления)

Создание виджета: форма для сбора контактов

Чтобы создать новую форму для сбора контактов, перейдите в Настройки-Призыв к действию (СТА), и нажмите кнопку +СТА.

Если вы создаете форму с нуля, то добавьте новый Блок используя кнопку +Блок. В появившемся меню выберите Form. В центре экрана Вы увидите саму форму, а слева в меню Вы сможете добавлять и удалять элементы - содержимое формы, настраивать внешний вид самой формы и ее элементы.

Обратите внимание, что форма может состоять из двух шагов. Это возможно только для варианта когда значение опции “Перенаправление пользователя” установлено в “Оставить в текущем блоке”. Во всех иных случаях форма состоит только из одного шага, так как после ввода данных пользователь будете перенаправлен по одному из указанных ниже флоу:

• Перенаправление в профиль новосозданного контакта на платформе Kwiga
• Перенаправление на страницу оплаты, указанной платежной системы и автоматическая выдача доступа к продукту после успешной оплаты.
• Перенаправление на страницу продукта (курса/марафона), с автоматической выдачей доступа

Настройку виджета условно можно разбить на следующие шаги:

• 1. Открытие в модальном окне
• 2. Настройка полей формы
• 3. Логика обработки информации
• 4. Визуальная составляющая
• 5. Код виджета

Открытие формы в модальном окне

Когда Вы хотите чтобы виджет открывался по клику на какой-то элемент на вашей странице в модальном окне, тогда Вам надо вернуться в самое начало блоков и включить опцию “Использовать в модальном окне”. Там же можно настроить параметры фона, стиля модального окна и отступы.

Поля формы

Про блоки и элементы, из которых состоит виджет, подробно описано в разделе “Как создать виджет”.

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

Логика обработки введенной информации

Эта настройка указывает, что делать с введенной информацией осуществляется при редактировании блока Form в опции “Применение данных с формы”.

Доступны следующие варианты:

• Создать контакт в CRM Kwiga
• Выдать доступ к продукту

Создать контакт в CRM Kwiga

Создается контакт в CRM. Если такой пользователь с таким емейлом уже существует в Ваших контактах, тогда он отправляется на Kwiga, и ему открывается форма для авторизации. После успешной авторизации все поля (кроме емейла), которые он вводил на форме, обновляются для его карточки.

Также Вы можете указать что делать с контактом после добавления в CRM:

• Оставить в текущем блоке: это означает что пользователю будет показан Шаг 2 текущей формы.
• Отправить пользователя в профиль на Kwiga

Выдать доступ к продукту

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

Если нужно чтобы пользователь сначала оплатил продукт, тогда нужно указать соответствующее платное Предложение.

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

Также для платных Предложений есть исключение, когда к предложению подключено более одной платежной системы или установлены опции оплаты частями. То есть когда со стороны пользователя требуется выбор. В этом случае появляется опция “Обработка платежа”.

Вам нужно определить способ осуществления оплаты для данного случая из доступных опций:

Перенаправить на Kwiga для выбора способа

После введения данных и создания контакта пользователь будет перенаправлен на стандартную страницу Kwiga по оплате Предложения.

Отображать выбор на стороне пользователя

Выбор способа оплаты и платежного метода будет осуществляться в виджете. После определения способа оплаты клиент будет автоматически перенаправлен на страницу платежной системы (минуя стандартную страницу Kwiga).

Сделать выбор за пользователя

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

Также обратите внимание на опцию “Отправить письмо активации”. Принцип действия такой же как и при добавлении контакта на платформе.

Визуальная составляющая

Каждый элемент или блок можно гибко настраивать: шрифт, размер текста, отступы, скругления, фон, рамка. Также устанавливать переопределение для мобильных устройств.

Код виджета

После того как Вы настроили форму Вам нужно взять код виджета для размещения на своем сайте.

Внимание! Размещение виджета на платформе Kwiga на вебинарах и курсах не требует кода.

Сохраните все изменения в виджете и перейдите в раздел, где отображаются все созданные виджеты (Настройки - Призыв к действию (СТА)).

На странице со списком виджетов нажмите на “...” и выберите пункт “Код виджета” и следуйте инструкциям в открывшимся модальном окне.