Продажа курсов через сайт

Настройка оплаты по тарифу курса на минилендинге, созданном с помощью Salebot, поможет значительно упростить процесс покупки ваших знаний и управления финансовыми транзакциями.

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

В этой статье мы расскажем, как быстро и без лишних сложностей настроить оплату по тарифу курса на вашем сайте.

Выбор платежной системы

Для покупок учениками курсов в чат-боте можно выбрать любой платежный сервис:

Каждая платежная система имеет свои особенности подключения, описание и подробная инструкция которых существует в документации Salebot.

Чтобы найти статью по выбранной платежной системе:

а) либо перейдите в раздел "Эквайринг" и изучите необходимую инструкцию для подключения:

б) либо кликните на "подключить" на плашке сервиса в разделе "Платежные системы" в настройках проекта:

После клика на необходимую кнопку, откроется окно модальной формы, где уже лежит ссылка на статью с выбранной вами платежной системой:

После подключения платежного сервиса, переходите в настройки курса.

Как создать сайт для курса

Перед началом работы подготовьте ваш сайт: для этого перейдите в соответствующий раздел:

Далее нажмите на "+ Создать":

Выберите тип сайта "Многостраничный сайт", "Лендинг" или "Форма":

Если у вас уже собран сайт на платформе Salebot, перейдите в редктирование секций сайта, кликнув на карточку сайта:

Многостраничный сайт

При создании многостраничного сайта автоматически создаются несколько страниц следующего типа:

1) Главная страница;

2) Наша команда;

3) О нас.

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

Чтобы перейти в режим редактирования любой страницы сайта, кликните по строке с нужной страницей:

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

При клике на "Создать шаблон" откроется окно с выбором любого (в том числе пустого) шаблона страницы сайта:

Лендинг (форма, опросы и квизы)

При клике на создать "Лендинг" откроется форма с выбором шаблонов сайта:

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

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

В последующем при клике на плашку лендинга

вас будет переносить в раздел заявок, основной информации и настроек лендинга, при этом не будет отображаться множество страниц, как в многостраничном сайте, поскольку у лендинга страница только одна:

Если вдруг вам понадобится добавить еще несколько страниц в лендинг, сделав его тем самым многостраничным сайтом, то перейдите в настройки сайта и поменяйте тип сайта на "Многостраничный сайт" и сохраните настройки:

Аналогично отображается сайт в виде формы, опроса и квиза, однако при создании таких сайтов, вам не предлагается шаблон, поскольку в страницу сразу вставляется блок "Форма" или "Квиз" (в зависимости от выбранного типа сайта":

Как видно из примера, чтобы перейти в настройки сайта типа "Форма", необходимо кликнуть на кнопку "Редактировать".

Тогда вы перейдете в режим редактирования страницы, в которой создана одна секция "Форма" (или квизы и постраничные опросы в зависимости от выбранного типа сайта).

Секция "Форма" для записи на курс

Независимо от того, какой тип сайта вы создали "Многостраничный сайт", "Лендинг" или "Форма", режим редактирования страницы будет идентичен.

Чтобы создать секцию "Форма" для записи на курсы (как и любую другую секцию в конструкторе сайтов), необходимо навести на секцию, после которой вы расположите форму оплаты, чтобы появилась кнопка "+" для открытия меню с секциями:

Далее в открывшемся меню найдите секцию "Форма:

И далее кликните по "Форме", чтобы секция добавилась на ваш сайт:

Теперь перейдем к настройкам формы:

Здесь необходимо активировать чекбокс "Форма для регистрации ученика на курс":

Именно данный чекбокс открывает дальнейшие настройки по оплатам для курса:

1. Выберите курс, для которого необходимо создать форму на сайте:

1. Выбор тарифа:

Данное поле является одним из основных для оплат тарифов курса, поскольку здесь вы выбираете, для какого тарифа (или всех тарифов) будет работать форма на сайте.

1. Подсказка в форме:

Вы можете оставить текст подсказки, существующий по умолчанию, либо прописать собственный:

Также если вы не хотите, чтобы подсказка отображась в форме записи/оплаты на курс, то воспользуйтесь чекбоксом "Скрыть подсказку":

Вопросы формы

При создании формы в обязательном порядке необходимо создать вопросы для ввода клиентом email, телефона и имени.

Чтобы создать поле для ввода данных вашим пользователем, кликните по кнопке "Создать вопрос":

Далее вам откроется следующая форма заполнения вопроса:

Необходимо выбрать в выпадающем списке тип поля "Имя":

И активировать чекбокс "Обязательный вопрос":

Далее создайте второй вопрос:

Во втором вопросе укажите тип поля "Email":

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

Аналогично добавьте следующий вопрос с типом поля "Номер телефона":

Теперь ваша основная настройка формы записи и оплаты на курс завершена.

Тестирование

После настройки формы оплат и записи на курс, обязательно сохраните настройки сайта:

Далее перейдите в предпросмотр сайта:

И на сайте вы увидите форму записи/оплаты на курс:

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

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

Форма отработалась корректно: перенаправила клиента на страницу с обработкой заказа, а далее уже открылось окно с формой оплаты через выбранную платежный сервис.

Секция "Карточки курсов"

С помощью секции "Карточки курсов" вы сможете оставлять на сайте информацию о доступных в вашей школе курсах:

Чтобы добавить секцию "Карточки курса", нажмите на "+" в режиме редактирования вашего сайта:

Далее найдите в открывшемся меню секцию "Карточки курса" и кликните на него, чтобы секция добавилась на сайт:

Секция будет добавлена на сайт, а для вас откроется меню настроек контента:

Контент блока

Настройка контента блока "Карточки курса" состоит из выбора курса (курсов), который уже создан в проекте, для отображения на сайте и кастомизации элементов карточек.

Выбор курса

Выберите курсы, которые бы вы хотели продемонстрировать на своем сайте:

Для этого проставьте галочки на строке с названием необходимого курса:

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

Кастомизация

После того как вы выбрали необходимые курсы, переходите к кастомизации элементов карточки:

1. Тень

Для карточек курса в секции можно настроить интенсивность тени:

а) без тени:

б) легкая тень:

в) сильная тень:

1. Цветовая палитра для элементов карточки

Изменить цвета в карточке можно для фона, текста (как на самой карточке, так и в кнопках), а также добавить интерактивности карточкам, изменив цвета элементов при наведении на них курсором:

а) цвет текста: поможет изменить основной цвет текста в карточке (кроме кнопки):

б) фон карточки: для изменения цветового решения фона для карточки:

в) цвет обводки: для изменения цветового решения рамок карточек:

г) текст кнопки: для изменения цвета только текста кнопки в статичном состоянии:

д) фон кнопки: поможет изменить фоновый цвет для кнопки карточки курса:

Для динамичности сайта также можно изменить цвета кнопки при наведении курсора. Для этого можно воспользоваться настройками цвета при наведении:

Секция "Списки уроков"

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

Чтобы добавить блок для отображения списка уроков курса, перейдите в режим редактирования сайта и наведите на рабочее пространство, а затем нажмите на "+":

Справа откроется меню с доступными секциями сайта, где необходимо найти блок "Списки уроков":

Кликните по "Карточкам курсов", после чего откроется меню для настройки контента блока:

Вам достаточно выбрать необходимый курс, который уже создан в Сейлботе, в выпадающем меню и кликнуть на "Сохранить".

Далее перейдите в настройки для кастомизации контента блока:

Кастомизация

При клике по кнопке "Настройки" при наведении на секцию, открываются настройки для кастомизации контента и самого блока:

Какие настройки доступны:

1. Стиль списка уроков

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

1. Стиль нумерации

Стиль нумерации доступен для нового стиля отображения уроков курса, нумерация изменяется в самой карточке урока:

1. Иконки урока

Как добавить иконки?

Шаг 1. Перейдите в настройки урока:

Для этого зайдите в режим настройки курса и найдите вкладку "Уроки":

Далее нажмите на "Редактировать", после чего откроется страница урока для редактирования.

Шаг 2. Откройте настройки страницы урока.

Перейдите в настройках страницы урока в раздел "Основная информация":

Шаг 3. Загрузка превью урока

Раскройте в настройках основной информации список с настройкой изображений:

Загрузите изображение для превью урока:

Сохраните настройки:

1. Фоновый узор

Добавит объема и уникальности для карточек ваших уроков:

1. Скругление элементов

Значение задается в пикселях, скругляет углы карточек уроков:

1. Стиль карточек уроков

Помогает расположить карточки уроков в одну строку или в ряд с переносом или без.

1. Цвет фона и текста

В распоряжении обширная цветовая палитра, чтобы задать цвет фона карточки и цвет шрифта на карточке урока: