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

Установка кода виджета IQChannels на сайте

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

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

Виджет состоит из двух компонентов:

  • Подключаемый JavaScript-файл с API для взаимодействия с виджетом;
  • Сам виджет, открывающийся в скрытом <iframe> поверх сайта.

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

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

Предположим, система установлена локально и доступна по адресу:

  • http://localhost:3001/

Пример встроенного виджета доступен по адресу:

  • http://localhost:3001/widget/example.html

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

2.1 Загрузка API​

Добавьте скрипт виджета в тег <head> HTML-документа:

<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 — имя канала (тип «Веб / мобильный»);
  • credentials — авторизационные данные пользователя.

При выходе пользователя из защищённой зоны необходимо вызвать:

widget.logout();

2.2.2 Анонимная версия​

Если доступ публичный (например, маркетинговый сайт), используйте упрощённую инициализацию:

<script type="text/javascript">
    var widget = new IQChannelsWidget({
        channel: 'support'
    });
</script>
  • credentials — не указывается;
  • Тип канала в IQChannels: «Веб — анонимный»;
  • Вызов logout() не требуется — пользователь может удалить переписку самостоятельно из браузера.

3. Регистрация домена​

Обратитесь к системному администратору, чтобы он добавил домен сайта в конфигурационный файл сервера IQChannels. После этого чат будет отображаться на сайте.

4. Проверка​

Откройте сайт и проверьте, что виджет инициализируется корректно и открывается.

5. Дополнительная настройка и стилизация​

См. документацию по кастомизации виджета — вы можете изменять стили, иконки, поведение.

6. Настройка push-уведомлений​

Инструкции по интеграции push-уведомлений для Android и iOS приведены здесь.