Виджет Мессенджера для сайта или приложения
Виджет доступен в тарифах Основной, Продвинутый и Корпоративный из новой линейки, а также тарифе Оптимальный из старой.
С помощью виджета вы можете встроить полноценное окно Яндекс Мессенджера на страницы вашего корпоративного сайта или веб-приложения. Ваши сотрудники смогут безопасно общаться друг с другом.
Вы можете использовать виджет:
- на корпоративном сайте;
- в мобильном приложении через WebView.
Варианты отображения виджета и примеры использования
Вариант отображения |
Где можно использовать |
Inline-блок Встраивается в место на странице и занимает 100% высоты и ширины узла, в который он встроен. |
На корпоративном портале Можно добавить inline-блок со списком рабочих чатов, которые увидит пользователь после входа с использованием SSO или OAuth. |
Плавающая кнопка со всплывающим окном Обычно отображается в правом нижнем углу, окно Мессенджера появляется при нажатии на кнопку. |
Для внутренней службы поддержки Плавающая кнопка будет открывать чат службы поддержки для сотрудников. С помощью API виджета можно сразу открыть чат с конкретным сотрудником или ботом по ID. |
Отдельное всплывающее окно Подходит, если у вас есть своя кнопка открытия виджета и вы сами хотите настроить поведение. |
При HR-онбординге Виджет сразу открывает чат приветствия новичка с ботом и HR-менеджером. Также можно настроить открытие чата с определенным ботом. |
Внимание
Используйте виджет Мессенджера только для внутрикорпоративного общения. Он не подходит для общения службы поддержки с внешними пользователями или как CRM-виджет.
Как подключить виджет
Для подключения виджета нужно участие администратора Яндекс 360 и фронтенд-разработчика.
Администратору
-
Отправьте запрос в поддержку. Выберите в форме пункт «Другое» и укажите:
- список доменов или хостов, где будет размещен виджет;
- ожидаемую RPS-нагрузку;
- ваши контактные данные.
-
В ответном письме вы получите
serviceId
, который понадобится для подключения виджета на сайт. ПолучениеserviceId
может занять до трех недель. -
Передайте
serviceId
фронтенд-разработчику.
Фронтенд-разработчику
-
Подключите пакет yandex-messenger-widget.
-
Создайте OAuth-приложение в Яндекс ID:
-
Выполните пункты 1.1–1.4 документации API.
-
Укажите необходимые права доступа: Чтение и отправка сообщений в чатах —
yamb:all
. -
Настройте передачу OAuth-токенов пользователей в виджет при каждом открытии.
Важно
OAuth-токены допустимо хранить на бэкенде сервиса. Не используйте для этого локальное хранилище браузера.
-
Зарегистрируйте ваше OAuth-приложение на странице Создание приложения.
-
-
Напишите код и встройте UI виджета в сайт.
-
Мессенджер открывается в <iframe>, поэтому подготовьте CSP-заголовки для вашего сайта, которые разрешат использование этого элемента на сайте.
-
Настройте тему отображения Мессенджера и флаги, которые определяют его поведение.
-
Протестируйте виджет и убедитесь, что все работает правильно.
-
После этого можно добавить виджет на действующий сайт и рассказать о нем пользователям.
-
Подпишитесь на события и следите за доступностью функциональности.
Подробная документация для разработчиков включает подробный пример интеграции для React-приложения и доступна здесь:
- NPM-страница — https://www.npmjs.com/package/yandex-messenger-widget
- Cookbook —
node_modules/yandex-messenger-widget/doc/cookbook.md