> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thunderphone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Створіть вебвіджет у панелі керування

> Налаштуйте віджет «натисніть, щоб поговорити» для свого сайту на сторінці «Вебвіджети» — виклики API не потрібні.

Сторінка **Web Widgets** (`/dashboard/web-widgets`) створює та керує
публічними ключами, які забезпечують роботу вбудовуваного голосового віджета ThunderPhone.
Усе, що [версія цього посібника для API](/uk/guides/embed-web-widget)
робить за допомогою cURL, ця сторінка робить через форму — а також генерує
для вас код для вбудовування.

## Створіть віджет

<Steps>
  <Step title="Натисніть «Новий віджет» і виберіть режим">
    * **Режим агента** — віджет завжди запускає одного агента, якого ви вибираєте
      зі спадного списку. Найпростіше налаштування.
    * **Режим вебхука** — під час кожного сеансу віджета ThunderPhone надсилає запит
      на URL вашого вебхука, а ваш сервер повертає конфігурацію агента
      для цього відвідувача (маршрутизація для окремих сторінок, авторизовані користувачі, розгортання).
      Залиште URL порожнім, щоб використовувати вебхук за замовчуванням для вашої організації;
      коли ви вводите новий URL, ви також можете встановити його як стандартний для організації.
  </Step>

  <Step title="Укажіть дозволені домени">
    Публічні ключі прив’язані до origin: потрібно вказати щонайменше один домен,
    а віджет працює лише на перелічених вами іменах хостів. Дозволені
    шаблони піддоменів, як-от `*.example.com` (вони відповідають піддоменам,
    але не основному домену); шаблони без домену, як-от `*`, відхиляються.
    `localhost` і `127.0.0.1` завжди дозволені, тому локальна розробка
    працює без їх додавання до списку.
  </Step>

  <Step title="Укажіть назву, увімкніть і створіть">
    Перемикач **Увімкнути віджет** визначає, чи приймає ключ
    сеанси — ви можете створити вимкнений віджет і увімкнути його під час запуску.
  </Step>
</Steps>

## Отримайте код для вбудовування

Одразу після створення (або через кнопку **Вбудувати** у кожному рядку) діалогове вікно
вбудовування генерує готовий до вставлення код із заповненим вашим публічним ключем:

* **React** — фрагмент `<ThunderPhoneWidget />` для застосунків зі збирачем.
* **Тег script** — пара CDN `<script>` + таблиця стилів для будь-якого сайту.

Діалогове вікно також показує попередній перегляд базових параметрів вигляду — назви, основного
кольору, розташування в куті та світлої/темної теми — і додає ваші налаштування
до фрагмента. Повний довідник властивостей, хуки стилізації та
безголовий варіант дивіться в [документації SDK віджета](/uk/widget/overview).

<Note>
  Публічні ключі (`pk_live_…`) за задумом є публічними — їх безпечно додавати
  до фронтенд-коду. У будь-який час скопіюйте ключ кнопкою копіювання у його рядку.
</Note>

## Керуйте віджетами зі списку

Кожен рядок редагується на місці:

* **Режим / Агент** — перемикайтеся між режимом агента та вебхука або змінюйте
  агента за допомогою вбудованих списків вибору.
* **Домени** — додавайте або видаляйте дозволені домени як мітки.
* **Увімкнути/вимкнути** — перемикач для кожного віджета; вимкнені віджети
  негайно припиняють приймати сеанси.
* **Передати до організації** — скопіюйте або перемістіть віджет до іншої організації,
  до якої ви належите (після переміщення його буде видалено звідси).
* **Видалити** — відкликає публічний ключ; віджет негайно припиняє працювати
  на всіх доменах. Цю дію не можна скасувати.

Сеанси віджета відображаються в [історії дзвінків](/uk/guides/review-calls) із тією самою
транскрипцією, записом і оцінюванням, що й телефонні дзвінки.

## Наступні кроки

<CardGroup cols={2}>
  <Card title="Довідник SDK віджета" icon="window-maximize" href="/uk/widget/overview">
    Компонент React, безголовий хук і відомості про CDN-скрипт.
  </Card>

  <Card title="Маршрутизація в режимі вебхука" icon="bolt" href="/uk/guides/dynamic-call-config">
    Повертайте конфігурацію агента для кожного відвідувача зі свого сервера.
  </Card>
</CardGroup>