---
title: "Вебвіджет"
description: "Додайте чат-бульбашку Requiply з AI на свій сайт, щоб відвідувачі могли дізнатися про доступність і ціни, не залишаючи ваш сайт."
canonical_url: "https://requiply.com/docs/uk/guides/online-booking/web-widget"
---
# Вебвіджет

> Додайте чат-бульбашку Requiply з AI на свій сайт, щоб відвідувачі могли дізнатися про доступність і ціни, не залишаючи ваш сайт.

Інтеграція **Вебвіджет** дає змогу додати чат-бульбашку Requiply з AI на ваш власний сайт. Відвідувачі ставлять питання, а асистент відповідає на основі публічних даних вашої організації в Requiply.

Ця сторінка розташована в **Налаштування → Інтеграції → Вебвіджет**.

![Сторінка Вебвіджет із ключем віджета, кодом для вставлення, дозволеними доменами, налаштуваннями стилізації, діями та попереднім переглядом наживо](https://requiply.com/docs/assets/settings/integrations/web-widget/widget-key-page.png)

<warning>

**Тарифи.** На тарифі **Advanced** відвідувачам першим відповідає AI-асистент. Якщо увімкнено розділ [Розмови](https://requiply.com/docs/uk/guides/conversations/inbox), віджет працює й на тарифі **Core** як чат із вашою командою: повідомлення відвідувачів потрапляють у Розмови, де команда на них відповідає. Якщо розмови вимкнено, віджету потрібен тариф Advanced. На інших тарифах замість налаштування ключа віджета показано пропозицію змінити тариф.

</warning>

## Хто відповідає відвідувачам

Перемикач **AI-асистент відповідає першим** на цій сторінці визначає, хто відповідає у віджеті:

- **Увімкнено** (тариф Advanced): асистент відповідає, знаючи ваш каталог, ціни та доступність, створює бронювання. Якщо розмови увімкнено, він передає розмову команді, коли відвідувач просить людину. Як саме відбувається передача, налаштовують у [налаштуваннях омніканальних розмов](https://requiply.com/docs/uk/guides/conversations/channels#%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-ai-%D0%B0%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BD%D1%82).
- **Вимкнено**: кожне повідомлення одразу потрапляє до вашої команди в розділ [Розмови](https://requiply.com/docs/uk/guides/conversations/inbox), а відповіді команди зʼявляються у віджеті відвідувача.

Перемикач спільний із чатом клієнтського порталу в [налаштуваннях порталу](https://requiply.com/docs/uk/guides/online-booking/portal-settings#%D1%87%D0%B0%D1%82) і зберігається одразу. Розмови з віджета мають у розділі Розмови значок чат-бульбашки з позначкою **Віджет на сайті**.

Що бачить відвідувач у віджеті:

- **Форматування у відповідях асистента.** **Жирний** текст, маркіровані списки (з позначкою •) і посилання. Посилання відкриваються в новій вкладці.
- **Примітку, коли розмову бере команда.** Коли повідомлення відвідувача переходить до вашої команди без відповіді асистента (наприклад, після передачі або поки чат веде працівник), віджет показує *Ваше повідомлення передано команді. Менеджер відповість тут.* Примітка зʼявляється один раз за очікування й показується знову лише після наступної відповіді.
- **Відповіді команди** зʼявляються в тому самому чаті щойно надходять.

<note>

Зміна чи видалення відповіді в [розділі Розмови](https://requiply.com/docs/uk/guides/conversations/inbox#%D1%80%D0%B5%D0%B4%D0%B0%D0%B3%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D1%82%D0%B0-%D0%B2%D0%B8%D0%B4%D0%B0%D0%BB%D0%B5%D0%BD%D0%BD%D1%8F-%D0%B2%D0%B0%D1%88%D0%B8%D1%85-%D0%B2%D1%96%D0%B4%D0%BF%D0%BE%D0%B2%D1%96%D0%B4%D0%B5%D0%B9) не змінює її у віджеті. Відвідувач, який уже отримав відповідь, бачить початковий текст. Тому перевіряйте відповідь, перш ніж надіслати її відвідувачу віджета.

</note>

## Чому вебвіджет важливий

Віджет дає відвідувачам сайту змогу самостійно розпитати про ваш орендний бізнес, не залишаючи сайт. Він використовує публічний ключ віджета, контрольований список дозволених доменів і скрипт чат-віджета Requiply.

Типові сценарії використання:

- Відповіді на питання про локації, варіанти доставки, способи оплати, деталі каталогу та доступність.
- Швидкий спосіб для відвідувачів розпитати про варіанти оренди, перш ніж надіслати запит на бронювання.
- Чат на сайті у фірмовому кольорі та бажаній темі.
- Можливість для адміністраторів перегенерувати або відкликати ключ віджета, якщо вбудований код треба замінити.

<note>

**Ключ сайту** є публічним ідентифікатором, який безпечно розміщувати в HTML сайту. Водночас його обмежують дозволені домени, які ви налаштовуєте на цій сторінці.

</note>

## Що ви побачите

Поки ключа немає, сторінка показує порожній стан із кнопкою **Створити ключ віджета**. На тарифах, нижчих за Advanced, у тому самому місці показано **Покращити план, щоб створити ключ віджета** (Upgrade to create widget key).

![Порожній стан сторінки Вебвіджет із дією створення ключа або пропозицією перейти на тариф Advanced](https://requiply.com/docs/assets/settings/integrations/web-widget/empty-state.png)

Коли ключ уже є, сторінка показує:

- **Ключ віджета**: активний публічний ключ сайту та значок статусу **Активний**.
- **Код для вставлення**: блок скрипту, який треба вставити на сайт.
- **Дозволені домени**: домени сайтів, на яких дозволено завантажувати віджет.
- **Стилізація**: налаштування основного кольору, колірної теми та стилю кутів.
- **Дії**: перегенерування ключа, відкликання ключа та збереження змін.
- **Попередній перегляд**: попередній перегляд чат-бульбашки й панелі наживо в iframe.

## Створення ключа віджета

<steps level="3">

### Відкрийте сторінку

Перейдіть у **Налаштування → Інтеграції → Вебвіджет**.

### Створіть ключ

Натисніть **Створити ключ віджета**. Requiply створить активний ключ сайту для організації.

### Додайте дозволені домени

Додайте кожен домен сайту, на якому має завантажуватися віджет, наприклад `https://example.com` і `https://www.example.com`.

### Налаштуйте стилізацію

Оберіть основний колір, колірну тему та стиль кутів, які бачитимуть відвідувачі.

### Збережіть зміни

Натисніть **Зберегти зміни**. Віджет ніде не завантажиться, доки не збережено хоча б один дозволений домен.

</steps>

## Вбудовування віджета

Скопіюйте **Код для вставлення** і вставте його перед закривним тегом `</body>` на кожній сторінці сайту, де має зʼявлятися чат-бульбашка.

```html
<script>
  window.RequiplyWidget = {
    siteKey: "rq_widget_example",
    primaryColor: "#016E88",
    colorMode: "light",
    borderRadius: "round"
  };
</script>
<script async src="https://app.requiply.com/requiply-widget.js"></script>
```

Код, сформований у Requiply, містить ваш справжній ключ сайту та поточні налаштування стилізації.

<warning>

Додайте свій сайт у **Дозволені домени**, перш ніж перевіряти код. Якщо домену немає в списку, ключ віджета існує, проте завантажувати віджет із цього сайту не дозволено.

</warning>

## Дозволені домени

Дозволені домени визначають, де можна використовувати публічний ключ віджета. Додайте точний домен (origin) кожного сайту, де має зʼявлятися чат-бульбашка.

<table>
<thead>
  <tr>
    <th>
      Приклад
    </th>
    
    <th>
      Примітки
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        https://example.com
      </code>
    </td>
    
    <td>
      Дозволяє основний домен.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        https://www.example.com
      </code>
    </td>
    
    <td>
      Додайте окремо, якщо використовується версія з <code>
        www
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        https://shop.example.com
      </code>
    </td>
    
    <td>
      Кожен піддомен додавайте окремо.
    </td>
  </tr>
</tbody>
</table>

Не додавайте шляхи на кшталт `/pricing` чи `/booking`. Домен (origin) складається лише з протоколу, хоста та необовʼязкового порту.

<note>

Якщо домени не налаштовано, сторінка попереджає: «Домени ще не додано: віджет ніде не завантажиться, доки ви не додасте хоча б один.»

</note>

## Стилізація

Налаштування стилізації змінюють збережену конфігурацію віджета разом із попереднім переглядом наживо.

<table>
<thead>
  <tr>
    <th>
      Налаштування
    </th>
    
    <th>
      Варіанти
    </th>
    
    <th>
      Що воно змінює
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Основний колір
      </strong>
    </td>
    
    <td>
      Будь-який колір у форматі hex
    </td>
    
    <td>
      Колір чат-бульбашки, заголовка, кнопки надсилання та повідомлень відвідувача. За замовчуванням це фірмовий колір вашої організації.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Колірна тема
      </strong>
    </td>
    
    <td>
      Системна, Світла, Темна
    </td>
    
    <td>
      Чи віджет дотримується системної теми відвідувача, чи примусово має світлий або темний вигляд.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Кути
      </strong>
    </td>
    
    <td>
      Заокруглені, Мʼякі, Гострі
    </td>
    
    <td>
      Радіус заокруглення панелі, повідомлень, поля введення та кнопок.
    </td>
  </tr>
</tbody>
</table>

![Попередній перегляд наживо з чат-бульбашкою вебвіджета, панеллю чату, привітанням, полем введення та вибраною стилізацією](https://requiply.com/docs/assets/settings/integrations/web-widget/live-preview.png)

Натисніть **Скинути до фірмового кольору**, якщо основний колір знову має збігатися з фірмовим кольором організації.

## Перегенерування або відкликання ключа

Використовуйте ці дії, коли вбудований код треба замінити або вимкнути.

<tabs>
<tabs-item label="Перегенерувати ключ">

Натисніть **Перегенерувати ключ**, щоб відкликати поточний ключ сайту й отримати новий.

Після перегенерування:

- Скопіюйте новий код для вставлення.
- Замініть старий код усюди, де його встановлено.
- Стежте, щоб дозволені домени та стилізація були актуальними.

<warning>

Перегенерування ламає віджет на всіх сайтах, які ще використовують попередній ключ.

</warning>
</tabs-item>

<tabs-item label="Відкликати ключ">

Натисніть **Відкликати ключ**, щоб вимкнути віджет усюди, де його вбудовано.

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

</tabs-item>
</tabs>

## Типові сценарії

### Запуск віджета на сайті

1. Перейдіть у **Налаштування → Інтеграції → Вебвіджет**.
2. Натисніть **Створити ключ віджета**.
3. Додайте домени свого сайту.
4. Задайте основний колір, колірну тему та кути.
5. Натисніть **Зберегти зміни**.
6. Скопіюйте код для вставлення.
7. Вставте код перед `</body>` на кожній сторінці сайту, де має зʼявлятися віджет.
8. Відкрийте сайт і переконайтеся, що чат-бульбашка зʼявилася.

### Додавання віджета на інший домен

1. Додайте новий домен у **Дозволені домени**.
2. Натисніть **Зберегти зміни**.
3. Додайте той самий код для вставлення на новий сайт.

### Заміна старого ключа або ключа після витоку

1. Натисніть **Перегенерувати ключ**.
2. Підтвердьте дію в діалозі.
3. Скопіюйте новий код.
4. Замініть старий код на своєму сайті.

## Усунення проблем

**Віджет не зʼявляється**
Перевірте, що сторінка містить сформований код, URL скрипту завантажується, а поточний домен сайту є в списку **Дозволені домени**.

**Віджет зʼявляється на одному домені, але не на іншому**
Додайте кожен точний домен окремо. `https://example.com` і `https://www.example.com` є різними доменами.

**Попередній перегляд змінюється, а сайт ні**
Натисніть **Зберегти зміни**, а потім оновіть сайт. Також перевірте, що код на сайті містить поточні значення `primaryColor` і `colorMode`, а також `borderRadius`.

**Відвідувачі бачать помилку асистента**
Спробуйте ще раз за хвилину. Якщо проблема не зникає, перевірте, чи має ваша організація доступні AI-кредити на сторінці [Використання AI](https://requiply.com/docs/uk/ai/ai-usage).


## Sitemap

See the full [sitemap](https://requiply.com/docs/sitemap.md) for all pages.