Интеграция виджета Чата

Подключение виджета

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

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

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

Необходимо разместить файл settings.json на вашем сайте таким образом, чтобы данный файл был доступен по адресу http(s)://your.site.ru/your/path/to/settings.json. Мы рекомендуем разместить файл в тот же каталог, где расположен файл чата threadswidget-6.9.1.min.js.

Важно! В самом конце скрипта инициализации задается путь к файлу настроек settings.json:

... ("settings.json")

Обязательно установите в качестве значения этого параметра абсолютный путь к файлу настроек от корня вашего сайта. Пример:

('/your/path/to/settings.json');

Если необходимо можно задать дополнительные параметры при начальной инициализации.

'/your/path/to/settings.json',
  {
    locale: 'en',
    unavailable: true,
  };

• locale - язык локализации
• unavailable - недоступность чата

При установке параметра unavailable, после загрузки страницы с чатом, чат будет скрыт кроме случаев когда у клиента был активный тред

Настройка виджета

Настройки Чата хранятся в поставляемом файле settings.json. В нем содержится информация по подключению к файловому хранилищу, настройки темы оформления, настройки соединений и ключи для работы с внешним API edna.

Параметры подключения к внешнему API edna и файловому хранилищу

Эти настройки уникальны для каждого нового подключения. В примерах edna SDK они установлены в значение "FIX_ME" и перед началом эксплуатации их необходимо отредактировать. К таким настройкам относятся:

• webchat/package = <application_package>
• webchat/uid = <application_uid>
• webchat/websocket = <push server websocket URL>
• webchat/datastore = <datastore URL>
• webchat/backend/history = <datastore history URL>
• webchat/backend/rootUrl = <datastore API URL>

Значения этих параметров вы получите от менеджера, ответственного за подключение.

Примечание В случае развертывания edna Datastore по модели on-premise (в контуре заказчика) параметры webchat/datastore, webchat/backend/history и backend/rootUrl будут зависеть от адреса, по которому будет доступен установленный edna Datastore.

Авторизованная и неавторизованная зоны

Виджет Чата может находиться в одном из двух состояний:

1. Гостевой режим. Время существования сессии пользователя определяется настройками, которые указаны в settings.json. webchat/backend/unauthorizedHistory. Пример таких настроек:

{
  "count": 20,
  "enable": true,
  "cookie": {"Max-Age": 15552000}
}

Где count - количество загружаемых сообщений за одно обращение к серверу (запрос выполняется при загрузке виджета и при выполнении пользователем скролла вверх в чате); enable - включение/выключение функции хранения истории; Max-Age - время хранения истории для посетителя сайта в секундах.

Идентификатор сессии хранится в cookie, параметры хранения задаются в объекте webchat/backend/unauthorizedHistory/cookie, где ключ соответствует спецификациям директив cookie.

2. Авторизованный режим. Этот режим можно задействовать для авторизованого пользователя сайта, передав в Чат идентификатор, уникальный для каждого пользователя - для создания связи "клиент в АРМ"-"пользователь сайта". Сессия такого пользователя не привязана к текущей вкладке - авторизованный на сайте пользователь сможет получить историю переписки в любой вкладке, где будет открыт сайт с чатом. Для передачи в Чат уникального идентификатора авторизованного пользователя, нужно создать в глобальном Javascript-объекте window свойство, имя которого задается в settings.json как значение параметра clientId. Сделать это нужно до кода инициализации Чата. Строка в settings.json, в самом простом виде, может выглядеть так:

"clientId": "clientId",

Т.е., если вы решили поместить уникальный идентификатор пользователя в свойство объекта window, которое вы решили назвать clientId, как в случае выше, то перед кодом инициализации следует вставить строку

window.clientId = 'идентификатор_пользователя';

Таким же образом имеется возможность передать дополнительные клиентские данные. Эти данные будут отображаться в общей информации о клиенте в АРМ оператора. Установите в параметре clientData settings.json имя свойства, в котором будете передавать данные клиента. Обычно название оставляют таким же - clientData, как в примере ниже:

"clientData": "clientData",

Затем в глобальном Javascript-объекте window задайте значение этого свойства. Для этого перед кодом инициализации добавьте строку

window.clientData = '<клиентские данные>';

где <клиентские данные> - JSON-объект, преобразованный в строку. Как видим, в примере данные передаются в window.clientData, так как именно clientData был задан в качестве имени параметра.

Пример передачи клиентских данных, состоящих из name, phone, email, personal_manager и customField:

window.clientData =
  '{"name":"Name Surname","phone":"+7-999-999-99-99","email":"e@mail.com","personal_manager":"login","customField":"customValue"}';

Примечание: Примеры в SDK содержат все необходимые настройки.

Расширенная авторизация (опционально)

При необходимости, возможно передавать дополнительные данные в запросах на сервер. За эти настройки отвечает секция параметров extendedAuth в settings.json.

Параметр dataKey - строка, которая содержит имя свойства в глобальном Javascript-объекте window, в котором хранится объект с расширенными данными для авторизации. Необязательный параметр, значение по умоланию extendedAuth

window.extendedAuth = <данные в формате JSON>;

Например:

{
  "custom-property": "value for custom header",
  "token": "some token value",
  "type": "token type"
}

Параметр cookie.enabled - включение и отключение режима расширенной авторизации для HTTP(S)-запросов и Websocket-подключений посредством передачи cookie (boolean) Параметр cookie.options - дополнительные атрибуты заголовков cookie (object) Параметр ws.enabled - включение и отключение режима расширенной авторизации для Websocket-подключений (boolean) Параметр ws.dataMap - данные для авторизации Websocket-соединения (object) Параметр http.enabled - включение и отключение режима расширенной авторизации для HTTP(S)-запросов (boolean) Параметр http.headersMap - объект, ключи которого это имена заголовоков, передаваемых в HTTP(S)-запросах, а их значения - это имена свойств из объекта с расширенными данными. Таким способом можно настроить передачу любого количества произвольных заголовков.

Пример:

"extendedAuth": {
    "dataKey": "extendedAuth",
    "http": {
        "enabled": true,
        "headersMap": {
            "Header-Name": "custom-property",
            "X-Auth-Token": "token",
            "X-Token-Type": "type"
        }
    }
}

Пример запроса с дополнительными заголовками:

GET /some/backend/url
Host: example.com
Content-Type: application/json
Header-Name: value for custom header
X-Auth-Token: some token value
X-Token-Type: token type
...

Запуск Чата

После сохранения изменений, откройте страницу с Чатом в браузере. В нижнем правом углу браузера появится кнопка для открытия Чата. При нажатии на нее загрузится стартовое окно Чата (рис. 1).

Рис. 1. Стартовое окно Чата