Как добавить виджет для авторизации и записи на курс
В конструкторе лендингов SendPulse вы можете использовать виджет Авторизация, чтобы на страницу записи на курс со своим уникальным дизайном добавить кнопки регистрации на курс или входа в кабинет студента.
К примеру, вы можете создать многостраничный сайт о школе или эксперте, добавить различные курсы и презентовать их в необходимом оформлении.
Вы можете добавить виджет только на сайт с привязанным курсом. Для этого необходимо перейти на сайт курса, создать новую страницу и добавить в нее виджет.
Добавьте элемент
Добавьте виджет Авторизация (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. Его вы сможете просмотреть в Менеджере событий вашего бизнес-аккаунта Facebook.
Скопируйте ID
Для каждого элемента предусмотрен идентификатор (ID), который определяет элемент на странице. С его помощью можно применять стили и скрипты, настраивать показ попапов и отслеживать события по этому элементу.
Чтобы скопировать ID, нажмите на него. Чтобы отредактировать ID, нажмите значок карандаша.
Узнайте больше: ID блока и виджета.
Сохраните настройки, а затем опубликуйте сайт.
Обновлено: 27.03.2024
или