# Создать LiveChat для сайта
> [HTML Version](livechat.html)
LiveChat — это онлайн-чат для общения с клиентами. Вы можете настроить LiveChat в ELMA365, подключить его к линии, а затем разместить на стороннем сайте.
Тогда посетители вашего сайта смогут отправлять запросы в онлайн-чат, а операторы — отвечать на них из интерфейса ELMA365. Операторы также смогут создавать сессии с обратившимся ранее пользователями, чтобы они получили сообщения в онлайн‑чате. При этом история переписки будет сохраняться в разделе [Линии](chat_lines.md).
Если к линии [подключены другие каналы связи](connection_to_line.md), пользователь сможет перейти в них, нажав значок мессенджера или почты в окне онлайн-чата. Таким образом можно выбрать, где общаться с оператором: на сайте в окне онлайн-чата, в мессенджере или по электронной почте.
Кроме того, когда для линии настроен ELMA Bot, он может также реагировать на запросы пользователей: предлагать оператору подсказки для сообщений или отвечать вместо него. Подробнее о режимах работы бота читайте в статье [«Подключить бота к линии»](connect-bot.md).
````
Начало внимание
````
Настройка LiveChat доступна только пользователям, входящим в группу [Администраторы](360006871932.md#administrators).
````
Конец внимание
## ````
Шаг 1. Включить чат
Для каждой линии необходимо создать отдельный онлайн-чат. Для этого:
1. Перейдите в раздел **Администрирование > Линии**.
2. Выберите линию из списка или [создайте новую](create_line.md), нажав кнопку **+Линия** в правом верхнем углу.
3. Перейдите на вкладку **LiveChat** и нажмите кнопку **Включить** в центре страницы.
В левой части вкладки отобразятся блоки настроек онлайн-чата, а в правой — его превью, которое будет автоматически изменяться в зависимости от установленных параметров.
**(livechat-1.png)**
## Шаг 2. Настроить чат
Установите параметры, переключаясь между блоками:
- [LiveChat](#livechat-settings) — настройте общение в онлайн-чате на вашем сайте;
- [Inbox](#inbox-settings) — включите отправку обращения через окно чата с получением ответа на электронную почту;
- [JWT-авторизация](#jwt) — активируйте идентификацию пользователей онлайн-чата с помощью JSON Web Token;
- [Персональные данные](#privacy-policy) — добавьте ссылку на политику обработки персональных данных, если пользователь вводит их для общения в чате;
- [Мессенджеры](#messengers) — настройте возможность переходить из чата в подключённые к линии мессенджеры;
- [Оформление](#design) — задайте внешний вид чата и кнопки, которая его открывает;
- [Настройки событий](#event-settings) — настройте автоматическое раскрытие чата на странице при выполнении определённых условий.
### Блок «LiveChat»
Чтобы пользователь мог общаться с оператором через онлайн-чат:
1. Оставьте включённой опцию напротив поля **LiveChat**.
2. Задайте основные параметры чата:
**(livechat-2.png)**
- **Название чата\*** — укажите заголовок окна онлайн-чата, например, **Служба поддержки**;
- **Приветствие\*** — введите текст, который будет видеть пользователь, открыв чат;
- **Разрешить пользователям LiveChat редактировать сообщения** — опция позволяет клиентам изменять свои сообщения. Рядом с сообщением будет отображаться время его редактирования;
- **Показывать развернутым в мобильной версии** — при включённой опции окно чата на мобильных устройствах всегда отображается в развёрнутом виде. Это удобно, например, если на сайте предусмотрена отдельная страница для обратной связи.
Обратите внимание, если опция активна, пользователь не сможет обратиться в линию через мессенджер или электронную почту, даже если эти каналы настроены. В мобильной версии ему будет доступна только переписка в окне чата.
3. ****Настройте авторизацию пользователей в зависимости от назначения онлайн‑чата:
1. **Авторизация с помощью полей в окне чата.**
В блоке **Поля для авторизации пользователя** отметьте поля для заполнения: **Имя**, **Почта** или **Телефон**. Тогда для общения с оператором пользователь будет указывать свои данные в окне авторизации. Информация о клиенте отобразится на [странице созданной сессии](working_in_chat.md#session_information).
Обратите внимание, если пользователь сменит устройство или очистит кеш‑память браузера, он не увидит новые сообщения оператора. Для повторного обращения пользователь снова авторизуется в чате, и в разделе **Линии** создаётся отдельная сессия с теми же данными о клиенте.
Вы также можете настроить окно авторизации:
- ввести текст подсказки для выбранных полей;
- переименовать заголовок формы авторизации;
- изменить название кнопки отправки данных.
При включённых полях для авторизации также [укажите ссылку на политику обработки персональных данных](#privacy-policy).
2. **Без авторизации.**
Не устанавливайте флажки в блоке **Поля для авторизации пользователя**, чтобы пользователь мог написать сообщение, не заполняя персональные данные. Этот вариант подходит для быстрого ответа на вопросы без сохранения истории переписки.
Когда неавторизованный пользователь пишет в онлайн-чат, в разделе **Линии** создаётся сессия без информации о клиенте. Если клиент зайдёт на сайт с другого устройства или очистит кеш‑память браузера, он не увидит новые сообщения оператора. При повторных обращениях создаются отдельные сессии.
3. **Автоматическая авторизация в чате.**
Если пользователь регистрируется на вашем сайте или портале, не устанавливайте флажки в блоке **Поля для авторизации пользователя**, чтобы настроить автоматическую авторизацию в онлайн‑чате. Это полезно для продолжительной коммуникации с клиентом, так как позволяет отслеживать историю переписки.
Если авторизованный на сайте пользователь впервые обращается в LiveChat, в разделе **Линии** создаётся новая сессия. При всех последующих обращениях этого пользователя сессия будет возобновляться. Клиент получит ответ оператора, даже если зайдёт с другого устройства или очистит кеш‑память в браузере. Для этого ему нужно войти на сайт или портал.
Подробнее о настройке автоматической авторизации читайте в статье [«Автоматическая авторизация в LiveChat»](livechat-auto-login.md).
## Блок «JWT-авторизация»
Вы можете настроить аутентификацию пользователей LiveChat на сайте или внешнем портале с помощью JWT (JSON Web Token), чтобы:
- восстанавливать переписку пользователя, даже если он входит на сайт с разных устройств;
- обеспечить дополнительный уровень безопасности при авторизации пользователя.
Когда пользователь запускает LiveChat, выполняется проверка присвоенного ему токена:
- если проверка JWT успешна, пользователь откроет окно чата и сможет начать или продолжить переписку;
- если проверка токена неуспешна, допустим, истёк срок его действия, пользователь не сможет открыть чат.
Обратите внимание, если к линии с LiveChat добавлены [мессенджеры](#messengers) или [электронная почта](#inbox-settings), по кнопке вызова чата на сайте пользователь сможет перейти к нужному каналу связи. Окно LiveСhat для ввода сообщений будет недоступно.
На стороне LiveChat осуществляется только присваивание и проверка токена. Поэтому предварительно в настройках вашего сайта или внешнего портала:
1. Реализуйте логику генерации JWT. Передаваемый в ELMA365 токен в зашифрованном виде должен содержать следующие данные:
````
\{
"sub": "79081441664" // ID пользователя. Может содержать латинские буквы и арабские цифры
"nbf": 1595951760 // временная метка начала действия токена
"exp": 1595955360 // временная метка окончания действия токена
"iat": 1595951760 // временная метка генерации токена
\}
2. ````
Создайте секретный ключ в формате RFC 7519, позволяющий расшифровать токен. Скопируйте ключ.
Чтобы активировать JWT-авторизацию пользователей LiveChat:
1. В ELMA365 перейдите на страницу настроек LiveChat и на вкладке **JWT-авторизация** включите опцию **Использовать JWT-авторизацию**.
2. В появившемся поле **Секретный ключ**\* вставьте секретный ключ.
3. После того как вы настроите, сохраните и опубликуете параметры LiveChat, в [код для размещения чата на сайте](#publish) добавьте функцию и метод для присваивания и передачи токена в ELMA365.
````
function livechatSDK\_onWidgetInitedCallback() \{
try \{
livechatSDK.setToken('inited\_jwt\_token');
\} catch \{
\}
\}
````
В методе \[OBJECT\] можно указать дополнительные функции для работы с токеном:
- обновление токена — автоматически продлевать срок его действия во время работы пользователя в LiveChat. Если после обновления пользователь идентифицируется с просроченным или некорректным токеном, он получит уведомление, а переписка в чате станет недоступной;
- обработка ошибок в блоке \[OBJECT\] — можно задать количество попыток получения токена.
### Блок «Inbox»
Если линия [связана с электронной почтой](inbox.md), слева отображается блок **Inbox**. Чтобы пользователи писали обращения в окне чата и получали ответы операторов на электронную почту, включите опцию и установите параметры:
**(livechat-3.png)**
- **Название чата\*** — укажите заголовок окна для обращения через электронную почту, например, **Служба поддержки**;
- **Приветствие\*** — введите текст, который увидит пользователь, когда нажмёт кнопку вызова чата и выберет электронную почту;
- **Поля для авторизации пользователя** — отметьте обязательные поля, которые должен заполнить пользователь, чтобы отправить сообщение. Поля **Ваш Email** и **Тело письма** отмечены по умолчанию. Дополнительно можно установить **Имя** и **Тема письма**. Указанные данные будут отображаться на странице сессии. Также вы можете:
- ввести текст подсказки для выбранных полей;
- изменить название кнопки отправки сообщения;
- переименовать кнопку отмены сообщения.
При использовании электронной почты в онлайн-чате также настройте ссылку на политику обработки персональных данных.
### Блок «Персональные данные»
Блок отображается, если в настройках онлайн-чата вы добавили [поля для авторизации](#login-fields) или подключили к LiveChat электронную почту. Для отправки сообщения пользователь указывает свои контактные данные и предоставляет согласие на их обработку, отмечая флажком специальное поле.
Настройте текст поля, используя одну из опций:
**(livechat-4.png)**
- **Ссылка на политику обработки персональных данных\*** — укажите адрес страницы с информацией о политике сбора данных. Он добавится в текст, заданный по умолчанию;
- **Использовать произвольный текст согласия на обработку персональных данных** — включите опцию и в появившемся редакторе введите текст поля. Вставьте в него ссылку на вашу политику обработки персональных данных.
### Блок «Мессенджеры»
Блок отображается, если к линии подключены [мессенджеры](connection_to_line.md) или [социальная сеть ВКонтакте](vk.md). Отметьте каналы, которые будут доступны на сайте при нажатии кнопки вызова чата. Пользователь автоматически перейдёт на страницу социальной сети или в веб‑версию мессенджера.
### Блок «Оформление»
Настройте внешний вид чата:
**(livechat-5.png)**
- **Логотип** — загрузите изображение, которое будет отображаться на кнопке вызова чата;
- **Тема оформления** — выберите основной цвет чата;
- **Фон чата** — выберите изображение для фона чата;
Затем задайте параметры кнопки, открывающей чат:
**(livechat-6.png)**
- **Размер кнопки** — маленькая, средняя или большая;
- **Расположение кнопки** — укажите, в каком углу экрана будет располагаться кнопка;
- **Позиционирование** — в зависимости от выбранного расположения кнопки задайте для неё отступы от краёв экрана, например справа и снизу. Отступы настраиваются отдельно для ПК и мобильных устройств. Минимальное значение — 0 пикселей, максимальное — 1000.
### Блок «Настройки событий»
Вы можете задать правила, при срабатывании которых окно с размещённым на сайте чатом будет автоматически раскрываться. Например, пользователь увидит окно с чатом, в котором отображается приветствие, если проведёт на странице сайта больше двух минут.
Для настройки правил автораскрытия:
1. В блоке **Настройки событий** нажмите кнопку **+ Действие**.
2. В открывшемся окне заполните поля:
**(livechat-7.png)**
- **Название\*** — введите название для события;
- **Если выполняются условия** — укажите, какое количество условий должно быть выполнено для автоматического раскрытия чата:
- **Каждое** — необходимо, чтобы сработали все настроенные условия;
- **Любое** — для выполнения правила достаточно одного выполненного условия.
Создайте условия для раскрытия чата. Для этого нажмите **Выберите атрибут**. Из открывшегося списка выберите значение, которое будет проверяться правилом:
- **URL текущей страницы** — выберите, где будет раскрываться чат. Чтобы окно с чатом появлялось только на определённой странице, выберите знак равенства и введите полный URL-адрес. Укажите опцию **Содержит** и часть адреса для открытия чата на всех страницах, в URL которых есть совпадения;
- **Время на странице** — укажите время в секундах, проведённое пользователем на определённой странице, после которого откроется онлайн-чат;
- **Время на сайте** — укажите время в секундах, проведённое пользователем на всех страницах сайта, после которого произойдёт автораскрытие чата;
- **Действие\*** — выберите действие, которое произойдёт, если правило сработает:
- **Открыть форму для отправки сообщения на e-mail** — в открывшейся на сайте форме клиент сможет отправить запрос в линию и указать свою почту для получения ответа. Для этого действия к линии необходимо подключить [электронную почту](inbox.md).
Обратите внимание, если включена опция [Показывать развернутым в мобильной версии](#expand-in-mobile-version), обращение в линию через почту недоступно на мобильных устройствах;
- **Отобразить системное сообщение в чате** — на странице откроется окно с установленным в поле **Сообщение** текстом. Пользователь сможет отправить запрос в линию и получить ответ в окне чата;
- **Сообщение\*** — введите текст, который увидит пользователь в окне чата. Поле отображается при выборе действия **Отобразить системное сообщение в чате**.
3. Сохраните настроенное правило.
С помощью переключателя справа от названия вы можете выключить или включить правило.
Чтобы отредактировать или удалить правило, нажмите значок **(three-dots-icon-vert-blue.png)** и выберите действие.
**(livechat-8.png)**
## Шаг 3. Опубликовать чат
После завершения настройки:
1. Нажмите в верхней части страницы кнопку **Сохранить и опубликовать**. Если не заполнены обязательные поля, вы увидите под кнопкой предупреждение.
При необходимости вы можете вернуть чат к настройкам по умолчанию, нажав кнопку **Сбросить настройки**.
2. Скопируйте сгенерированный код для вставки чата в сайт, нажав кнопку **Скопировать код в буфер** в верхней части вкладки.
3. Разместите онлайн-чат на сайте или [портале](livechat-on-portal.md).
После этого посетители вашего сайта смогут воспользоваться чатом для отправки сообщений.
При создании новой сессии с пользователем, обратившимся в линию через LiveChat, в ELMA365 автоматически фиксируются UTM‑метки. Подробнее о работе с ними читайте в статье [«UTM-метки в LiveChat»](livechat-utm.md).
Чтобы скрыть чат с сайта или портала, нажмите в верхней части страницы **Отключить**. Установленные настройки сохранятся и применятся при повторном включении чата.