# Савви Виджет

<figure><img src="/files/eQR7FFORtBgF7c5YcTVm" alt=""><figcaption></figcaption></figure>

### Подключение и настройка

Благодаря виджету устанавливается связь с агентом, которого необходимо предварительно создать и настроить, загрузить необходимую информацию в его базу знаний.

{% hint style="info" %}
Обратите внимание, что у Вас должен быть доступ к сайту, на который Вы подключаете виджет, потому что потребуется встроить скрипт в код сайта.
{% endhint %}

1. Перейдите на вкладку **"Каналы"** и раздел **"Чаты для сайта"** в агенте, которого необходимо подключить к виджету и выберите **"Савви Виджет"**.

<figure><img src="/files/OJrR6tgNB2jzugYWRkg3" alt=""><figcaption></figcaption></figure>

2. На вкладке **"Подключение"** необходимо ввести домен сайта, к которому будет производиться подключение, затем нажать **"Подключить"**.

<figure><img src="/files/E7O9tPov5O150VpuTwvQ" alt=""><figcaption></figcaption></figure>

3. На вкладке сформируется код для подключения:

<figure><img src="/files/XQt3rogjABFPYxMtPHn9" alt=""><figcaption></figcaption></figure>

> **Отображаемое имя для сообщений агента** - в этом поле можно задать имя агента, которое будет отображаться в хэдере виджета\
> **Отображаемое имя для сообщений оператора** - в этом поле по аналогии с предыдущим задается имя, но для оператора\
> Имя агента или оператора будет отображаться в зависимости от того, кто в данный момент отвечает клиенту

В отдельном поле находится код скрипта, который необходимо вставить в раздел \<head> сайта, обычно это выполняется в файле index.html.\
После выполнения всех действий по настройке необходимо нажать **"Сохранить"**.

При необходимости можно временно отключить ответы агента флагом **"Ответы агента"** без необходимости отключения виджета.

<figure><img src="/files/7fEcXh9hsUm6HP66eRk7" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Обратите внимание, что виджет **пока не поддерживает** прикрепление **файлов и изображений**. Мы добавим эту возможность вместе со следующим обновлением.
{% endhint %}

### Кастомизация виджета

Во вкладке **Настройки виджета** можно изменить отображение виджета на сайте и поведение окна чата.

<figure><img src="/files/J1VA9nN8ySnrIVNNwQsl" alt=""><figcaption></figcaption></figure>

#### Отображаемое имя для сообщений агента

Имя, которое будет отображаться в виджете, когда клиенту отвечает Агент.

Например: `Андрей`, `Менеджер`, `Савви`.

#### Отображаемое имя для сообщений оператора

Имя, которое будет отображаться, когда в диалоге отвечает сотрудник.

Например: `Оператор`, `Администратор`, `Менеджер`.

#### Ссылка на Telegram, WhatsApp, Max

Позволяет добавить в виджет кнопку перехода в мессенджер.

Чтобы кнопка отображалась в виджете:

1. Включите переключатель **Добавить в виджет ссылку на ваш мессенджер**.
2. Вставьте ссылку на мессенджер.

Как это выглядит на сайте:

<figure><img src="/files/tvGKwFIDJn8p7UnD7Cru" alt=""><figcaption></figcaption></figure>

#### Автоматическое раскрытие виджета

<figure><img src="/files/vaYG0v31m9HEJZNmZvli" alt=""><figcaption></figcaption></figure>

Настройка **Добавить автоматическое раскрытие виджета** открывает окно чата автоматически после загрузки сайта.

Если настройка включена, можно задать время, через которое виджет раскроется.

#### Автооткрывать виджет лишь единожды

Если настройка включена, виджет автоматически раскроется только один раз для пользователя.

Это помогает не раздражать посетителя повторным открытием чата при каждом переходе по сайту.

#### Автоматически раскрывать виджет через

В этом поле задается задержка перед автоматическим раскрытием виджета.

Значение указывается в секундах.

Например, если установить `18`, виджет откроется через 18 секунд после захода пользователя на сайт.

#### Убрать логотип Савви из виджета

Позволяет скрыть логотип Савви в виджете.

Функция доступна только для пользователей с подпиской **Business** и выше.

<figure><img src="/files/AcHMqNQVFYG7tTtzT2k0" alt=""><figcaption></figcaption></figure>

#### Цвета виджета

В настройках можно изменить:

* цвет фона хедера;
* цвет текста хедера;
* цвет иконок.

<figure><img src="/files/4N1SNLGxdrWVStm92RC8" alt=""><figcaption></figcaption></figure>

#### Аватар агента

Можно загрузить изображение, которое будет отображаться как аватар агента в виджете.

Для загрузки нажмите **Загрузить** в блоке **Загрузите изображение аватара агента**.

#### Аватар сотрудника

Можно загрузить изображение, которое будет отображаться как аватар оператора.

Для загрузки нажмите **Загрузить** в блоке **Загрузите изображение аватара сотрудника**.

### Приветственные сообщения

Во вкладке **Приветственные сообщения** можно настроить текст, который пользователь увидит при открытии виджета.

Приветственное сообщение помогает сразу объяснить пользователю, куда он попал и с чем ему может помочь агент.

Например:

```
Здравствуйте! Напишите ваш вопрос, и я помогу вам разобраться.
```

или:

```
Здравствуйте! Я виртуальный ассистент. Могу подсказать по услугам, стоимости и условиям работы.
```

<figure><img src="/files/ZuuDrj3BXzhOMFIfEOqz" alt=""><figcaption></figcaption></figure>

***

### Превью виджета

Во вкладке **Превью виджета** можно посмотреть, как виджет будет выглядеть на сайте.

В превью отображаются текущие настройки:

* имена агента и оператора;
* цвета хедера, текста и иконок;
* аватары;
* кнопки перехода в Telegram, WhatsApp или Max;
* приветственные сообщения;
* внешний вид окна чата.

Используйте превью перед публикацией изменений, чтобы проверить, как виджет будет выглядеть для пользователей на сайте.

После внесения изменений в настройках виджета нажмите **Сохранить**, затем проверьте результат во вкладке **Превью виджета**.

Также можно **сбросить виджет** к настройкам по умолчанию

<figure><img src="/files/pUqxYki4mk7t17gyL1zl" alt=""><figcaption></figcaption></figure>

### Взаимодействие с 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

Создание лида, сделки, другие действия возможно настроить по API, используя действие "Вебхук". О том, как работать с действием, Вы можете ознакомиться в статье ["Веб-хуки"](/ru/deistviya/veb-khuki.md).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.suvvy.ai/ru/kanaly/chaty-dlya-saita/savvi-vidzhet.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
