Виджет позволяет интегрировать функцию мессенджера на вебсайт.

Принцип работы

Виджет состоит из двух частей:

  • Подключаемый JavaScript с API для работы с виджетом.
  • Виджет, который открывается в скрытом айфрейме поверх сайта.

На сайт устанавливается скрипт API, который после инициализации добавляет скрытый iFrame c виджетом. API предоставляет простой интерфейс по управлению виджетом, открыть, закрыть и т.д.

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

1. Устоновка IQChannels

2. Размещение скрипта на сайте

2.1. Загрузка API виджета

Для этого в тег HEAD добавляем:

<script type="text/javascript" src="http://localhost:3001/widget/widget.min.js"></script>

2.2. Инициализация виджета

Виджет может быть инициализирован как анонимный (для размещения на любом сайте без авторизации), либо в защищенном режиме, если он встраивается личный кабинет, защищенный паролем (интернет-банк).

2.2.1. Защищенная зона (интернет-банк)

Для инициализации виджета необходимо знать название канала для подключения и авторизационные данные клиента. Далее в любом месте тега BODY вставляем скрипт:

<script type="text/javascript">
    var widget = new IQChannelsWidget({ 
        channel: 'support',
        credentials: 'user-token',
        mode: 'web'
    });
</script>

Где:

  • channel — имя канала для подключения (тип канала в IQChannels должен быть Веб / мобильный).
  • credentials — авторизационные данные для авторизации клиента в iSimpleBank.

После этого виджет полностью готов к работе.

Важно

При вызоде клиента из защищенной зоны (разлогинивание), важно вызвать метод logout() у виджета, подробнее ниже.


2.2.2. Анонимная версия (сайт)

Инициализация полностью идентична, за исключением:

  • Параметр credentials необходимо оставить пустым, либо не передавать вообще.
  • Тип канала в IQChannels должен быть Веб — анонимный.
  • Вызывать метод logout() виджета не нужно. Анонимные клиенты имеют возможность самостоятельно разлогиниться и удалить историю перепискииз их браузера.

Например:

<script type="text/javascript">
    var widget = new IQChannelsWidget({ 
        channel: 'support'
    });
</script>

3. Запрашиваем разрешение у сисадминов

Чтобы они внесли URL сайта в файл config – после этого чат отобразится на вашем сайте. Можно уже пользоваться.

4. Проверка работы


5. Настройка и стилизация виджета

Подробнее Настройка и стилизация виджета

6. Настройка пушей для Android и iOS

Подробнее Push-уведомления виджета
  • No labels