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

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

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

<figure><img src="/files/1fb75de802f23488b0391c2c69d513586f3e86d1" alt="" width="563"><figcaption></figcaption></figure>

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

{% hint style="info" %}
Обратите внимание!

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

О том, как настроить тарифные планы для онлайн-курсов, мы рассказали в отдельной статье. <mark style="color:красный;">**ссылка**</mark>
{% endhint %}

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

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

<figure><img src="/files/ebef10c998e5379509c0cf9adfe96c50a84d9bcd" alt="" width="444"><figcaption></figcaption></figure>

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

<figure><img src="/files/246bdd81be822ea6b836f5d5b3d44673e91a69de" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/23fd2ff6fc13a06d67a642370d707af3aee5b756" alt="" width="358"><figcaption></figcaption></figure>

{% hint style="info" %}
Подробную инструкцию по созданию сайта из блоков с помощью конструктора можно найти в разделе «Сайты для бизнеса». <mark style="color:красный;">**ссылка**</mark>
{% endhint %}

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

<figure><img src="/files/5a3b1f1f56e0052fc764555525efe0c7b59a5634" alt=""><figcaption></figcaption></figure>

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

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

1. Главная страница;
2. Наша команда;
3. О нас.

<figure><img src="/files/2dad466446ba27bbf3ade8f2b1bfa13607a0520c" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/0226d16377f611e559087a74e09423458a41e84b" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/b05efc12f3bf64eaaa88601e5a42a107ecf24d70" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Загрузка страницы из файла позволяет перенести страницы сайта из другого проекта.

Подробнее об экспорте и импорте страниц сайта читайте в разделе ниже «Экспорт / импорт страниц сайта». ссылка
{% endhint %}

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

<figure><img src="/files/caf8c75899b1d67ee5ff7c1f8a07c0afdda20eb0" alt=""><figcaption></figcaption></figure>

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

При нажатии на «Создать лендинг» откроется форма, где можно выбрать один из различных шаблонов сайта:

<figure><img src="/files/aaa42bc0050e812792432a5b155ef61b88849ff7" alt=""><figcaption></figcaption></figure>

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

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

Позже, когда вы нажмёте на вкладку лендинга,

<figure><img src="/files/c4dbcb0185e97ecc043b88b2d338bfa02bb5bac3" alt="" width="563"><figcaption></figcaption></figure>

&#x20;вы попадёте в раздел с заявками, основной информацией и настройками лендинга. В отличие от многостраничного сайта, вы не увидите несколько страниц, потому что лендинг состоит всего из одной страницы.

<figure><img src="/files/c85f60e57283b84142efe5b6a1c6c332ea2153be" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/ff1b6afd95139155a208b1f3ac6dec6dfda14f08" alt=""><figcaption></figcaption></figure>

Сайт ведёт себя аналогично, если он создан как форма, опрос или квиз. Однако, в отличие от других типов сайтов, при создании шаблон не предлагается, поскольку страница автоматически включает блок «Форма» или «Квиз» в зависимости от выбранного типа сайта.

<figure><img src="/files/54bb00ca576a9c63c2c8a0bf25b8370248236b3b" alt=""><figcaption><p>Создание типа сайта «Форма»</p></figcaption></figure>

Как показано в примере, чтобы перейти к настройкам сайта типа «Форма», нужно нажать кнопку «Редактировать». <br>

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

{% hint style="info" %}
Вы можете в любой момент добавить на сайт секции «Форма», «Квиз» и «Опрос» (как на многостраничный сайт, так и на лендинг).
{% endhint %}

{% hint style="success" %}
Для дальнейшей настройки перейдите в режим редактирования сайта.
{% endhint %}

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

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

<figure><img src="/files/9baf0104ad2128b9b8a2985f82cb75309f60c593" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/97544096bc86efbc7965404816704c399496f412" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/9726c2004fb37b873994e5b0c05168aa68ac7e37" alt="" width="297"><figcaption></figcaption></figure>

Затем нажмите на «Форма», чтобы добавить секцию на сайт:

<figure><img src="/files/12587c3e8b0b2acdc3f80334e6f01b33c387b321" alt="" width="563"><figcaption></figcaption></figure>

Теперь настроим форму:

<figure><img src="/files/fc4b979b33c737178770a2b7fa3f9f13e617ab51" alt="" width="563"><figcaption></figcaption></figure>

Здесь нужно активировать чекбокс «Форма для записи студента на курс»:

<figure><img src="/files/547b924751b7eca0838d63960e6160fd67ed7023" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/e9c38d2ba14acfddea857a675f40bb72c110f00f" alt="" width="563"><figcaption></figcaption></figure>

2. Выберите план:

<figure><img src="/files/1fe795f2f959f51d4e4898b2c2db190f13f176de" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/3ec3ae8b4861709959c927e8087369e39044747f" alt="" width="563"><figcaption></figcaption></figure>

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

<div><figure><img src="/files/bac9af3bd52ad3916f843d1c021504bcbde37134" alt=""><figcaption></figcaption></figure> <figure><img src="/files/98f69765bc54fdfb1b974812cd41360a41f40104" alt=""><figcaption></figcaption></figure></div>

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

<figure><img src="/files/8eafa8a8b91876143b2e53406a794b38d0d24dca" alt="" width="362"><figcaption></figcaption></figure>

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

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

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

<figure><img src="/files/6592507ad41696b0f31015b00288bd73e9af05c1" alt="" width="375"><figcaption></figcaption></figure>

После этого появится форма настройки вопроса:

<figure><img src="/files/c906e9b139c74643f666b31b0e7917566e40e528" alt="" width="563"><figcaption></figcaption></figure>

В выпадающем списке нужно выбрать тип поля «Имя»:

<figure><img src="/files/a25b37edcd004f5b65dbd340207d09e5426d6eaf" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/7a6c96bde547aa6625945bc9bc8b8efb97e3eec4" alt="" width="563"><figcaption></figcaption></figure>

Затем создайте второй вопрос:

<figure><img src="/files/44b0056e1933d3f415db6f866bb9763d4c84bb10" alt="" width="375"><figcaption></figcaption></figure>

Для второго вопроса выберите тип поля «Email»:

<figure><img src="/files/50b0fa1ac55abcf579c583a1a494760a7b7bd04c" alt="" width="563"><figcaption></figcaption></figure>

Этот вопрос тоже должен быть обязательным; иначе студент не сможет получить доступ к вашему курсу или пройти автоматическую запись.

<figure><img src="/files/f66ddbf97f1fb1431918705405ceedcab2d51686" alt="" width="353"><figcaption></figcaption></figure>

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

<figure><img src="/files/d16c65f034066c94c947f06a7b0b7ae3b72f98b4" alt="" width="563"><figcaption></figcaption></figure>

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

{% hint style="info" %}
Далее вы можете настроить секцию по своему усмотрению: изменить цвета фона и кнопок, а также добавить другие поля вопросов. <br>

Подробнее о настройке и всех возможностях секции «Форма» читайте в разделе «Ответы формы». <mark style="color:красный;">**ссылка**</mark>
{% endhint %}

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

Обязательно сохраните настройки сайта после конфигурации формы оплаты и записи.

<figure><img src="/files/f84b68d45271f2459002600aaeff6553d7706732" alt="" width="563"><figcaption></figcaption></figure>

Затем перейдите к предпросмотру сайта:

<figure><img src="/files/a82a02c1385ceeb1dbbf710d1ec87b09f0bc55a8" alt="" width="407"><figcaption></figcaption></figure>

На сайте вы увидите форму записи/оплаты курса.

<figure><img src="/files/33ccf512e3089ac283b617f930a1012803c4271a" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/34f9131d7212e3054b82737529696e76b8cf4d38" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/2fc8f30f18cab6ba9dd6ad9de300f73a5dc6450d" alt=""><figcaption></figcaption></figure>

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

## Секция «Карточки курсов»

Вы можете показать информацию о курсах, доступных в вашей школе, на сайте с помощью секции «Карточки курсов»:

<figure><img src="/files/61735c0a6c4e0245eb254e7c478722311551997e" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/8908bcb005e8e84397546f0af6069b7ee2f1dcaf" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/49cbab57cf79c2905958ef3fb8e6b46cc5e8d6fa" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/8540699a4bdd6582dddb1b0ddbfe67b78f2baac8" alt=""><figcaption></figcaption></figure>

### Содержимое блока

Настройка блока «Карточки курсов» заключается в выборе одного или нескольких курсов, уже созданных в проекте, для отображения на сайте, а также в настройке элементов карточки.&#x20;

{% hint style="info" %}
О том, как создавать курсы на платформе MaviBot, рассказано в разделе «Онлайн-курсы». <mark style="color:красный;">**ссылка**</mark>
{% endhint %}

### Выбор курсов

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

<figure><img src="/files/10998a35116ebcf25efe8969020068b44a2dfb2b" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/7ecdd0583c1cbf5c1eea974fa35b17ae76182c99" alt="" width="563"><figcaption></figcaption></figure>

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

### Настройка

Теперь настроим элементы карточки после выбора нужных курсов:

<figure><img src="/files/23b2ced6872ab4579305040503ea8a85302a6f4d" alt="" width="563"><figcaption></figcaption></figure>

1. **Тень**

<figure><img src="/files/9d45f57bb513f56c3274f44e5c781bc97e755ce3" alt="" width="563"><figcaption></figcaption></figure>

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

а) без тени:

<figure><img src="/files/0d3d63c134be48c1312e3c7adc5717ad27599404" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/60629e8adb1ecc96ce6f120df58449bfbae0ee04" alt=""><figcaption></figcaption></figure>

в) сильная тень:&#x20;

<figure><img src="/files/d208f62d2defe52cc2f193e79c5c48758d76a34d" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/d733223c0e81b228686c17a0a3bfbeea85cac22c" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/b8d1ebc474b27aa641f1d44dc362d4cbf95372b0" alt="" width="375"><figcaption></figcaption></figure>

а) Цвет шрифта: помогает изменить основной цвет текста на карточке (не включая кнопку):

<figure><img src="/files/366208c75f945d2ddac9d135a430758b8bd93a6c" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/28c825acfb660a1bedd9d88b0a0780f3f0d35933" alt=""><figcaption></figcaption></figure>

в) Цвет рамки: для изменения цветовой схемы рамок карточки.

<figure><img src="/files/ef2ec3246be29b0b2551fffe256bc2f591533ce7" alt=""><figcaption></figcaption></figure>

г) Текст кнопки: для изменения цвета текста кнопки в её обычном (статическом) состоянии.

<figure><img src="/files/f1488310a8108af04e30a6ab29f39ba62e7a3c6f" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/5d9f85ce303dfe2edb8f8d7407bf88db12fb5311" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0f91c7f8a6778b6a92cd9e195bd1e50b948f447c" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Теперь вы знаете, как показывать уже созданные курсы MaviBot на своём сайте с помощью секции «Карточки курсов».
{% endhint %}

{% hint style="info" %}
О настройках фона и вариантах отображения читайте в статье «Универсальные настройки секции». <mark style="color:красный;">**ссылка**</mark>
{% endhint %}

## Секция «Список уроков»

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

<figure><img src="/files/17febf3efb8c0af0e27eea43cfa747414d739ed4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/3d641889e2b6ce39f911d99e418d25de111fd2de" alt=""><figcaption></figcaption></figure>

Справа откроется меню с доступными секциями сайта. Там нужно найти блок «Списки уроков»:

<figure><img src="/files/9449cec2844eba7c7d04e8263a793dbf6bb38ae5" alt=""><figcaption></figcaption></figure>

Нажмите на «Карточки курсов», чтобы открыть меню настроек содержимого блока:

<figure><img src="/files/82b16ff72794c82e63c1b808fcfc6825fd02466c" alt=""><figcaption></figcaption></figure>

Просто выберите нужный курс (уже созданный в MaviBot) из выпадающего меню и нажмите «Сохранить». <br>

Затем перейдите в настройки, чтобы настроить содержимое блока.

<figure><img src="/files/23a8e974ce034113a6669d5ee05f5dec40245e31" alt=""><figcaption></figcaption></figure>

### Настройка

Наведите курсор на секцию и нажмите «Настройки», чтобы открыть панель настройки как содержимого, так и внешнего вида блока.

<figure><img src="/files/23b8386f315ae2127511b794d90520717c9ffb8b" alt=""><figcaption></figcaption></figure>

Вы можете настроить следующие параметры:

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

<figure><img src="/files/b19494887c31e136a5dd81e0f78dd06c1ff37609" alt="" width="563"><figcaption></figcaption></figure>

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

<div><figure><img src="/files/a7cdd5bbb2e093933c3537ad94a1fd0f760557fd" alt="" width="563"><figcaption><p>Новый стиль</p></figcaption></figure> <figure><img src="/files/0ef8e4b933fb93c89eb3813288b780fafe22e346" alt="" width="563"><figcaption><p>Классический стиль</p></figcaption></figure></div>

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

<figure><img src="/files/0ff5e10e3d2eac87d8c4570ee020287106a6f0e5" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/57948b1cc442ac910d4e3591196a57a3378142ca" alt="" width="563"><figcaption></figcaption></figure>

3. Иконки уроков

<figure><img src="/files/1c835a790b90cc8eac30b88ae8bdbcfca5a780a2" alt="" width="563"><figcaption></figcaption></figure>

{% hint style="success" %}
Отображаются только если в настройках урока курса загружен превью-изображение.
{% endhint %}

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

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

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

<figure><img src="/files/c68b1e695cab2d687ac2eb5b162d0b5e06566e88" alt=""><figcaption></figcaption></figure>

Затем нажмите «Редактировать», чтобы открыть страницу редактирования урока.

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

<figure><img src="/files/f8b28336c43d476236a4312db9cdedc4db6ee31f" alt=""><figcaption></figcaption></figure>

В настройках страницы урока перейдите в раздел «Основная информация»:

<figure><img src="/files/94661dc52c674b8b670ab62f31c31520a007c4d5" alt=""><figcaption></figcaption></figure>

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

В настройках «Основной информации» раскройте выпадающий список настроек изображения:

<figure><img src="/files/c7f65abeb122c3e4c3f6dda3389cc8e10d559e16" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/9ffe57415c78976e8888e1385479ed5bcfa20061" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/8c2cbd11e30e91d67bf25fb6c58ee3569835b98b" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Готово! Теперь превью уроков будут отображаться как иконки в секции «Списки уроков» на вашем сайте.
{% endhint %}

<figure><img src="/files/c89c3288e8f54cc4c6d46d52f17e778441c03599" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/c32ad606916546c59497541a7971054114315c42" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/458a08097872a02cf9c4b0d8ac70afa848890bf2" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="/files/8ade7de5b98e3378fbc2177238823e6ff7aed6d2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="/files/0efdc2559fe644a119f2c560f743c76f11d01f58" alt="" width="563"><figcaption></figcaption></figure>

6. Стиль карточки урока

<figure><img src="/files/52364145469d17522310bd1d0b8668f01d9e3e4a" alt="" width="563"><figcaption></figcaption></figure>

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

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

<figure><img src="/files/97d94891aa828365fd4a591fc893928950468628" alt="" width="440"><figcaption></figcaption></figure>

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

<figure><img src="/files/8cba8d710320df1b015dbc1fab42812cf5fd4f52" alt="" width="450"><figcaption></figcaption></figure>

{% hint style="success" %}
Теперь вы знаете, как добавить списки уроков на сайт и настроить содержимое секции.
{% endhint %}

{% hint style="info" %}
Читайте статью «Универсальные настройки секции», чтобы узнать о настройках фона и отображения. <mark style="color:красный;">**ссылка**</mark>
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mavibot.ai/doc/ru/lms/kak-prodavat-kursy/prodazha-kursov-cherez-sait.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.