Частые вопросы

Как обновить виджет и при этом сохранить свои настройки конфигурации

Для начала необходимо ознакомиться со списком изменений, которые вошли в новую версию, по ссылке

Получить обновленный код вы можете следующими способами:

• Скачать со страницы требуемую Вам версию.
• Скачать с главной страницы -> нажать на кнопку "Code" -> нажать на "Download ZIP"

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

Необходимо взять файл threadswidget-6.9.1.min.js и разместить данный файл в то же место, где лежала предыдущая версия чата (это может быть корень сайта/каталог сайта)

В конфигурационном файле settings.json изменить значение filename – разница будет лишь в версии виджета, которая указана в имени

Например

Предыдущее значение было:

"filename": "../../threadswidget-3.28.0.min.js",

Мы скачали версию виджета 6.9.1 и изменяем на

"filename": "../../threadswidget-6.9.1.min.js",

В некоторых случаях, если это указано в realese notes, необходимо обновить код инициализации виджета. Код представлен в документации.

Как управлять разрешениями по отправке файлов клиентом

1. Для того чтобы отключить возможность прикреплять вложения к сообщениям, измените настройку buttonsPlacement компонента ChatInput, исключив из списка кнопок элемент "attach".

Например

Предыдущее значение настройки buttonsPlacementбыло:

"buttonsPlacement": [
  ["emoji"],
  ["attach", "send"]
]

Для отключения возможности прикреплять вложения убираем элемент "attach":

"buttonsPlacement": [
  ["emoji"],
  ["send"]
]

2. Для того, чтобы запретить пользователю прикреплять вложения конкретных типов и/или изменить максимальный размер прикрепляемых файлов обратитесь в техническую поддержку за помощью по настройке.

Что такое WebPush-уведомления и как проверить их работу

Поддержка WebPush-уведомлений для веб-чата помогает расширить возможности коммуникации с клиентами. Технология позволяет доставить сообщения до клиента, даже когда вкладка с виджетом чата не открыта.

Для работы WebPush используется service worker (sw) - скрипт, который браузер запускает в фоновом режиме, отдельно от страницы.

Инструкцию по настройке WebPush, получения скрипта service worker можно найти в разделе Руководство по началу работы.

Для проверки WebPush-уведомлений, необходимо выполнить следующее:

1. Авторизуйтесь в Интерфейсе оператора edna и переведите оператора в статус "Активен" с помощью переключателя в правой верхней части интерфейса (реквизиты для доступа вам сообщит аккаунт-менеджер)

2. В другом браузере загрузите страницу с виджетом и отправьте сообщение. В Интерфейсе оператора вы увидите обращение из чата

3. Закройте страницу с виджетом (браузер при этом должен быть запущен)

4. Ответьте на сообщение в Интерфейсе оператора

В браузер придет WebPush-уведомление о поступлении нового сообщения от оператора

Как встроить виджет в авторизованную зону сайта (Личный кабинет, Интернет-Банк)

В авторизованной зоне сайта можно передать в Чат идентификатор, уникальный для каждого пользователя. Это необходимо для создания связи "клиент в АРМ"-"пользователь сайта".

Сессия такого пользователя позволяет получить историю переписки в любой вкладке, в которой будет открыт сайт с чатом в рамках авторизованной зоны. Более подробно с настройкой инициализации в авторизованной зоне можно ознакомиться в разделе Интеграция виджета Чата.

Как изменить изображение на стандартной стартовой кнопке чата

Стандартное изображение в виде "облачка" можно изменить на свое, более подходящее для вашего сайта. Для этого необходимо:

• Закодировать нужное изображение в формат base64 с помощью онлайн-сервисов
• В конфигурационном файле settings.json в секции theme настроить параметр ChatButton
• В значении "backgroundImage" указать ссылку на изображение в формате base64
• Также скорректировать размеры изображения, кнопки, фон кнопки, отступы на подходящие

Пример

"theme": {
    "desktop": {
        "ChatButton": {
        "backgroundImage": "data:image/jpeg;base64...."
        "backgroundColor": "#61298a",
        "backgroundSize": "80%",
        "width": "100px",
        "height": "100px",
        "right": "20px",
        "bottom": "72px",
        "borderRadius": "50%",
        "boxShadow": "0 4px 25px 0px rgba(0,0,0,.5)"
        }
    }
},

Дефолтное состояние	После

Как сделать свою кнопку чата

Вместо стандартной стартовой кнопки может использоваться пользовательская стартовая кнопка, чтобы показать/скрыть Чат. Для переключения Чата в режим без стандартной стартовой кнопки нужно установить в файле конфигурации settings.json параметр isContainerHidden в значение true. С примером файла можно ознакомиться здесь.

При использовании кастомной кнопки вам необходимо обеспечить выполнение стандартных бизнес-кейсов для пользователя чата. Для этого обеспечьте вызов этих методов, встроив их в код своей страницы сайта.

Обязательный сценарий:

1. Открывать виджет (контейнер с чатом), когда пользователь сайта нажимает на вашу кнопку. Метод ThreadsWidget.showChat().

Необязательные сценарии (используйте, если хотите применить эти возможности)

1. Показывать на вашей кнопке количество непрочитанных сообщений пользователем. Метод ThreadsWidget.on(event, callback) позволяет подписаться на событие changeUnreadCounter, при наступлении которого функция callback получит количество непрочитанных пользователем сообщений. Полученное значение Вы можете использовать для отображения на своей кнопке.
2. Скрыть кнопку, если настроены правила показа виджета в интерфейсе администратора чат-платформы (в нерабочее время контактного центра или по любой другой причине). Метод ThreadsWidget.on(event, callback) позволяет подписаться на событие changeOperationMode. При наступлении события в функцию callback передадутся параметры по какой причине Чат в данный момент стал недоступным. Данные параметры Вы можете использовать для скрытия своей кнопки или предупреждения клиента на своей стороне.
3. Принудительно скрыть чат в любой момент. Метод ThreadsWidget.hideChat() .

Дополнительное описание по использованию методов API можно найти в разделе Методы и свойства API. Примеры размещения в коде можно посмотреть в файле example.html.

Как изменить локализацию виджета и настроить свои тексты

Управление языковыми локализациями осуществляется в файле настроек settings.json с помощью параметров locale и locales. В параметре locale необходимо указать предпочтительную локаль.

Тексты можно настроить в конфигурационном файле settings.json, в параметре locales нужно указать:

• ключ надписи
• код языка
• значение для этого языка

Ознакомиться с примером файла можно по ссылке Locale

Также более подробно с настройкой языковой локализации можно ознакомиться по ссылке Настройка языковой локализации

Как настроить расширенную темизацию виджета

Оформление виджета осуществляется в файле настроек settings.json в секции theme. Ознакомиться с примером настройки внешнего вида отдельных компонентов Чата можно по ссылке Theming. В данном примере показаны настройки:

• Размеры области чата
• Цвет фона Чата
• Внешний вид сообщений клиента и оператора
• Уведомление о том, что оператор набирает сообщение

Описание всех доступных для настройки компонентов находится в разделе Настройка темы оформления.

Как установить виджет через npm или yarn

Репозиторий содержит файл package.json, что позволяет использовать виджет Чата как модуль Node.js.

Для установки виджета Чата пакетным менеджером npm используйте команду

npm i git+https://github.com/ThreadsMobileLib/edna-sdk-web.git

Для установки виджета Чата пакетным менеджером yarn используйте команду

yarn add git+https://github.com/ThreadsMobileLib/edna-sdk-web.git

Как установить код Чата через Google Tag Manager

Обратите внимание, что любые проблемы с Google Tag Manager также влияют и на работу виджета Чата. Если у вас есть возможность прямой вставки кода на ваш веб-сайт, то лучше воспользоваться ей.

Чтобы установить виджет Чата на свой веб-сайт через Google Tag Manager потребуется выполнить схожие шаги, описанные в Руководстве по началу работы, за исключением того, что код инициализации будет размещен не на странице, а на платформе GTM.

1. Перед началом установки убедитесь, что код Google Tag Manager установлен на сайте, где вы хотите разместить виджет Чата.

2. Выполните шаги из инструкции Руководство по началу работы до п.9.

3. Откройте панель Диспетчера тегов Google и перейдите в Рабочая область -> Обзор -> Новый тег.

4. Нажмите Добавить новый тег -> Конфигурация тега и выберите Пользовательский HTML.

5. Скопируйте код инициализации виджета со страницы Руководства по началу работы и вставьте его в поле HTML.

6. В самом конце скрипта инициализации задается путь к файлу настроек settings.json (на скриншоте взят в красную рамку). Обязательно установите в качестве значения этого параметра абсолютный путь к файлу настроек от корня вашего сайта. Подробнее о подключении файла настроек см. в разделе Руководство по началу работы.

7. Прокрутите вниз и нажмите, чтобы выбрать триггер для активации тега на вашем веб-сайте.

8. Выберите триггер All pages и оставьте остальные настройки по умолчанию.

9. Нажмите Сохранить и укажите имя тега.

10. Нажмите Отправить в правом верхнем углу рабочей области.

11. Добавьте название и описание версии, а затем нажмите Опубликовать.

12. Через несколько минут виджет Чата появится на вашем веб-сайте.