Как добавить виджет для авторизации и записи на курс

В конструкторе лендингов 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 блока и виджета.

Сохраните настройки, а затем опубликуйте сайт.

    Оцените, насколько полезна статья "Как добавить виджет для авторизации и записи на курс"

    Оценка: 4 / 5 (6)

    Назад

    Как добавить меню на сайт

    Далее

    Как добавить на сайт курса виджет с отзывами

    Начните пользоваться сервисом SendPulse прямо сегодня