Создайте агента, настройте аутентификацию OAuth и встроите виджет на ваш веб-сайт.
Приложение виджета размещено по адресу widget.companin.tech и предоставляет простой способ встроить AI-агента службы поддержки клиентов на ваш веб-сайт. Чтобы начать, вам нужно создать агента и приложение OAuth.
Виджет - это легкое, автономное приложение, которое работает в изолированном iframe на вашем сайте. Эта архитектура гарантирует, что виджет не будет конфликтовать с вашим существующим CSS или JavaScript, обеспечивая при этом отличную производительность и безопасность.
⚡ Быстрое развертывание
Большинство разработчиков запускают виджет на своем сайте в течение 10 минут. Процесс настройки включает всего три шага: создание учетных данных, настройка внешнего вида и добавление одного тега скрипта в ваш HTML.
Сначала создайте AI-агента службы поддержки клиентов в вашей панели управления:
Ваш агент - это ИИ-ум, стоящий за виджетом. Он обрабатывает сообщения пользователей, поддерживает контекст разговора и генерирует интеллектуальные ответы. Каждый агент может быть настроен с конкретными инструкциями, чертами личности и базами знаний, чтобы соответствовать вашему случаю использования.
Совет: Дайте вашему агенту четкие, конкретные инструкции о его роли и ограничениях. Например: "Вы - полезный агент поддержки клиентов для SaaS-продукта. Вы можете отвечать на вопросы о функциях, ценах и управлении аккаунтом. По техническим вопросам направляйте пользователей создавать тикет в поддержку."
Создайте приложение OAuth для аутентификации вашего виджета:
client_id из созданного приложенияСамый простой способ интегрировать виджет — встроить его напрямую с помощью iframe. Этот метод не требует инициализации JavaScript и работает сразу. Для нескольких iframe на одной странице держите каждое встраивание в пределах своего контейнера и параметров.
<iframe src="https://widget.companin.tech/embed/session?key=YOUR_WIDGET_KEY&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Agent Widget"></iframe>Замените YOUR_WIDGET_KEY на ключ установки вашего виджета (значение wgt_… — скопируйте его со страницы виджета или страницы установки в панели управления). Параметр locale можно установить в соответствии с языком вашего сайта.
Рекомендуемый метод интеграции - использование нашего загрузчика JavaScript виджета, который обеспечивает автоматическое изменение размера, управление конфигурацией и адаптивное поведение.
Добавьте следующий тег скрипта на вашу HTML-страницу:
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY" data-instance-id="support-widget" data-locale="en" data-theme="system" async></script>Каждый атрибут служит конкретной цели в настройке вашего виджета:
data-widget-key: Идентификатор виджета вашего виджета - единственное значение, необходимое для большинства установок. Он разрешает ваш клиент, агента и конфигурацию на стороне сервера, так что вам не нужно вставлять их отдельно.Три атрибута ниже являются продвинутой альтернативой data-widget-key - используйте их для многократных установок, где вам нужно явно указать конкретного клиента, агента или конфигурацию:
data-client-id: Ваш идентификатор клиента OAuth - это аутентифицирует ваше приложение с нашим API. Рассматривайте это как пароль вашего приложения.data-agent-id: UUID вашего агента - это идентифицирует, какой AI-агент поддержки клиентов обрабатывает разговоры.data-config-id: UUID вашей конфигурации виджета - это определяет, как выглядит и ведет себя ваш виджет (цвета, размер, позиция и т. д.).data-instance-id: Уникальный идентификатор экземпляра виджета - требуется при встраивании нескольких виджетов на одной странице, чтобы избежать конфликтов и включить целевую API для каждого экземпляра.data-custom-css: Устарело. Установка этого атрибута вызывает предупреждение в консоли и не имеет эффекта. Установите custom_css в вашей конфигурации виджета на панели управления вместо этого — он загружается из конфигурации и автоматически внедряется в iframe.data-locale: Код языка (например, "en", "es", "fr") - устанавливает язык отображения виджета. Агент все равно будет отвечать на любом языке, на котором пишут пользователи.data-theme: Режим темы - light, dark или system (следует за устройством посетителя). Выбирает, какую цветовую палитру (настроенную в вашей панели управления) показывает виджет. Уберите его, чтобы использовать ваш сохраненный по умолчанию.data-dev: Установите в "true" для режима разработки (localhost) - используйте это при тестировании локально. Удалите или установите в "false" для производства.Виджет будет автоматически:
start_open конфигурации.start_open из вашей конфигурацииdata-dev="true" для тестирования на локальном хосте