# Онлайн-чаты

Документация по работе с Открытыми Линиями Битрикс24

# Интеграция онлайн-чата на сторонние ресурсы

## Создание виджета

Чтобы создать виджет на сайт, для начала нужно создать открытую линию: В панели управления корпортала, слева перейдите во вкладку "Контакт-Центр".

<p class="callout info">Если вкладки "Контакт-Центр" нет - нажмите на опцию "Ещё", тогда панель управления увеличиться</p>

После мы видим все возможности открытых линий: телеграм-боты, вк-боты, онлайн чаты и тд.  
Выбираем опцию "Онлайн-чат" и, при нажатии, в контекстном меню выбираем "Создать новую открытую линию".

[![image-1699618125284.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618125284.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618125284.png)

После чего во всплывающем окне настройки онлайн-чата Битрикс уже предлагает подключить виджет онлайн-чата - виджет он предоставляет в виде js-скрипта, который вы интегрируете в любой сторонний ресурс.  
В пункте "Настройки канала" можно выбрать уже созданную открытую линию(если мы её создали) или создать её с нуля.

[![image-1699618166088.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618166088.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618166088.png)

## Настройка Открытой Линии

Нажимаем на кнопку "Настроить" или "Создать новую открытую линию". Принципиально важными настройками является "Очередь" и "Автоматические действия".  
На "Очередь" мы назначаем сотрудников, которые будут привязаны к данной открытой линии, настраиваем распределение отправки обращений(либо всем и сразу, либо последовательно, либо равномерно). **Так же важным моментом является то, что клиент, который обратился, может не быть в базе crm, поэтому в этом же пункте настраиваем как будет заполняться его лид** **(либо лид создаётся автоматически, либо вручную - клиент сам заполняет все поля).**

[![image-1699618245342.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618245342.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618245342.png)

<span style="text-decoration: underline;"><span style="color: #000000; text-decoration: underline;">Второстепенные пункты настройки:</span></span>

- <span style="color: #000000;">"Рабочее время" - есть возможность указать праздничные дни, выходные дни, добавить автоматическое сообщение, в случае если открытая линия в текущей момент не работает(скриншот номер 4)</span>
- <span style="color: #000000;">"Соглашение" - Битрикс сам подсказывает какое соглашение нужно поставить в рамках РФ(если ваш онлайн-чат вообще его предполагает)</span>[![image-1699618338384.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618338384.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618338384.png)
- "Автоматические действия" позволяет автоматизировать диалог. В плане приветствия, бездействия клиента, завершения диалога. Так же в этом пункте мы указываем способ сбора данных о клиенте. Мы можем создать новую CRM-форму, которую клиент будет заполнять, как только откроет диалог (правило сбора/показа формы настраиваются в соответствующих опциях) 
    
    [![image-1699618427774.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618427774.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618427774.png)
    
    Касательно автоматизации - есть возможность отправлять сообщения автономно о бездействие, при завершении обращения. 
    
    [![image-1699618468402.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618468402.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618468402.png)
- "Список быстрых ответов". При создании нового списка быстрых ответов и последующего его выбора в открытых линиях, в чате каждого сотрудника на этой линии будут доступны быстрые сообщение, которые мы написали в списке. 
    
    [![image-1699618493390.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618493390.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618493390.png)
    
    [![image-1699618497476.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618497476.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618497476.png)
    
    Так же у списка есть свои права доступа, но по логике если группа людей сидит на линии и отвечает на одни и те же вопросы, то и разграничения доступа к списку быстрых ответов не должно быть.
- "Чат-боты" подключается из модулей, которые есть в bitrix Marketplace
-  "Оценка качества". В нём есть два варианта как клиент может оценить диалог с оператором: один вариант предоставляется для web-сайтов, другой для различных ботов соц.сетей.
- "KPI" задаётся для учёта, как быстро операторы реагируют на обращения.
- "Прочее". Это поле ввода названия линии и отметка статуса активности линии. Остальные опции по усмотрению. Нужен ли alert, если клиент закрывает чат - на усмотрение опять же 
    
    [![image-1699618670288.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699618670288.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699618670288.png)

## Итог

После всех настроек линии и подключения чата у нас будет публичная ссылка на чат в браузере **(не забудьте указать URL!)** и сам скрипт-код.

<p class="callout info">Чтобы протестировать его работу, стоит открыть другой браузер, где мы не логинились в битриксе, как сотрудник</p>

[![image-1699619154908.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699619154908.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699619154908.png)

Заполнили форму - лид сразу падает в crm(уведомление придёт на корп ответственным за линию). Всё взаимодействие оператора с клиентом происходит в чате "Открытых линий" (опция ниже оповещений на корпортале). Операторы могут принимать обращение, закрывать, перенаправлять клиента.

[![image-1699619161403.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699619161403.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699619161403.png)

[![image-1699619173858.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699619173858.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699619173858.png)

[![image-1699619180029.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699619180029.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699619180029.png)

[![image-1699619184192.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1699619184192.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1699619184192.png)

# Привязка сообщества ВКонтакте к открытым линиям

## Создание сообщества ВКонтакте

Для того чтобы подключить сообщество ВКонтакте к Открытым Линиям требуется аккаунт ВКонтакте, который мы привяжем к битриксу. Перед этим создаём сообщество, настройки которого не принципиальны.

<p class="callout info">Сообщество ВКонтакте желательно сделать видимым для всех пользователей. В настройках приватности задайте сообществу статус "Публичный"</p>

## Привязка сообщества к чату открытых линий

Выбираем "Контакт-Центр" из левого меню и в его возможностях кликаем по функции ВКонтакте.

[![image-1700146104463.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700146104463.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700146104463.png)

При привязки аккаунта ВК к Битриксу, корппортал сам покажет доступные группы для подключения доступные группы.

<p class="callout warning">Битрикс видит сообщества ВК, в которых привязанный аккаунт ВКонтакте имеет права администратора</p>

[![image-1700147320095.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147320095.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147320095.png)

[![image-1700147326569.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147326569.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147326569.png)

Для чистоты изучения создадим отдельную открытую линию для сообщества. Настройки оставим по умолчанию, они не влияют на работу.

[![image-1700147372882.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147372882.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147372882.png)

## Итог

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

[![image-1700147406654.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147406654.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147406654.png)

[![image-1700147411564.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147411564.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147411564.png)

[![image-1700147417180.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147417180.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147417180.png)

# Привязка Телеграм бота к чату открытых линий

## Создание Телеграм бота

Чтобы создать связку Открытой Линии с ботом телеграма для начала создадим чат-бота через личный аккаунт телеграм. Для этого в поиске по чатам напишем @[BotFather](https://t.me/BotFather) - этот бот позволяет создавать пользователю собственных ботов.

<p class="callout warning">ВАЖНО: Лимит ботов на один телеграм-аккаунт ограничен - максимальное количество 20.</p>

В чате с ботом прописываем последовательно следующие команды:

**/start** -&gt; **/newbot** -&gt; вводим имя нашего бота.

<p class="callout warning">ВАЖНО: в никнейме бота в конце должен быть префикс "bot". Пример: onlineChat\_bot, testBitrix\_bot</p>

После этого BotFather отправляет нам токен бота, которого мы создали - он пригодится для его интеграции в битрикс.

<p class="callout info">Если вы утеряли токен данного бота, то его можно узнать по команде **/token**</p>

<p class="callout info">Поменять токен тоже возможно, для этого существует команда **/revoke**</p>

[![image-1700147793109.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147793109.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147793109.png)

## Интеграция бота телеграм к чату

Перейдём в Контакт-Центр Битрикса и выберем опцию "Telegram". По аналогии с интеграцией ВКонтакте так же создадим отдельную открытую линию для телеграм-бота и нажмём зелёную кнопку "Подключить".

[![image-1700147853412.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147853412.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147853412.png)

После этого будет необходимо ввести тот токен, который выслал нам @BotFather. Копируем токен доступа, нажимаем "Подключить". Битрикс после этого нам даст ссылку на нашего телеграм-бота.

<p class="callout info">Ссылку на телеграм-бота можно узнать также у @BotFather</p>

[![image-1700147890168.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700147890168.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700147890168.png)

## Итог

Протестируем взаимодействие бота с открытыми линиями. напишем нашему боту пару сообщений. Настройки открытой линии предполагается сделать с автоответами на первое сообщение, чтобы видеть автономную реакцию на начало диалога "пользователь-оператор". Пользователь начинает общение с ботом, сообщение отправляется в открытую линию и все операторы, которые есть на ней, видят его. Примем сообщение и начнем диалог

[![image-1700148028798.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148028798.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148028798.png)

[![image-1700148036252.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148036252.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148036252.png)

## Важные нюансы

Очень важным моментам интеграций соц.сетей является создание лида на основе контактных данных, которые предоставляет пользователь в соц.сетях. Лид может создаться только с именем, или фио, или полной информацией - это всё зависит от конфиденциальности его аккаунта.

# Интеграция социальных сетей в виде виджета на внешний ресурс

Для того, чтобы перенести в онлайн чат с телеграм-ботом или же с сообществом ВКонтакте на любой внешний ресурс(это может быть сайт, сделанный на битрикс или любой иной) понадобится в Контакт-центре выбрать опцию "Виджет на сайт" , которую мы уже успели рассмотреть в предыдущих статьях.

В пункте "Каналы подключенные к виджету" выберем две нашей открытой линии - линия ВК и линия Телеграм-бота. По умолчанию поставить crm-форму типа "Контактные данные" , настроить рабочее время лучше всего делать по отдельным линиям.

<p class="callout warning">Логика Битрикса такова, что если он видит несколько одинаковых опций, которые пытаются взаимодействовать друг с другом, но их настройки отличаются, то он сделает **пересечение**, а не объединение настроек.   
Пример: Будут учитываться только те праздничные дни/выходные, которые есть и в первой открытой линии, и во второй.</p>

Автоматическое приветствие оставим по умолчанию.  
Нажимаем кнопку "Сохранить" и сверху битрикс показывает скрипт для вставки в любую вёрстку

<p class="callout warning">ВАЖНО: Скрипт лучше вставлять в тэге &lt;head&gt;</p>

[![image-1700148634327.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148634327.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148634327.png)

[![image-1700148639711.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148639711.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148639711.png)

Теперь у нас есть полноценный виджет, который поддерживает онлайн чат с помощью Вк-группы, Телеграм-бота на любой сторонний ресурс.

Протестируем виджет на сайте "Инженерный Старт".

[![image-1700148672150.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148672150.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148672150.png)

[![image-1700148677433.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148677433.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148677433.png)

[![image-1700148682827.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148682827.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148682827.png)

# Настройка прав доступа открытой линии

Настроить права доступа можно из окна любой открытой линии. Продемонстрируем это на линии вк-сообщества. В блоке "Настройка канала" находим опцию "Права доступа" и нажимаем на "Настроить".

[![image-1700148779994.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148779994.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148779994.png)

Права доступа к Открытым линиям выдаются на:

- Список открытых линий - Просмотр\\Изменение
- Подключение каналов коммуникаций - Изменение
- Статистика разговоров - Просмотр
- История разговора - Просмотр
- Подключение к разговору - Выполнение
- Оценка разговора руководителем - Выполнение
- Общие настройки - Изменение

В всплывающем меню есть две секции: Права доступа и список ролей. У Битрикса есть свои роли по умолчанию - Администратор(права суперадмина), Директор, Менеджер(самые минимальные права). Если есть надобность скорректировать права данных ролей или добавить новые, то Битрикс даёт и такую возможность. Конкретно нас интересует сейчас не создание/изменение прав определенной роли, а управление распределением ролей. Это делается с помощью опции "Добавить право доступа".

[![image-1700148825936.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148825936.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148825936.png)

[![image-1700148830280.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700148830280.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700148830280.png)

С помощью этой опции мы можем задать права доступа определённой группе лиц. На корппортале уже есть множество групп, хотя Битрикс нас не ограничивает в количестве групп, поэтому для определенных задач есть возможность сформировать новую группу сотрудников.

Права доступа можно назначить:

- Группе пользователей
- Конкретному пользователю
- Сотрудникам и отделам
- Группам социальной сети

<p class="callout warning">ВАЖНОЕ примечание: Права доступа выдаются на все открытые линии портала, поэтому перейти в настройки прав можно из слайдера любого канала открытых линий !</p>

# Журнал аудита, история диалогов оператора и клиента открытой линии

## История переписки клиента по его карточки в CRM

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

[![image-1700149054401.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149054401.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149054401.png)

[![image-1700149061198.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149061198.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149061198.png)

## Экспорт и просмотр истории диалогов

Историю переписки можно просмотреть с помощью способа, который я описал выше. Есть иной вариант:  
Переходим в пункт "Контакт-центр" из меню. В окне Контакт-центра есть меню, выбираем опцию "история диалогов":

[![image-1700149143417.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149143417.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149143417.png)

Далее перед нами список всех диалогов. Диалоги открытой линии мы можем отфильтровать, нажав на "шестерёнку" или же в поиске вписать конкретную линию

[![image-1700149152925.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149152925.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149152925.png)

Перед нами множество диалогов(либо уже с фильтрами, либо все). Чтобы просмотреть историю желаемого необходимо кликнуть на бургер-меню, которое относится к конкретной позиции в списке. В контекстном меню выберем "История" или "Открыть диалог" - принципиальных отличий в опциях нет. История показывает более сжатый формат диалога - небольшой поп-ап без каких-либо опций. А открытие диалога открывает его прямо в окне "Открытых линий".

[![image-1700149182811.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149182811.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149182811.png)

Вот таким образом выглядит опция "История".

[![image-1700149195520.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149195520.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149195520.png)

А вот так выглядит опция "Открыть диалог"

[![image-1700149211748.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149211748.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149211748.png)

К сожалению, максимум какой экспорт можно сделать из всех чатов, так это сам список диалогов. Экспорт происходит в формате excel-таблицы - полная копия того, что мы видим в самом корпоративном портале.

<p class="callout info">Время ответа, длительность диалога битрикс экспортит в миллисекунды</p>

[![image-1700149323476.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149323476.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149323476.png)

[![image-1700149327802.png](https://howto.stankin.ru/uploads/images/gallery/2023-11/scaled-1680-/image-1700149327802.png)](https://howto.stankin.ru/uploads/images/gallery/2023-11/image-1700149327802.png)