# Как создать виджет

{% hint style="info" %}
Предварительно нужно создать филиал и настроить услуги, назначив их сотрудникам. Как это сделать, рассказали в разделе "[Онлайн-запись](https://docs.salebot.pro/onlain-zapis)"
{% endhint %}

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FPQoSVPCpxXjHWKyiH26r%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.14.56.png?alt=media&#x26;token=66a7b85a-3f8c-44f1-b67a-4b9eb20a0046" alt=""><figcaption></figcaption></figure>

Если в проекте еще не было созданных виджетов, то в середине экрана в разделе "Виджеты" вы увидите четыре кнопки:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FopHgMvOmTx2xCxEFJZdl%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.16.06.png?alt=media&#x26;token=9b2e24e3-d25c-4141-a7b3-e3403535067a" alt="" width="375"><figcaption></figcaption></figure>

Нажмите на кнопку "Виджет онлайн-записи", после чего вы перейдете в настройки виджета:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fkv1NfbrCWMHnsCMFtswy%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.18.12.png?alt=media&#x26;token=332c6664-9f29-42e0-b789-5d6848c836c3" alt=""><figcaption></figcaption></figure>

### Основная информация

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2F4hadI4hhInVdpasfZueT%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.21.05.png?alt=media&#x26;token=6a952cef-a1f7-4dbd-a6c7-10401469f7bd" alt="" width="563"><figcaption></figcaption></figure>

В данной вкладке необходимо прописать наименование виджета (будет отображено на сайте) и домен сайта, на котором вы хотите отображать виджет с онлайн-записью (если сайт собран не на стороне Сейлбот). Если сайт собран в конструкторе Сейлбота, то указывать домен не нужно.&#x20;

Далее выберите филиал, услуги и исполнители которого будут отображаться в виджете:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FCUw8QOoZErSlFu9QBoPu%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.22.07.png?alt=media&#x26;token=81816027-6908-4e0c-ac8f-7fb7ff8c6616" alt=""><figcaption></figcaption></figure>

Теперь можно переходить к кастомизации виджета.

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FU4CknDQitkyoMlTg1yav%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.19.55.png?alt=media&#x26;token=8256edd3-9a4f-470d-a4e6-52c545b58cd8" alt=""><figcaption></figcaption></figure>

### Настройки внешнего вида

Логотип и название виджета будут отображены в его шапке:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2F0lDCTL0kn3mnLgfI1KYy%2Ftemplate%20639%20(12).png?alt=media&#x26;token=3e39b448-f7f5-4d66-9a26-424449a0c9b3" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FsHDXhIzXY5BVIwUahe5g%2Ftemplate%20639%20(13).png?alt=media&#x26;token=b5264279-76de-45d8-944d-ab30b733ee33" alt="" width="563"><figcaption></figcaption></figure>

#### Цветовая гамма виджета

Цветовую гамму виджета можно выбрать по своему усмотрению:

1. Фон виджета:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fhhth9Upwo3HDxQcAw6m6%2Ftemplate%20639%20(14).png?alt=media&#x26;token=9276a3d5-bebd-4063-99e4-fe8e56ef452f" alt="" width="349"><figcaption></figcaption></figure>

2. Главная тема бренда виджета: отобразит кнопки, цены и иконки в установленном цветовом решении:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FdPazuU0dWEYqXBmWPwqF%2Ftemplate%20639%20(15).png?alt=media&#x26;token=f8af9b27-890c-4bd3-a204-77928215c390" alt="" width="349"><figcaption></figcaption></figure>

3. Цвет текста: изменит цветовое решение текста кнопки или основного текста в зависимости от выбранного значения:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FH8qihORrdhtRxNqeOeI3%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202024-06-26%20%D0%B2%2018.36.23.png?alt=media&#x26;token=db192859-d2fa-4fcd-8af1-3737204d81ca" alt="" width="311"><figcaption></figcaption></figure>

4. Текст кнопки

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fn5pS9qcJ7IvfcJ37reev%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.25.30.png?alt=media&#x26;token=b296ffc2-c158-4092-a786-1ded59cdad6d" alt="" width="375"><figcaption></figcaption></figure>

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

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FpvkikimR4C1qSaqh9zYw%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.24.55.png?alt=media&#x26;token=b6624927-e40c-42ae-bb56-1a7fec6591ca" alt="" width="375"><figcaption></figcaption></figure>

Теперь сохраните настройки:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FeMS4YGocgVo9BRdcvFHo%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-03-20%20%D0%B2%2016.29.04.png?alt=media&#x26;token=dd87a209-509b-4865-9367-ff4a874bc61a" alt=""><figcaption></figcaption></figure>

### Как принимать предоплату при записи клиента?

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

1. В настройках виджета активируйте переключатель "Запись по предоплате":

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FV56sK9dl2ul2uMSRYgJz%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-07-16%20%D0%B2%2018.21.14.png?alt=media&#x26;token=83cbd384-6c16-4e51-8b91-f6baf0f2e78f" alt=""><figcaption></figcaption></figure>

2. Затем выберите необходимый сервис для приема платежей:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FkPn9CIMImiIZtyYOWh1C%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-07-16%20%D0%B2%2018.21.50.png?alt=media&#x26;token=803d93db-2bb3-4b7e-a80e-ac8d2fe68491" alt="" width="563"><figcaption></figcaption></figure>

И не забудьте сохранить настройки:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2F4soebxcZq7ZA8nSdoLcn%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-07-16%20%D0%B2%2018.22.40.png?alt=media&#x26;token=f59b0cc6-b80a-4041-84c0-8a83e7f7d5c1" alt=""><figcaption></figcaption></figure>

Теперь когда клиент будет записываться к вам на услуги (или бронировать рейс автобуса), то вы сможете принимать предоплату:

<div><figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FKuvTeBUgXuu2RALUQMr1%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-07-16%20%D0%B2%2018.23.30.png?alt=media&#x26;token=af45ff87-b6d4-420f-8475-a2e593eb39f7" alt="" width="563"><figcaption></figcaption></figure> <figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FIAQHBuiRTPBjBXIeVopk%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-07-16%20%D0%B2%2018.23.56.png?alt=media&#x26;token=80c3a538-726b-4315-a4c8-057a6d1601e7" 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.salebot.pro/onlain-zapis/vidzhet-onlain-zapisi-dlya-saita/kak-sozdat-vidzhet.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.