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

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

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

<Steps>
  <Step title="Натисніть «Новий віджет» і виберіть режим">
    - **Режим агента** — віджет завжди запускає одного агента, якого ви вибираєте
      зі спадного списку. Найпростіше налаштування.
    - **Режим вебхука** — під час кожного сеансу віджета ThunderPhone викликає
      URL вашого вебхука, а ваш сервер повертає конфігурацію агента
      для цього відвідувача (маршрутизація за сторінками, користувачі, які увійшли в систему, поетапні розгортання).
      Залиште URL порожнім, щоб використовувати вебхук вашої організації за замовчуванням;
      коли ви вводите новий URL, його також можна встановити як значення за замовчуванням для організації.
  </Step>
  <Step title="Укажіть дозволені домени">
    Потрібен щонайменше один домен, і браузери можуть запускати
    сеанси лише з імен хостів, які ви вкажете. Допускаються підстановні знаки для піддоменів, як-от
    `*.example.com` (вони відповідають піддоменам, але не основному
    домену); підстановні знаки без домену, як-от `*`, відхиляються. Список запобігає випадковому
    повторному використанню вашого ключа на інших сайтах, але не є автентифікацією: скрипт
    поза браузером може надсилати будь-який заголовок `Origin`. `localhost` не
    дозволено автоматично в продакшні; додайте його до списку, щоб тестувати
    локально з продакшн API.
  </Step>
  <Step title="Виберіть перевизначення в браузері">
    Позначте кожен параметр сеансу, який надсилає ваша сторінка: **Контекст сторінки**,
    **Змінні**, **Голос**, **Мова**. Нові віджети не приймають жодного параметра, і
    запит сеансу з вимкненим параметром завершується помилкою `400`.
    Ваш ключ є публічним, тому дозволяйте лише те, що використовуєте. Див.
    [Перевизначення в браузері](/uk/guides/embed-web-widget).
  </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>