Виджет ВКонтакте для сайта: как поставить чат с сообществом
Если клиенты привыкли писать вам во ВКонтакте, логично дать им эту возможность прямо на сайте. У VK для этого есть официальные виджеты: всплывающий чат «Сообщения сообщества», кнопка «Напишите нам» и подписка «Разрешить сообщения от сообщества». Ниже — по документации dev.vk.com: чем они отличаются, как подготовить сообщество, какой код вставить, какие параметры есть у виджета и где его ограничения — от входа через аккаунт VK до браузеров, в которых один из способов подключения не работает.
Какие виджеты ВКонтакте подходят для связи с клиентами
| Виджет | Что делает | Когда выбрать |
|---|---|---|
| «Сообщения сообщества» | Кнопка в углу сайта открывает окно переписки с сообществом прямо на странице; посетитель входит через свой аккаунт VK | Хотите чат на сайте, а отвечаете клиентам во ВКонтакте |
| «Напишите нам» | Кнопка, по клику открывает диалог с сообществом во ВКонтакте (как ссылка vk.me) | Нужна просто кнопка связи — за 5 минут, без настройки окна |
| «Разрешить сообщения от сообщества» | Посетитель одним нажатием разрешает сообществу писать ему в личные сообщения | Собираете подписчиков на уведомления: статусы заказов, напоминания |
Остальные виджеты VK — «Комментарии», «Запись на стене», «Нравится», «Опрос», «Подписаться на автора», «Статья», «Видео» и другие — для контента, а не для переписки с клиентами. Полный список — в разделе «Виджеты» на dev.vk.com.
Как работает виджет «Сообщения сообщества»
- Кнопка по умолчанию стоит в правом нижнем углу; при создании можно выбрать, раскрывать ли окно сразу после загрузки страницы или по нажатию.
- Регистрироваться посетителю не нужно, но в начале разговора он авторизуется своим аккаунтом ВКонтакте.
- Переписка идёт от лица сообщества. Ответить можно, даже если клиент ушёл с сайта: сообщение придёт ему в чат ВКонтакте.
- Если администратор долго не отвечает (например, ночью), посетитель видит предупреждение, что ответ займёт больше времени.
- К сообщениям можно прикреплять изображения, видео и документы.
Шаг 1. Подготовьте сообщество
Попробуйте Моночат бесплатно
Сайт, Telegram, ВКонтакте, MAX, Авито (бета) и почта — в одном окне, ИИ-консультант по вашей базе знаний. Вход через Яндекс или Google, без карты. 14 дней тарифа «Про» в подарок.
- Откройте сообщество, в меню справа выберите «Управление».
- Перейдите в «Сообщения» и включите сообщения сообщества.
- Поставьте галочку «Виджет сообщений», укажите его настройки и сохраните.
Шаг 2. Добавьте виджет на сайт: два способа
| Open API (openapi.js) | SuperAppKit SDK | |
|---|---|---|
| Сложность | Вставить скрипт и одну строку инициализации | npm-библиотека, приложение VK ID, код получения ключей доступа — нужен разработчик |
| Браузеры | По документации VK не работает в Safari и Firefox | VK рекомендует именно его, потому что Open API поддерживают не все браузеры |
| Что нужно | ID сообщества | Приложение на id.vk.ru/business/go (платформа Web), обработчики Config.onAuth и Config.onRequestSuperAppToken |
Минимальный вариант на Open API: подключить в <head> скрипт https://vk.ru/js/api/openapi.js?169, добавить в конец <body> блок <div id="vk_community_messages"></div> и вызвать VK.Widgets.CommunityMessages("vk_community_messages", ID_сообщества). Но помните про Safari: это браузер по умолчанию на iPhone и Mac, и посетители с ними виджет не увидят.
Полезные параметры виджета
| Параметр (Open API) | Что меняет |
|---|---|
| welcomeScreen | Показывать ли экран приветствия (1 — да, 0 — нет) |
| expanded / expandTimeout | Раскрыть окно сразу или через заданное время в миллисекундах |
| widgetPosition | Кнопка слева или справа (по вертикали — всегда внизу) |
| buttonType: no_button | Скрыть стандартную кнопку и открывать окно своей кнопкой или ссылкой |
| tooltipButtonText / disableButtonTooltip | Текст подсказки при наведении или её отключение |
| disableNewMessagesSound, disableTitleChange | Без звука и без мигания заголовка вкладки при новом сообщении |
| onCanNotWrite | Функция, если посетитель не может написать: no_access, disabled_messages, cant_write (частное сообщество), offline (не вошёл во ВКонтакте) |
Обработчик onCanNotWrite стоит использовать: если посетитель не вошёл во ВКонтакте или сообщения выключены, покажите ему запасной способ связи — телефон, форму или чат на сайте.
Кнопка «Напишите нам» и подписка на сообщения
- «Напишите нам»: VK.Widgets.ContactUs("vk_contact_us", {}, -ID_сообщества). Текст кнопки — до 140 символов (по умолчанию «Напишите нам»), высота — 18, 20, 22, 24 или 30 пикселей. ID сообщества указывают со знаком минус. Тот же эффект даёт обычная ссылка vk.me/адрес_сообщества.
- «Разрешить сообщения от сообщества»: после согласия сообщество может написать человеку без ограничения по срокам, а он в любой момент запрещает сообщения кнопкой в диалоге. Виджет передаёт события allowed и denied — их можно отправлять в свою аналитику.
- Без такого разрешения написать человеку первым нельзя: по справке VK сообщество пишет первым, только если пользователь раньше общался с ним или нажал «Разрешить сообщения» в сообществе или в виджете.
Ограничения виджета ВКонтакте, о которых стоит знать заранее
- Написать может только тот, у кого есть аккаунт VK и кто готов войти в него на вашем сайте. Остальным посетителям нужен другой способ связи.
- Открытый на сайте виджет не заменяет приём обращений: сообщения из него попадают в обычные сообщения сообщества, и кто-то должен на них отвечать.
- Виджет показывает только ВКонтакте. Если клиенты пишут ещё и в Telegram, MAX или на почту, у вас по-прежнему несколько мест, где ждут ответа.
Виджет ВКонтакте или свой чат на сайте
| Виджет «Сообщения сообщества» | Чат-виджет Моночата | |
|---|---|---|
| Нужен аккаунт VK посетителю | Да | Нет — пишут без регистрации, можно попросить имя, телефон или email |
| Где отвечают сотрудники | В сообщениях сообщества | В общем окне вместе с ВКонтакте, Telegram, MAX, почтой |
| Нерабочее время | Предупреждение о долгом ответе | Рабочие часы, офлайн-текст и автоответ |
| ИИ-ответы по базе знаний | Нет | Да: черновик оператору или автоответ |
| Цена | Бесплатно | Бесплатно на тарифе «Старт» (виджет и каналы); ИИ — по лимитам тарифа |
Их не обязательно выбирать: можно поставить на сайт чат Моночата, а сообщество ВКонтакте подключить к тому же окну по ключу доступа. Сообщения, которые пишут в виджете VK, — это обычные сообщения сообщества, поэтому после подключения они тоже приходят в Моночат, и операторы отвечают на всё из одного места, без прав администратора сообщества. Если нужна именно кнопка «Написать во ВКонтакте» рядом с Telegram и MAX — её можно собрать в бесплатном генераторе /instrumenty/knopka-messendzherov.
Источники
По теме в Моночате
Попробуйте Моночат бесплатно
Сайт, Telegram, ВКонтакте, MAX, Авито (бета) и почта — в одном окне, ИИ-консультант по вашей базе знаний. Вход через Яндекс или Google, без карты. 14 дней тарифа «Про» в подарок.