# Buttons section

Using the "Buttons" block, you can add buttons with the ability to call or email through the device's built-in applications, as well as buttons with links to additional pages and the ability to accept payments on the site page.

{% hint style="success" %}
You can add a privacy policy and an offer to custom (customizable) buttons.

To do this, just tick the appropriate checkboxes and attach the links.
{% endhint %}

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

## How to create a button

In the site editing mode, click "+", then a side menu will open to add sections.:

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

During clicking on the button section, a standard template with two buttons will be added, in the settings of which you can edit, add or remove the buttons, add a link to the privacy policy and (or) offers:

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

To open the button internal settings, click on the button itself:

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

Next, a modal window opens with the button settings:

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

In the button creation window, you can select its function:

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

We will describe the functions of each button below.

You can also select the color of the button ( the text color, background color during hovering and the general background and text in a calm position, etc.), load the button icon in the same window:

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

In addition, the buttons can be set in width and rounding. Numeric values must be entered in these fields to configure the button.

### How to add buttons

To add buttons located on the same line, click on the "+" to the right of the button:

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

If you need to add a button under the previously added button, click on "+ Add Button":

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

### A button with a payment function

To create payment buttons on the website, you must first connect payment systems to the platform in the project.

{% hint style="info" %}
Read how to connect the payment system to the project [here. ](/integrations/payment.md)
{% endhint %}

A button with a payment function will help you accept payments for goods or services that are presented on your website, without connecting the chatbot to messengers.

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

Using this button, it is possible to add a payment function to the site through a payment system that is convenient for you. Next, specify the amount of the product, its name, and the redirect link after successful payment.

{% hint style="info" %}
Attention!

In the drop-down menu of the payment systems line, only those integrations that you have enabled in the "Payment systems" section of the project will be available.
{% endhint %}

#### Phone function button

Create a new button, select the Phone function and specify the phone number where the call should be made when the button is clicked:

Clicking on the button on mobile devices opens a window for selecting an application:

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

### Mail function button

Create a new button with the Mail function and specify the email address in the settings:

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

During clicking on the button, applications for sending emails will automatically open, and mail from the button settings will automatically be inserted into the Recipient field.

### Link function button

{% hint style="danger" %}
To transfer data and launch the bot, use the "Application form with messenger buttons" section!
{% endhint %}

Create a new button and select the Link function. Clicking on the button opens the page specified in the button settings.

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

### Pricing plan function of the course button

You can also add payment fees for configured online courses in the MaviBot in the button's functions:

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

Select the course, and then the pricing plan at which the payment will be made upon clicking on the button.

{% hint style="info" %}
All settings for payment, payment system, and the cost of pricing plan of the course  are made in the Courses section.

For more information on how to set up course rates, see the article "[Online course plans](/lms/builder/plans.md)".
{% endhint %}

### Online booking function button

The button has the function of opening an online entry widget for online booking of free lots for services by your clients.

To do this, you need to set up the branch and services for online booking and the online booking widget in advance.&#x20;

{% hint style="info" %}
We talked about setting up the services section in the [ "Online booking"](/booking/settings.md) article.
{% endhint %}

In the button settings, select the "Online booking" function and in the drop-down menu, select the widget that you want to display when you click on the button.

### Link to messengers function button

In order for a client to switch from your website to a bot in messengers, for example, telegram or WA, you can use the "link to messenger" button function or use the "Form" section.

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

{% hint style="info" %}
Read more about the ["Form](/websites/sites/blocks/forms.md)" section in the article of the same name.&#x20;
{% endhint %}

After selecting the function of the button, select the messenger that the client will switch to after clicking on the customer button.


---

# 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/websites/sites/blocks/buttons.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.