> ## 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.

# Создайте веб-виджет в панели управления

> Настройте виджет click-to-talk для своего сайта на странице «Веб-виджеты» — вызовы API не требуются.

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

## Создайте виджет

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

  <Step title="Укажите разрешённые домены">
    Публикуемые ключи привязаны к источникам: требуется хотя бы один домен,
    и виджет работает только на перечисленных вами именах хостов. Допускаются
    подстановочные знаки поддоменов, например `*.example.com` (они соответствуют поддоменам,
    но не основному домену); подстановочные знаки без домена, например `*`, отклоняются.
    `localhost` и `127.0.0.1` всегда разрешены, поэтому локальная разработка
    работает без их добавления в список.
  </Step>

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

## Получите код для встраивания

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

* **React** — фрагмент `<ThunderPhoneWidget />` для приложений со сборщиком.
* **Тег script** — пара CDN `<script>` + таблица стилей для любого сайта.

В диалоге также отображается предварительный просмотр основных параметров оформления — заголовка, основного
цвета, положения в углу и светлой/тёмной темы — и ваши настройки
добавляются в фрагмент. Полное описание свойств, хуков стилизации и
варианта без интерфейса смотрите в [документации SDK виджета](/ru/widget/overview).

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

## Управляйте виджетами из списка

Каждая строка редактируется на месте:

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

Сеансы виджета отображаются в [истории звонков](/ru/guides/review-calls) с теми же
расшифровками, записями и оценками, что и телефонные звонки.

## Следующие шаги

<CardGroup cols={2}>
  <Card title="Справочник SDK виджета" icon="window-maximize" href="/ru/widget/overview">
    Сведения о компоненте React, хуке без интерфейса и CDN-скрипте.
  </Card>

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