# Як створити кнопку

## Робота з кнопками-вкладками

<div data-with-frame="true"><figure><img src="/files/2d86332de6f3552babb0a1b71a272440578ad8ad" alt="" width="563"><figcaption></figcaption></figure></div>

Кнопки можна створити двома способами: за допомогою **налаштувань кнопок у блоці**, або використовуючи **зв’язок між блоками**.

Перший варіант є більш функціональним і зручним у роботі.

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

Щоб створити кнопки безпосередньо з блоку, відкрийте потрібний блок і перейдіть до **Кнопки** :

<div data-with-frame="true"><figure><img src="/files/20037355e4216c67f1b400193b487775d5932523" alt=""><figcaption></figcaption></figure></div>

Після натискання "+ Додати кнопку" введіть текст, що відображатиметься на кнопці, у полі "Текст".

<div data-with-frame="true"><figure><img src="/files/b4ddf33578d2a9d210bab1f323306d97ab6b0ffb" alt="" width="563"><figcaption></figcaption></figure></div>

Далі виберіть функцію кнопки.

Щоб використовувати кнопку для простого переходу до іншого стану (без платежів, запитів номера телефону тощо), залиште для функції значення **"За замовчуванням"**.

{% hint style="info" %}
**Дізнайтеся більше про інші функції кнопок у наших статтях:**

* [кнопка "Запросити номер телефону"](/doc/uk/chatbot/builder/knopki/phone.md)
* [кнопка оплати](broken://pages/bc45b6d1642798257b4aaa6450e5e5ef225bb2dc)
* [кнопка запиту місцезнаходження](/doc/uk/chatbot/builder/knopki/knopka-zapitu-geolokaciyi.md)
* [кнопка поділу](/doc/uk/chatbot/builder/knopki/knopka-podilitisya.md)
* [кнопка зворотного дзвінка](broken://pages/79c7e4428163ce6e89112b26937c13e922f8d2b9)
* [кнопка Web App](/doc/uk/chatbot/builder/knopki/webapp.md)
  {% endhint %}

Натисніть **"Додати"** кнопку, щоб підтвердити та додати її до налаштувань блоку.

<div data-with-frame="true"><figure><img src="/files/9a8a2bd69b2df3f69d11dfecef943aa80fb0b624" alt="" width="563"><figcaption></figcaption></figure></div>

Є два основні типи кнопок:

* **Кнопки клавіатури:** З’являються під полем введення та зникають після натискання або після введення повідомлення.
* **Інлайн-кнопки:** З’являються всередині бульбашки повідомлення і залишаються видимими після натискання.

Деякі месенджери також підтримують режим **Авто** , який автоматично вибирає найкращий тип кнопки для платформи.

<div data-with-frame="true"><figure><img src="/files/9b7d8e5f21ca0fccce178ebd8baae3fd6b3fb23e" alt=""><figcaption></figcaption></figure></div>

Бот однаково обробляє натискання для обох типів кнопок. Ви можете додавати більше кнопок двома способами:

1. Натисніть **"+"** кнопку праворуч від наявної кнопки.

<div data-with-frame="true"><figure><img src="/files/ad0b14420e8819b51a0475b237dc97460079c81f" alt="" width="563"><figcaption></figcaption></figure></div>

**Результат:** Нова кнопка з’являється в тому самому рядку.

<div data-with-frame="true"><figure><img src="/files/bf23899266f986ae7227dcd9db04e55075fa3839" alt="" width="563"><figcaption></figcaption></figure></div>

2. Якщо натиснути **"+ Додати кнопку",**

<div data-with-frame="true"><figure><img src="/files/b847964bf1e8ac7847be26720dadc3f22260c374" alt="" width="563"><figcaption></figcaption></figure></div>

то нова кнопка буде додана під попередньо створеною:

<div data-with-frame="true"><figure><img src="/files/cf4e68918d8ccb1802e8428aef6980e965334a8f" alt="" width="563"><figcaption></figcaption></figure></div>

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

<div data-with-frame="true"><figure><img src="/files/bfed3fc6ec76e210cee1441690718d120e58759f" alt="" width="563"><figcaption></figcaption></figure></div>

Ви також можете легко змінювати порядок кнопок у цьому полі, утримуючи ліву кнопку миші та перетягуючи кнопку в нове положення.

{% hint style="success" %}
**Зверніть увагу!**&#x20;

Щоб відобразити зв’язок між блоками як кнопку клавіатури замість створення окремої кнопки всередині блоку, виконайте такі дії:

1. Увімкніть перемикач **"Показувати зв’язки як кнопки"** прапорець.
2. Встановіть тригер на конекторі, що з’єднує два блоки.

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

Для детального посібника, будь ласка, зверніться до статті: [**"Зв’язок із кнопкою"**](/doc/uk/chatbot/builder/zyednannya/buttons.md).
{% endhint %}

Ця версія передбачає, що користувачеві потрібно створити ручну кнопку, тоді як кнопки-зв’язки вимкнені.

> 1. У **Розширені** меню налаштувань, знайдіть **"Показувати зв’язки як кнопки"** перемикач і переконайтеся, що він увімкнений **ВИМК.**.
> 2. Тепер натисніть **"+ Додати кнопку"** щоб створити стандартну кнопку всередині блоку.

<div data-with-frame="true"><figure><img src="/files/98a0fb2b5a7db0462989cfbee4c22cabe074cd9f" alt="" width="563"><figcaption></figcaption></figure></div>

### Як правильно писати назву кнопки

Під час створення кнопки ви завжди обираєте найцікавіші та найпривабливіші назви, щоб привабити клієнтів. Однак ви повинні дотримуватися цього правила: <mark style="color:red;">**назва кнопки не повинна містити лапок**</mark>**.**

<mark style="color:red;">**Неправильний варіант:**</mark>

<div data-with-frame="true"><figure><img src="/files/e9bfc43dc0c192b33ff83cbea6027dfe400ebef6" alt="" width="563"><figcaption></figcaption></figure></div>

Якщо потрібно виділити слова, можна використовувати одинарні лапки.

<mark style="color:green;">**Правильний варіант:**</mark>

<div data-with-frame="true"><figure><img src="/files/26091d5430ed76f10e1e2ce8cc3c3ebaf619df35" alt="" width="326"><figcaption></figcaption></figure></div>

Ви також можете зробити кнопки яскравішими та барвистішими, використовуючи емодзі:

<div data-with-frame="true"><figure><img src="/files/674c61cf291f713a11e6a764402154cb87f6bce0" alt="" width="354"><figcaption></figcaption></figure></div>

## Як налаштувати колір кнопки

За потреби ви можете вказати колір кнопки — це працює у Viber та Онлайн-чаті.

<div data-with-frame="true"><figure><img src="/files/c2ac9e2943bb6a88df0112ee9f19d6df55b5e7d5" alt="" width="563"><figcaption></figcaption></figure></div>

Ви можете вибрати будь-який колір кнопки у Viber або Онлайн-чаті — натисніть на чорний квадрат, щоб відкрити палітру кольорів:

<div data-with-frame="true"><figure><img src="/files/503a8b9a0f9eba54c54c2c25ed674ccc159054ea" alt="" width="563"><figcaption></figcaption></figure></div>

Ось як виглядають кольорові кнопки в онлайн-чаті.

<div data-with-frame="true"><figure><img src="/files/51c0cf02822250db1de0d11add9cafb3414c41e3" alt="" width="563"><figcaption></figcaption></figure></div>

### Поля розширених налаштувань кнопки

<div data-with-frame="true"><figure><img src="/files/cd3be73aad334179b2d02a31988073b93a12fbdc" alt="" width="419"><figcaption></figcaption></figure></div>

### Прапорець відображення кнопок

**Показувати кнопки:** за замовчуванням цей перемикач увімкнений, і кнопки відображаються клієнту.

<div data-with-frame="true"><figure><img src="/files/0b0d4fd19b785224e2ae9d3169a0894f32588031" alt="" width="563"><figcaption></figcaption></figure></div>

### Показувати конектори як кнопку&#x20;

**Показувати конектори як кнопки:** коли ввімкнено (за замовчуванням), усі тригери конекторів із цього блоку відображаються користувачеві як кнопки.

<div data-with-frame="true"><figure><img src="/files/6483e70f896d252be205d4910abc713aa933dd5a" alt="" width="563"><figcaption></figcaption></figure></div>

### Підказка для месенджерів без кнопок

Поле **"Підказка для месенджерів без кнопок"** поле надає альтернативний текст для месенджерів, що не підтримують кнопки (наприклад, стандартний WhatsApp). Це підказує користувачам, що вводити вручну.

<div data-with-frame="true"><figure><img src="/files/ea1eb9d0daa3a188c99c105ce0700b7c1b9b50c5" alt="" width="563"><figcaption></figcaption></figure></div>

Оскільки WhatsApp не підтримує кнопки, використовуйте **"Підказка для месенджерів без кнопок"** поле, щоб надати числове меню. Цей текст, який відображається лише у WhatsApp, дає змогу користувачам взаємодіяти з ботом, вводячи числа.

<div data-with-frame="true"><figure><img src="/files/b45e5d655a1570a6dc3f4c2b1c5934909bf44ce4" alt="" width="563"><figcaption></figcaption></figure></div>

### Розширені налаштування кнопки – поле коду кнопки

Поле **"Розширені налаштування кнопки (код кнопки)"** можна використовувати для створення унікальних кнопок за допомогою коду.

<div data-with-frame="true"><figure><img src="/files/3763eb7ee9f21f273a99d29603da56354fdff79d" alt="" width="563"><figcaption></figcaption></figure></div>


---

# 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/uk/chatbot/builder/knopki/create.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.