Интеграция виджета Чата
Подключение виджета
Для установки виджета Чата на странице, где он будет отображаться, необходимо перед закрывающим тегом </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
на вашем сайте таким образом, чтобы данный файл был доступен по адресу http(s)://your.site.ru/your/path/to/settings.json
. Мы рекомендуем разместить файл в тот же каталог, где расположен файл чата threadswidget-6.19.0.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.
Авторизованная и неавторизованная зоны
Виджет Чата может находиться в одном из двух состояний:
- Гостевой режим. Время существования сессии пользователя определяется настройками, которые указаны в
settings.json
.webchat/backend/unauthorizedHistory
. Пример таких настроек:
{
"cookie": {"Max-Age": 15552000}
}
Где Max-Age
- время хранения истории для посетителя сайта в секундах.
Идентификатор сессии хранится в cookie, параметры хранения задаются в объекте webchat/backend/unauthorizedHistory/cookie
, где ключ соответствует спецификациям директив cookie.
- Авторизованный режим. Этот режим можно задействовать для авторизованого пользователя сайта, передав в Чат идентификатор, уникальный для каждого пользователя - для создания связи "клиент в АРМ"-"пользователь сайта". Сессия такого пользователя не привязана к текущей вкладке - авторизованный на сайте пользователь сможет получить историю переписки в любой вкладке, где будет открыт сайт с чатом. Для передачи в Чат уникального идентификатора авторизованного пользователя, нужно создать в глобальном 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. Стартовое окно Чата