Версия: 6.18.0

Руководство по началу работы

Виджет Чата предназначен для взаимодействия ваших клиентов и компании, обеспечивает прием и отправку сообщений. Передача сообщений происходит с помощью протокола WebSocket.

В этом руководстве вы найдете инструкции для настройки и включения чата на своем сайте.

Следуйте приведенному алгоритму:

1. Получите у аккаунт-менеджера реквизиты для подключения библиотеки для следующих параметров:

webchat/package
webchat/uid
webchat/websocket
webchat/datastore
webchat/backend/rootUrl
webchat/backend/history

2. Скачайте актуальную версию виджета для настройки чата

Важно: версия виджета не должна быть новее версии backend приложения

Из раздела releases

Либо с главной страницы -> нажать на кнопку Code -> нажать на Download ZIP

3. Разместите файл виджета `threadswidget-6.18.0.min.js` в корне или каком-либо каталоге своего сайта

4. Скачайте пример конфигурационного файла `settings.json`

Разместите файл settings.json в тот же каталог, где расположен Чат. Все настройки виджета производятся в данном файле. Путь к нему необходимо будет указать далее при инициализации виджета (п.9)

5. Настройте в файле `settings.json` параметры, данные которых были получены от аккаунт-менеджера на шаге 1.

6. Настройте цветовую схему, подходящую вашему сайту.

В секции skin. В примере файла параметры отвечают за цвета следующих элементов:

Поле	Описание	Значение по умолчанию
`name`	Название темы оформления. Список доступных тем: `mfms`, `threadsim`, `halcyon`, `adaptive`	`"threadsim"`
`width`	Ширина виджета	`"366px"`
`height`	Высота виджета	`"420px"`
`colorMain`	Основной базовый цвет	`"#008aff"`
`colorSecond`	Дополнительный базовый цвет	`"#05b8ff"`
`colorLines`	Цвет линий и сообщений оператора	`"#dee4e9"`
`colorSubText`	Цвет дополнительного текста	`"#6e6e6e"`
`colorText`	Цвет текста	`"#000000"`
`colorBackground`	Фон виджета	`"#ffffff"`

colorMain
1: фон сообщений клиента
2: фон поля ввода сообщения

colorSecond
3: фон области предпросмотра вложений

colorLines
4: фон сообщений оператора

colorSubText
5: цвет кнопки скрытия чата
6: цвет системных сообщений

colorText
7: цвет текста в шапке

colorBackground
8: фон виджета
9: цвет текста области предпросмотра вложений
10: цвет текста поля ввода сообщения

7. Настройте WebPush уведомления:

Создайте проект Firebase для работы пушей.

Инструкция по регистрации в Firebase:

Создайте новый проект

Укажите название проекта

Дождитесь, пока проект будет создан

На странице проекта нажмите на пиктограмму настроек в разделе Project Overview и перейдите в настройки проекта (Project settings)

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

Укажите псевдоним приложения

Получите сгенерированный скрипт service worker

Скрипт service worker приложения останется доступен на странице Project settings.

Параметры из этого скрипта потребуются на следующих шагах для настройки виджета

В разделе Project Settings / Cloud Messaging получите Sender ID (Идентификатор отправителя)

В разделе Project Settings / Service account сгенерируйте приватный ключ (файл в формате JSON):

Передайте вашему аккаунт-менеджеру значение Sender ID и сгенерированный приватный ключ.

Скачайте firebase-messaging-sw.js.

Настройте файл. В config приведите параметры service worker для виджета:

var config = {
  enable: false,
  firebaseConfig: {
    apiKey: 'FIX_ME',
    authDomain: 'FIX_ME',
    projectId: 'FIX_ME',
    storageBucket: 'FIX_ME',
    messagingSenderId: 'FIX_ME',
    appId: 'FIX_ME',
  },
  title: 'edna Chat',
  icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABOUExURUxpcejo6Onp6enp6eTk5Onp6erq6uvr6+np6eXl5enp6ejo6Ovr6+zs7Ojo6Onp6ePj4+rq6pmZmdPT06enp+bm5p6entra2sLCwrm5ueNweO8AAAARdFJOUwBOiKUcunn78A3dnllqk8XwLooT9gAAAWVJREFUSMedllmShSAMRXHggYq+YhLd/0bbtluLJODA/SR1yiQmFxgj6tTEeymE7PmkOnarduRCRxJ8bK+BQSc05KGuljopWWfyqzLADlUp4qMv9aFJNfpGDUqu++pbfSHT6AdqXtSRqKeiUR+Cp6dn3zrcXW+d2eQs6fVRTo0CYQd2KKBQ/T8l6CNhNqdmxMi/2UFz5SNiY1BFw/4R9O3VAK0o/PuZEZ3NEJlReNwQjvIySCgzvnVYvENEx5R+h2jFprfIhEu5Rzjr3yI9I9t702QtmcBHDiIOxwVFFogsFCGJBYgEmlivLzMjeW3lc3JmY4Rs2dbkia7rmp/j/VcquvYxQg1A0bFc4IotdCxhMQhIQBytmHUmIeA0I1jkkASQ07SxXQRzoRDbxWlK9gqxwJQO63uC1NBgvcsTzkODPWzc26w8svGSy6LkSiq5+Aqu15JLvOipUPIgKXn2FD2uHj3hfgChdIQNPQdYDAAAAABJRU5ErkJggg==',
};

где:

enable - настройка включения/выключения функционала (значения: true, false);
firebaseConfig - параметры подключений к платформе firebase, настройка service worker;
title - заголовок, который будет видеть клиент в пуш-уведомлении;
icon - иконка пуш-уведомления в формате base64.

Аналогично настройте секцию pushNotification в файле конфигурации settings.json.

Файл firebase-messaging-sw.js разместите в корне сайта. Данный скрипт должен быть доступен по адресу http(s)://****/firebase-messaging-sw.js (**** - домен на котором осуществляете настройки).

8. Скачайте файл web-notification-sw.js

Файл web-notification-sw.js разместите в корне сайта. Данный скрипт должен быть доступен по адресу http(s)://****/web-notification-sw.js (**** - домен на котором осуществляете настройки). Это необходимо для работы браузерных веб-нотификаций о получении новых сообщений в виджете.

9. Встройте виджет на сайт:

Подключите виджет: Для установки виджета Чата на странице, где он будет отображаться, необходимо перед закрывающим тегом </body> добавить следующий инициализационный код:

<!-- BEGIN CHAT {literal} -->
<script type="text/javascript">
!function(e,a){"use strict";window.ThreadsWidget={},e=e||"/settings.json";function n(e,t){const n=setInterval(function(){ThreadsWidget&&!ThreadsWidget.isDummy&&(clearInterval(n),ThreadsWidget[e]&&ThreadsWidget[e].apply(void 0,t))},100)}ThreadsWidget.isDummy=!0,["hideInvite","version","commitHash","showChat","hideChat","onHideChat","onScenarios","onLoad","on","reInit","init","unInit"].forEach(t=>{ThreadsWidget[t]=(...e)=>{n(t,e)}});const t=function(){const i=new XMLHttpRequest;return function(e,t,n,a){i.onreadystatechange=function(){if(4===i.readyState)if(200===this.status)n(i.response);else{if("function"!=typeof a)throw new Error(i.response);a(i)}},i.open(e,t),i.send()}}();function i(t){t.webchat&&(t.webchat.filename=t.filename),a&&"string"==typeof a&&(t.webchat.currentLocale=a),a&&"object"==typeof a&&(a.locale&&"string"==typeof a.locale&&(t.webchat.currentLocale=a.locale),a.unavailable&&"boolean"==typeof a.unavailable&&(t.webchat.isUnavailableOnStart=a.unavailable));try{sessionStorage.setItem("__threadsWidget",JSON.stringify(t.webchat))}catch(e){window.__threadsWidget=JSON.stringify(t.webchat)}if(t.filename){const e=document.createElement("script"),n=(e.type="text/javascript",e.async=!0,e.src=t.filename,document.getElementsByTagName("script")[0]);n?n.parentNode.insertBefore(e,n):document.body.appendChild(e)}else console.error("Invalid bundle")}function o(){t("GET",e+"?rnd="+Math.random(),function(e){const t=JSON.parse(e);i(t)})}"complete"===document.readyState?o():window.addEventListener("DOMContentLoaded",o,!1)}("settings.json",{});
</script>
<!-- {/literal} END CHAT -->

Подключите файл настроек, указав в самом конце скрипта инициализации путь к settings.json:

...}("settings.json");

Обязательно установите в качестве значения этого параметра абсолютный путь к файлу настроек от корня вашего сайта. Пример: ("/your/path/to/settings.json")

Сохраните изменения и опубликуйте их на своем сайте

Пример расположения файлов

10. Откройте страницу на своем сайте

11. В случае корректной настройки в нижнем правом углу браузера появится кнопка для открытия чата. При нажатии на нее загрузится стартовое окно чата.

После встраивания убедитесь, что все настройки выполнены корректно, проведя несколько простых базовых тестов:

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

При возникновении проблем с отправкой и/или получением сообщений необходимо проверить корректность выполненных настроек.

В случае возникновения вопросов по деталям настройки вы всегда можете уточнить необходимую информацию у наших инженеров внедрения, написав на support@edna.io, или обратиться к своему аккаунт-менеджеру

Руководство по началу работы

Следуйте приведенному алгоритму:​

1. Получите у аккаунт-менеджера реквизиты для подключения библиотеки для следующих параметров:​

2. Скачайте актуальную версию виджета для настройки чата​

3. Разместите файл виджета threadswidget-6.18.0.min.js в корне или каком-либо каталоге своего сайта​

4. Скачайте пример конфигурационного файла settings.json​

5. Настройте в файле settings.json параметры, данные которых были получены от аккаунт-менеджера на шаге 1.​

6. Настройте цветовую схему, подходящую вашему сайту.​

7. Настройте WebPush уведомления:​

8. Скачайте файл web-notification-sw.js​

9. Встройте виджет на сайт:​

10. Откройте страницу на своем сайте​

11. В случае корректной настройки в нижнем правом углу браузера появится кнопка для открытия чата. При нажатии на нее загрузится стартовое окно чата.​