---
title: "Создайте веб-виджет в панели управления"
description: "Настройте виджет 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` (они соответствуют поддоменам, но не основному
    домену); подстановочные знаки для домена, например `*`, отклоняются. Этот список предотвращает случайное
    повторное использование вашего ключа на других сайтах, но не является аутентификацией: скрипт
    вне браузера может отправить любой заголовок `Origin`. `localhost` не
    разрешён автоматически в продакшене; добавьте его в список, чтобы тестировать
    локально с помощью API продакшена.
  </Step>
  <Step title="Выберите переопределения браузера">
    Отметьте каждый параметр сеанса, который отправляет ваша страница: **Контекст страницы**,
    **Переменные**, **Голос**, **Язык**. Новые виджеты не принимают ни одного параметра, и
    запрос сеанса с отключённым параметром завершится ошибкой `400`.
    Ваш ключ является публичным, поэтому разрешайте только то, что используете. См.
    [Переопределения браузера](/ru/guides/embed-web-widget).
  </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>