# Selling courses through a website By configuring course pricing and payment on a MaviBot-powered mini landing page, you can greatly simplify the purchase process for your clients and streamline the management of financial transactions. Creating a simple and intuitive payment process allows you to offer your courses without worrying about the technical side of integrating a payment form into your landing page.

In this article, you will learn how to quickly and easily configure course pricing and payment on your website without unnecessary complications. {% hint style="info" %} Please note! Before adding a course sign-up form to your page, make sure to set up your pricing plan first. We've covered how to configure pricing plans for online courses in a separate article. **ссылка** {% endhint %} ## How to create a website for the course Before getting started, prepare your website by navigating to the appropriate section:

Then, click "+Create":

Choose your website type: "Multi-page site," "Landing page," or "Form":

{% hint style="info" %} The detailed instructions on how to build a website from sections using the builder can be found in the "Business websites" section. **ссылка** {% endhint %} If you already have a website built on the **MaviBot** platform, go to editing the site sections by clicking on the website card:

### Multi-page website When creating a multi-page site, several pages of the following type are automatically created: 1. Home page; 2. Our team; 3. About us.

A header and footer are generated automatically, where you can add important information about your company. Both the header and footer appear on every page of the website, so you don’t have to create the same blocks on each individual page. To enter the editing mode for any page of the site, click on the row of the desired page.

You can also create additional pages for the website. To do this, click the button with the same name, then choose a page template, a form, or upload a page from a file:

{% hint style="info" %} Uploading a page from a file allows you to transfer website pages from another project. For more details on how to export and import website pages, see the section below "Export / Import website pages." ссылка {% endhint %} Clicking on "Create a template" will open a window where you can choose any page template, including a blank one:

### Landing page (forms, surveys and quizzes) Clicking on "Create a landing page" will open a form where you can choose from various site templates:

You can choose any website template you like and customize various settings such as fonts, background, and images. You can also add any additional website blocks (sections) you need. Unlike with a multi-page website, creating a landing page takes you directly to the page editor. Later, when you click on the landing page tab,

you’ll be taken to the section with submissions, main information, and landing page settings. Unlike a multi-page website, you won’t see multiple pages because a landing page consists of just one page.

If you ever need to add more pages to your landing page, turning it into a multi-page website, go to the site settings, change the site type to "Multi-page website," and save the changes:

The website behaves similarly when created as a form, survey, or quiz. However, unlike other website types, no template is offered at creation because the page automatically includes a "Form" or "Quiz" block, depending on the chosen website type.

As shown in the example, to access the settings of a "Form" type site, you need to click the "Edit" button.
This will take you to the page editing mode, where a single "Form" section is created (or quizzes and multi-page surveys, depending on the selected site type). {% hint style="info" %} You can add "Form," "Quiz," and "Survey" sections to your website (both multi-page and landing) at any time. {% endhint %} {% hint style="success" %} For further configuration, go to edit site mode. {% endhint %} ## The "Form" section for a course enrollment No matter which site type you choose—"Multi-page website," "Landing page," or "Form"—the page editing mode remains the same.

To create a "Form" section for course enrollment (or any other section in the site builder), hover over the section after which you want to add the payment form. Then click the "+" button that appears to open the sections menu:

Next, find the "Form" section in the menu that opens:

Then click on "Form" to add the section to your site:

Now, let's configure the form:

Here, you need to activate the checkbox labeled "Form for student course enrollment":

This checkbox unlocks further payment settings for the course: 1. Select the course for which you want to create a form on the website:

2. Choose a plan:

This field is one of the key settings for course plan payments, as it lets you choose which plan (or all plans) the form on the website will apply to. 3. Form hint:

You can leave the default hint text or write your own:

If you don’t want the hint to appear in the course enrollment/payment form, use the "Hide hint" checkbox:

### Form questions When creating a form, it’s required to add fields for the user’s email, phone number, and name.
To add a data entry field for your users, click the "Create a question" button:

Then, the question setup form will appear:

You need to select the "Name" field type from the dropdown list:

And activate the "Required question" checkbox:

Next, create the second question:

For the second question, select the field type "Email":

This question must also be required; otherwise, the student won’t be able to access your course or complete automatic enrollment.

Similarly, add the next question with the field type "Phone number":

Your main setup for the course enrollment and payment form is now complete. {% hint style="info" %} Next, you can customize the section as you wish: change the background and button colors, and add other question fields.
For more about customization and all features of the "Form" section, see the "Form responses" section. **ссылка** {% endhint %} ### Testing Be sure to save your site settings after configuring the payment and enrollment form.

Then, go to the website preview:

You will see the course enrollment/payment form on the website.

Let’s test the form by filling in your details in the empty fields:

Now, submit the data to the system and proceed to the application and payment form.

The form worked correctly: it redirected the client to the order processing page and followed by a payment window through the selected payment service. ## The "Course cards" section You can display information about the courses available at your school on the website using the "Course cards" section:

To add the "Course cards" section, click the "+" button in your website editing mode:

Next, find the "Course cards" section in the menu that appears and click on it to add the section to your website:

The section will be added to your site, and the content settings menu will open for you:

### Block content Configuring the "Course Cards" block involves selecting one or more courses already created in the project to display on the website, as well as customizing the card elements. {% hint style="info" %} How to create courses on the MaviBot platform is explained in the "Online courses" section. **ссылка** {% endhint %} ### Course selection Select the courses you’d like to showcase on your website:

To do this, check the box next to the name of each course you want to include:

The selected courses will immediately appear on your website page with the cover image you set in the course settings. ### Customization Now, let's customize the card elements after selecting the desired courses:

1. **Shadow**

You can adjust the shadow intensity for the course cards in the section: а) without shadow:

b) light shadow:

c) strong shadow:

2. **Color palette for card elements**

You can change colors on the card for the background, text (both on the card itself and on buttons), and add interactivity by changing element colors when hovered over with the cursor:

a) Font color: helps change the main text color on the card (excluding its button):

b) Card background: to change the background color of a card.

c) Border color: to change the color scheme of the card borders.

d) Button text: to change the color of the button text in its normal (static) state.

e) Button background: allows you to change the background color of the course card button.

To add interactivity to your site, you can also change the button colors on hover. Use the hover color settings for this.

{% hint style="success" %} Now you know how to display your existing MaviBot courses on your website using the "Course cards" section. {% endhint %} {% hint style="info" %} Learn about background settings and display options in the article "Universal section settings." **ссылка** {% endhint %} ## The "Lesson Lists" section Along with the online course cards, you can add lesson lists to your website page. Simply select the desired course in the section, and all lessons will be displayed:

To add a block for displaying the course lesson list, enter the site editing mode, hover over the workspace, and then click the "+" button:

A menu with available site sections will open on the right. You should find the "Lesson lists" block there:

Click on "Course cards" to open the content settings menu for the block:

Just select the desired course (already created in MaviBot) from the dropdown menu and click "Save."
Then go to the settings to customize the block's content.

### Customization Hover over the section and click "Settings" to open the customization panel for both content and block appearance.

You can configure the following settings: 1. Lesson list style

By default, the lesson list is displayed in the new format. If preferred, you can switch to a more concise, classic display style.

2. Numbering style

This setting is available only for the new lesson list layout. The selected numbering type is applied inside each lesson card.

3. Lesson icons

{% hint style="success" %} Displayed only if a preview has been uploaded in the lesson settings of the course. {% endhint %} #### How to add icons Step 1. Go to the lesson settings: To do this, enter the course settings mode and find the "Lessons" tab:

Next, click "Edit" to open the lesson editing page. Step 2. Open the lesson page settings.

In the lesson page settings, go to the "Basic Information" section:

Step 3. Lesson preview upload In the "Basic information" settings, expand the image settings dropdown:

Upload an image for the lesson preview:

Save your settings:

{% hint style="success" %} Done! Now, lesson previews will be displayed as icons in the "Lesson lists" section on your website. {% endhint %}

4. Background pattern

Adds depth and uniqueness to your lesson cards:

5. Element rounding

The value is set in pixels and rounds the corners of the lesson cards:

6. Lesson card style

Helps arrange lesson cards in a single row or multiple rows, with or without wrapping. 7. Background and text color

You have access to an extensive color palette to set the background color and font color on the lesson card:

{% hint style="success" %} Now you know how to add lesson lists to your website and customize the section’s content. {% endhint %} {% hint style="info" %} Read the article "Universal section settings" to learn about background and display settings. **ссылка** {% 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/lms/how-to-sell-courses/selling-courses-through-a-website.md?ask= ``` 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.