Перейти к основному содержимому
Версия: 6.18.0

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

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

Для установки виджета Чата на странице, где он будет отображаться, необходимо перед закрывающим тегом </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.18.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.

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

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

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

Где Max-Age - время хранения истории для посетителя сайта в секундах.

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

  1. Авторизованный режим. Этот режим можно задействовать для авторизованого пользователя сайта, передав в Чат идентификатор, уникальный для каждого пользователя - для создания связи "клиент в АРМ"-"пользователь сайта". Сессия такого пользователя не привязана к текущей вкладке - авторизованный на сайте пользователь сможет получить историю переписки в любой вкладке, где будет открыт сайт с чатом. Для передачи в Чат уникального идентификатора авторизованного пользователя, нужно создать в глобальном 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. Стартовое окно Чата

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

Последнее обновление