> For the complete documentation index, see [llms.txt](https://docs.suvvy.ai/ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.suvvy.ai/ru/kanaly/chaty-dlya-saita/savvi-vidzhet.md).
# Савви Виджет
Савви Виджет позволяет автоматизировать общение с клиентами напрямую с сайта без необходимости подключения промежуточных интеграций.
### Подключение и настройка
Благодаря виджету устанавливается связь с агентом, которого необходимо предварительно создать и настроить, загрузить необходимую информацию в его базу знаний.
{% hint style="info" %}
Обратите внимание, что у Вас должен быть доступ к сайту, на который Вы подключаете виджет, потому что потребуется встроить скрипт в код сайта.
{% endhint %}
1. Перейдите на вкладку **"Каналы"** и раздел **"Чаты для сайта"** в агенте, которого необходимо подключить к виджету и выберите **"Савви Виджет"**.
2. На вкладке **"Подключение"** необходимо ввести домен сайта, к которому будет производиться подключение, затем нажать **"Подключить"**.
3. На вкладке сформируется код для подключения:
> **Отображаемое имя для сообщений агента** - в этом поле можно задать имя агента, которое будет отображаться в хэдере виджета\
> **Отображаемое имя для сообщений оператора** - в этом поле по аналогии с предыдущим задается имя, но для оператора\
> Имя агента или оператора будет отображаться в зависимости от того, кто в данный момент отвечает клиенту
В отдельном поле находится код скрипта, который необходимо вставить в раздел \ сайта, обычно это выполняется в файле index.html.\
После выполнения всех действий по настройке необходимо нажать **"Сохранить"**.
При необходимости можно временно отключить ответы агента флагом **"Ответы агента"** без необходимости отключения виджета.
{% hint style="warning" %}
Обратите внимание, что виджет **пока не поддерживает** прикрепление **файлов и изображений**. Мы добавим эту возможность вместе со следующим обновлением.
{% endhint %}
### Кастомизация виджета
Во вкладке **Настройки виджета** можно изменить отображение виджета на сайте и поведение окна чата.
#### Отображаемое имя для сообщений агента
Имя, которое будет отображаться в виджете, когда клиенту отвечает Агент.
Например: `Андрей`, `Менеджер`, `Савви`.
#### Отображаемое имя для сообщений оператора
Имя, которое будет отображаться, когда в диалоге отвечает сотрудник.
Например: `Оператор`, `Администратор`, `Менеджер`.
#### Ссылка на Telegram, WhatsApp, Max
Позволяет добавить в виджет кнопку перехода в мессенджер.
Чтобы кнопка отображалась в виджете:
1. Включите переключатель **Добавить в виджет ссылку на ваш мессенджер**.
2. Вставьте ссылку на мессенджер.
Как это выглядит на сайте:
#### Автоматическое раскрытие виджета
Настройка **Добавить автоматическое раскрытие виджета** открывает окно чата автоматически после загрузки сайта.
Если настройка включена, можно задать время, через которое виджет раскроется.
#### Автооткрывать виджет лишь единожды
Если настройка включена, виджет автоматически раскроется только один раз для пользователя.
Это помогает не раздражать посетителя повторным открытием чата при каждом переходе по сайту.
#### Автоматически раскрывать виджет через
В этом поле задается задержка перед автоматическим раскрытием виджета.
Значение указывается в секундах.
Например, если установить `18`, виджет откроется через 18 секунд после захода пользователя на сайт.
#### Убрать логотип Савви из виджета
Позволяет скрыть логотип Савви в виджете.
Функция доступна только для пользователей с подпиской **Business** и выше.
#### Цвета виджета
В настройках можно изменить:
* цвет фона хедера;
* цвет текста хедера;
* цвет иконок.
#### Аватар агента
Можно загрузить изображение, которое будет отображаться как аватар агента в виджете.
Для загрузки нажмите **Загрузить** в блоке **Загрузите изображение аватара агента**.
#### Аватар сотрудника
Можно загрузить изображение, которое будет отображаться как аватар оператора.
Для загрузки нажмите **Загрузить** в блоке **Загрузите изображение аватара сотрудника**.
#### Добавление согласия на обработку персональных данных
В большинстве случаев для соответствия требованиям законодательства от пользователя требуется согласие на обработку персональных данных. Активируйте флаг **"Добавить в виджет согласе с пользовательским соглашеним"**, вставьте ссылку на документ с соглашением, если такой есть в наличии. После этого пользователю будет выводится информация о необходимости дать согласие на обработку персональных данных и предолжен документ, если необходима более подробная информация.
#### Управление виджетом вручную
По умолчанию виджет открывается и закрывается по клику на его иконку. Если вы хотите вызывать эти действия из собственных элементов — например, по нажатию на кнопку или ссылку — управляйте виджетом программно.
Добавьте обработчик нужного события на ваш элемент и вызовите соответствующий метод виджета. В примере ниже виджет открывается по клику на элемент с идентификатором open-widget-trigger — замените его на свой селектор, а метод open — на нужное действие.
```
```
Доступные действия: open — открыть виджет, close — закрыть, toggle — переключить состояние.
#### Входящие инструкции с сайта
Сайт может отправить боту инструкцию — задание, по которому бот сам напишет клиенту в чат: предложит помощь с товаром, напомнит о брошенной корзине, прокомментирует открытую страницу. Чтобы инструкции принимались, включите **"Разрешить входящие инструкции с сайта"** в настройках виджета.
Вызывайте метод sendInstruction в нужный момент: по таймеру, при уходе со страницы, по клику на кнопку. Первый аргумент — текст задания для бота (до 4096 символов), второй — необязательный идентификатор источника, он будет виден в диалоге. В примере ниже инструкция отправляется через 30 секунд на странице и по клику на элемент с идентификатором help-button — замените тексты и селекторы на свои.
```
```
Сама инструкция в чате не отображается — клиент видит только ответ бота. Перед выполнением каждая инструкция проверяется на промпт-инъекцию; результат проверки и списанные токены видны в истории диалога. Инструкции, отправленные до инициализации виджета, не теряются и уходят после его загрузки.
#### Расписание отображения виджета
В ряде случаев у агента есть определенное расписание работы, отображать виджет на сайте вне этого расписания не имеет смысла, потому что агент при поступлении собщения не ответи. Активируйте флаг **"Показывать виджет только в рабочее время"**.
Обратите внимание, что рабочее время задается в дополнительных настройках агента.
### Приветственные сообщения
Во вкладке **Приветственные сообщения** можно настроить текст, который пользователь увидит при открытии виджета.
Приветственное сообщение помогает сразу объяснить пользователю, куда он попал и с чем ему может помочь агент.
Например:
```
Здравствуйте! Напишите ваш вопрос, и я помогу вам разобраться.
```
или:
```
Здравствуйте! Я виртуальный ассистент. Могу подсказать по услугам, стоимости и условиям работы.
```
***
### Превью виджета
Во вкладке **Превью виджета** можно посмотреть, как виджет будет выглядеть на сайте.
В превью отображаются текущие настройки:
* имена агента и оператора;
* цвета хедера, текста и иконок;
* аватары;
* кнопки перехода в Telegram, WhatsApp или Max;
* приветственные сообщения;
* внешний вид окна чата.
Используйте превью перед публикацией изменений, чтобы проверить, как виджет будет выглядеть для пользователей на сайте.
После внесения изменений в настройках виджета нажмите **Сохранить**, затем проверьте результат во вкладке **Превью виджета**.
Также можно **сбросить виджет** к настройкам по умолчанию
### Взаимодействие с CRM
### AmoCRM
#### Выполнение действий через подключение интеграции с amoCRM
Подключите amoCRM в разделе "**Интеграции**", после этого Вы сможете выполнять действия в CRM. Ознакомьтесь с процессом подключения и настройки в [соответствующей статье](/ru/integracii/crm-sistemy/amocrm.md).
#### Альтернативный метод работы с amoCRM.
Для создания сделок в amoCRM можно использовать Google-таблицу.
1. Создайте Google-таблицу, в которую будет вноситься необходимая для создания сделки информация.
2. Подключите и настройте заполнение таблицы в Вашем агенте. Более подробно ознакомьтесь с настройкой в статье [Запись/изменение данных](/ru/rabota-s-tablicami/tablicy-csv-xls-google/zapis-izmenenie-dannykh.md). Настройте заполнение в таблицу данных, необходимых для создания сделки.
3. Эта же таблица подключается в amoCRM, как источник сделок в воронке.
### Bitrix24
#### Выполнение действий через подключение интеграции с Bitrix24
Подключите Bitrix24 в разделе "Интеграции", что позволит выоплнять определенные действия в CRM, работая с каналом связи напрямую. Более подробно Вы можете ознакомиться с подключением в соответствующей статье по ссылке.
#### Прямое взаимодействие по API
Создание лида, сделки, другие действия возможно настроить по API, используя действие "Вебхук". О том, как работать с действием, Вы можете ознакомиться в статье ["Веб-хуки"](/ru/deistviya/veb-khuki.md).
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.suvvy.ai/ru/kanaly/chaty-dlya-saita/savvi-vidzhet.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
