Як додати віджет для авторизації та запису на курс
У конструкторі лендингів можете використовувати віджет Авторизація, щоб на сторінку запису на курс зі своїм унікальним дизайном додати кнопки реєстрації на курс або входу до кабінету студента.
Наприклад, ви можете створити багатосторінковий сайт про школу або експерта, додати різні курси та презентувати їх у необхідному оформленні.
Ви можете додати віджет тільки на сайт із прив'язаним курсом. Для цього необхідно перейти на сайт курсу, створити нову сторінку та додати до неї віджет.
Додайте елемент
Додайте віджет Авторизація (Course login) у потрібну частину шаблону.
Виберіть курс
Виберіть курс, до якого потрібно додати кнопки.
Налаштуйте кнопки
В секції Відображення форм (Form display options) виберіть форми, які відображатимуться у віджеті: Авторизація (Sign In), Реєстрація (Sign Up) або обидві.
Реєстрація
Кнопка Реєстрація відкриває вікно запису на курс. Ви можете налаштувати різні поля для форми запису, а також кастомізувати саму кнопку.
Після заповнення форми реєстрації на вказану пошту студента буде відправлено лист із підтвердженням. Після того, як студент заповнить форму реєстрації, на вказану ним пошту надійде лист із підтвердженням доступу. Увійти в обліковий запис й розпочати навчання студент зможе після того, як перейде за посиланням, зазначеним в листі.
Читайте більше: Як студент може записатися самостійно.
Для налаштування кнопки та форми перейдіть у вкладку Реєстрація (Sign up).
Налаштуйте форму
Ви можете налаштувати наявні поля — Email та пароль для входу в кабінет студента — або додати свої для збереження даних про студента.
Щоб додати нове поле для форми, натисніть Додати поле (Add field).
Щоб змінити наявне поле, натисніть на олівець навпроти поля.
У наступному вікні виберіть тип поля та введіть його назву.
Для кожного поля виберіть, у яке поле контакта в CRM зберегти змінну. Також для кожного студента створюється угода.
Щоб зробити поле обовʼязковим для заповнення, активуйте відповідний перемикач.
Налаштуйте кнопку
Ви можете налаштувати, який текст кнопки буде відображатися, залежно від того, чи був студент записаний раніше на будь-який курс цього ж викладача на цьому домені. По натисканню на кнопку відкриється форма для введення даних.
Щоб перейти до налаштування кнопки, в секції Кнопка реєстрації (Signup button) натисніть на олівець.
У наступному вікні виберіть текст для кожного сценарію:
| Текст реєстрації (Course sign in text) | Відображається, якщо студент не авторизований у кабінеті студента. |
| Текст запису на курс (Course sign up text) | Відображається, якщо студент авторизований, але не записаний на курс. |
| Текст переходу на курс (Go-to-course text) | Відображається, якщо студент авторизований та записаний на курс. |
Додайте додаткову кнопку
Також ви можете додати додаткову кнопку в секції, щоб додати додаткову інформацію. Натисніть Додати кпопку (Add button). Натисніть на олівець, щоб перейти до налаштування кнопки
Авторизація
Кнопка Авторизація відкриває вікно для входу до кабінету студента. Студент може увійти до кабінету, якщо реєструвався на будь-який курс цього ж викладача на цьому домені.
Для налаштування кнопки та форми, перейдіть у вкладку Авторизація (Sign in).
Налаштуйте форму
Для стандартних полів — Email та пароль — ви можете змінити назву поля та текст, який показується в пустому полі. Для цього навпроти кожного поля натисніть на олівець.
Налаштуйте кнопку
Щоб змінити текст кнопки, натисніть на значок олівця у секції Кнопка авторизації (Login button).
Налаштуйте зовнішній вигляд
Налаштуйте зовнішній вигляд елемента. Виберіть розташування щодо контенту колонки: ліворуч, центром або праворуч.
В секції Зовнішній вигляд полів (Field appearance) виберіть, як буде виглядати віджет на сторінці вашого сайту.
| Вбудована форма (Static form) | Відображає розгорнуту форму авторизації або реєстрації на курс з полями для введення даних. |
| Модальне вікно (Modal form) | Відображає кнопки авторизації та реєстрації, при натисканні на які користувачу відкривається відповідна форма. |
Щоб змінити стиль кнопок, перейдіть до налаштувань кожної кнопки і виберіть стиль і розмір кнопки.
Щоб змінити стиль полів у вбудованій формі, натисніть Стиль полів (Field style).
Ви можете налаштувати такі параметри для зовнішнього вигляду кнопки:
| Фон модального вікна (Modal window background) | Змінює колір фону форми. Виберіть колір у піктограмі. |
| Скруглення (Rounding) | Змінює заокруглення кутів форми. Вкажіть значення в пікселях. |
| Внутрішній відступ (Inner padding) | Змінює внутрішній відступ між полями форми. Вкажіть значення в пікселях. |
| Колір тексту в формі (Form texts color) | Змінює колір тексту форми. Виберіть колір у піктограмі. |
| Зовнішній вигляд полів (Field appearance) | Змінює форму полів з текстом. Виберіть заокруглену або прямокутну форму. |
| Колір тексту в полі (Input field text color) | Змінює колір введеного тексту в полі. Виберіть колір у піктограмі. |
| Колір фону (Background color) | Змінює колір фону, на якому розміщується текст. Виберіть колір у піктограмі. |
| Колір рамки (Border color) | Змінює колір рамки форми. Виберіть колір у піктограмі. |
| Розмір полей (Field size) | Змінює розмір всіх полів. Доступні опції: малий (S), середній (M) і великий (L). |
| Колір посилань у формі (Form link color) | Змінює колір поля з посиланням. Виберіть колір у піктограмі. |
Також в полі Розташування (Alignment) ви можете обрати розташування щодо контенту колонки: ліворуч, по центру або праворуч.
Налаштуйте аналітику
Ви можете налаштувати передачу цілей з форми до подій Google Analytics та Facebook Pixel. Натисніть Налаштувати аналітику (Analytics settings).
Якщо у вас не активована аналітика, перейдіть за посиланням Як налаштувати (How to set it up).
Для активації передачі даних, в налаштуваннях сайту повинні бути додані коди пікселя Facebook та Google Analytics. Читайте докладніше: Як підключити Google Analytics до сайту та Як підключити піксель Facebook до сайту.
Якщо у вас активована аналітика, ви побачите два перемикача.
Якщо ви активували перемикач Передавати ціль у Google Analytics, введіть дані для полів Категорія (Category), Дія (Action), Ярлик (Label) — ці параметри будуть передаватися до аналітики у розділі Події.
Якщо ви активували перемикач Передавати ціль у піксель Facebook, автоматично буде сформована подія Complete Registration. Її ви зможете переглядати в Events Manager вашого бізнес-акаунту Facebook.
Скопіюйте ID
Для кожного елемента передбачений ідентифікатор (ID), який визначає елемент на сторінці. З його допомогою можна застосовувати стилі та скрипти, налаштувати показ попапів і відстежувати події по цьому елементу.
Щоб скопіювати ID, натисніть на нього. Щоб відредагувати ID, натисніть значок олівця.
Читайте детальніше: ID блоку та віджета.
Збережіть налаштування, а потім опублікуйте сайт.
Оновлено: 27.03.2024
або