KWIGA help center LMS (education) Connecting LMS to your website Віджет: заклик до дії (CTA) та Форма захоплення контактів

Віджет: заклик до дії (CTA) та Форма захоплення контактів

Articles:

У цьому розділі ми розповімо, як створити віджет: банер (CTA) та форму для збору контактів.


In this article:


Що таке віджет?

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

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

На 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 на вебінарах та курсах не вимагає коду.

Збережіть усі зміни у віджеті та перейдіть до розділу, де відображаються всі створені віджети (Налаштування - Заклик до дії (СТА)).

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