Руководство по началу работы
Виджет Чата предназначен для взаимодействия ваших клиентов и компании, обеспечивает прием и отправку сообщений. Передача сообщений происходит с помощью протокола 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.19.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, или обратиться к своему аккаунт-менеджеру