# Как встроить виджет на сайт

Перейдите в режим редактирования сайта:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FtgzmafjKCTaXQYKyd1i3%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.42.25.png?alt=media&#x26;token=79299f79-4ea3-49eb-875a-b966f407c9ae" 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%2FmXBJhZIFXGQAl6mu6ZJG%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.51.20.png?alt=media&#x26;token=8cd2eb4a-6e5a-4705-a21b-c01d27c5c829" alt="" width="351"><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%2FhaX1xVNyNJa6Iz4fTK9K%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.43.47.png?alt=media&#x26;token=62ccd0f0-172d-4db6-8154-3f0e50a7c1f4" 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%2FdW0oQFe2GEcB4gWBort8%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.45.34.png?alt=media&#x26;token=54c12582-26d0-454d-a8b2-665eb6301fff" 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%2FQWhCk2RCW8SHLSPsVlzI%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.46.03.png?alt=media&#x26;token=519b1ab0-a31e-457c-9604-af60256d8483" alt=""><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%2FQUrYcQYPg95EG0lfl5A2%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.49.56.png?alt=media&#x26;token=e13bc1ae-4a79-48c8-b42e-f79f48eceb7e" 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%2FVCYXYuIP8qO4wYx75ozT%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.41.43.png?alt=media&#x26;token=f33eb053-ed3b-42a7-b83f-e67d82268a1c" alt="" width="375"><figcaption></figcaption></figure>

Если вам необходимо встроить код на сайт, то скопируйте скрипт и вставьте его в свой лендинг.&#x20;

В случае, если вы будете использовать виджет на собственных сайтах, НЕ собранных на Salebot, тогда пропишите в поле класс элемента:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FQ64XWWCelx3U10KQHIgV%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.43.39.png?alt=media&#x26;token=7118250a-083b-4bab-9695-8c4dd9e0241c" alt=""><figcaption></figcaption></figure>

## Callback о записи

В диалог с клиентом после записи будет приходить колбек — уведомление о записи — следующего вида:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2FOnH7tlaexDKE8mBdvJsh%2FIMAGE%202025-05-30%2017%3A50%3A34.jpg?alt=media&#x26;token=96b7299f-fb17-42e1-83d1-3bc0486de413" alt="" width="464"><figcaption></figcaption></figure>

<mark style="color:orange;">**new\_order\_in\_calendar**</mark> - не изменяемая часть колбека&#x20;

&#x20;<mark style="color:yellow;">**\[489046159]**</mark> - order\_id  идентификатор заявки&#x20;

<mark style="color:red;">**Добавлена запись даты\_и\_время\_записи**</mark>

<mark style="color:purple;">**на 30 минут**</mark> - длительность услуги&#x20;

<mark style="color:red;">**Объекту: Тест 30**</mark> - какому именно объекту добавлена запись

Вид самого колбека:

***`new_order_in_calendar: [489046159] Добавлена запись с 2025-06-01 14:00 до 2025-06-01 14:30 на 30 минут. Объекту: Тест 30`***

Настроить реакцию на колбек можно прописав значение в условии блока:

<figure><img src="https://4216716816-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LxKl4rC_EcwBAz40Qn_%2Fuploads%2Fmaoh8ZF4reIJlBkxvDtr%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-05-30%20%D0%B2%2017.54.03.png?alt=media&#x26;token=3f2dfb35-03af-4aac-ad73-c851d0e93a4a" alt=""><figcaption></figcaption></figure>

В блоке можно прописать необходимое обратное сообщение клиенту.


---

# 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-vstroit-vidzhet-na-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.