Виджет на сайте, ссылка на агента и приложение на телефоне
Как поставить агента на сайт одной строкой, как работает короткая ссылка для соцсетей и мессенджеров и как покупатель ставит вашего агента на телефон как приложение.
У агента два лица. На сайте это окно в углу, которое открывается по кнопке. В соцсетях и мессенджерах — страница по короткой ссылке, которая работает как маленький магазин и ставится на телефон как приложение. Каталог, условия, диалоги и заявки при этом общие: агент один.
Всё, что описано ниже, живёт в разделе «Виджет и ссылка».
Ссылка на агента#
Короткий адрес вида comag.vibevox.pro/c/ваш-магазин. Ставится в шапку профиля Instagram, TikTok или Telegram, отправляется в WhatsApp, кладётся в описание под роликом на YouTube.
При отправке в мессенджер ссылка разворачивается в карточку: обложка, название магазина и описание. Всё три поля настраиваются:
- Заголовок превью — по умолчанию название магазина.
- Описание превью — короткая фраза о том, что можно спросить.
- Обложка — собирается автоматически из вашего акцентного цвета, логотипа и фотографий товаров. Можно загрузить свою, размер 1200 на 630 точек.
Проверить, как выглядит превью, проще всего отправив ссылку самому себе в Telegram.
Код для сайта#
Одна строка, которая вставляется перед закрывающим тегом </body> на всех страницах. Копируется кнопкой в кабинете.
Куда именно вставлять на популярных платформах:
| Платформа | Где вставить |
|---|---|
| Tilda | Настройки сайта → Ещё → HTML-код для body |
| Shopify | Тема → Изменить код → theme.liquid, перед </body> |
| WordPress | Внешний вид → Редактор темы → footer.php, или плагин вставки кода |
| Wix | Настройки → Пользовательский код → добавить в Body end |
| Свой сайт | Прямо в шаблон перед </body> |
После вставки в правом нижнем углу появится кнопка. Положение меняется на левое в настройках, цвет и тема — там же.
Виджет грузится асинхронно и не тормозит страницу. Если у вас настроен строгий CSP, разрешите домен comag.vibevox.pro в script-src и connect-src.
Оформление#
Настройки, которые видит покупатель:
- Название магазина и имя ассистента. Второе — подпись собеседника в шапке чата.
- Приветствие. Первая фраза. Хорошее приветствие обещает пользу, а не здоровается.
- Подсказки в начале диалога. До четырёх кнопок с вопросами. Пусто — соберутся автоматически по каталогу.
- Тон общения. Из списка или свой: «тёплый и краткий», «экспертный, на вы».
- Акцентный цвет. Один цвет задаёт кнопку, ссылки и подсветку карточек.
- Логотип. Он же станет иконкой приложения на телефоне.
- Кнопка микрофона. Распознавание речи в браузере. Если браузер не умеет, покупатель запишет голосовое, и его расшифрует Gemini.
Справа живой предпросмотр: он меняется, пока вы печатаете. Кнопка «Сохранить» переносит изменения на сайт.
Светлая и тёмная тема#
У чата два оформления, и переключаются они в одном поле настроек — «Тема».
| Значение | Что видит покупатель |
|---|---|
| Как у посетителя | Тема подстраивается под настройки его телефона или компьютера: ночью тёмная, днём светлая |
| Светлая | Всегда светлое окно, независимо от устройства |
| Тёмная | Всегда тёмное окно |
По умолчанию стоит «как у посетителя», и в большинстве случаев это правильный выбор: человек с тёмной темой на телефоне не получит в лицо белую вспышку, а тот, кто привык к светлой, увидит привычное окно.
Жёсткая тема нужна, когда сайт сам сделан в одном ключе. Тёмный лендинг со светлым чатом в углу выглядит как заплатка, и наоборот. В таком случае поставьте ту же тему, что у сайта, и виджет сольётся с дизайном.
Акцентный цвет работает поверх обеих тем: кнопки, ссылки и подсветка карточек берут ваш фирменный цвет, а фон и текст меняются вместе с темой. Проверить оба варианта проще всего в предпросмотре справа — он перерисовывается сразу, пока вы переключаете значение.
Карточки товаров ведут на ваш сайт#
Агент отвечает не сплошным текстом, а карточками: фотография, название, цена, кнопка. За кнопкой всегда стоит адрес — страница товара на вашем сайте или исходный пост в соцсети, если карточка собрана оттуда.
Внутри виджета на сайте переход происходит в том же окне, чтобы не плодить вкладки. На странице агента по ссылке карточка открывается в новой вкладке, чтобы диалог не потерялся.
Для магазинов на Shopify и WooCommerce есть приятная деталь: кнопка не просто открывает товар, а кладёт его в корзину магазина штатным механизмом платформы. Подробности в статьях про Shopify и WordPress.
И ещё: виджет читает разметку товара на странице, где он открыт, и передаёт её агенту. Поэтому вопрос «а в синем есть?» на карточке товара понимается в контексте, без уточнения, о чём речь.
Приложение на телефоне покупателя#
Страница агента умеет устанавливаться как приложение. Покупатель открывает ссылку с телефона, видит предложение добавить на домашний экран и получает иконку с вашим логотипом.
- Имя под иконкой — одно слово до 12 знаков. Пусто — возьмём первое слово названия магазина.
- Иконка — загруженный логотип. Если логотипа нет, используется логотип Commerce Agents.
- На iPhone установка идёт через «Поделиться» → «На экран „Домой“», это ограничение Safari, и агент подсказывает шаги сам.
После установки покупателю можно отправлять push-уведомления из раздела «Диалоги». Разрешение на них он даёт сам, нажав колокольчик в шапке чата.
Вложения от покупателя#
В чате есть скрепка: фото, видео или аудио до 20 мегабайт. Если в браузере нет распознавания речи, удержание микрофона записывает голосовое сообщение.
Файл разбирает Gemini: что показано, какой текст на изображении, что сказано вслух. Агент отвечает по этому разбору, а вы видите в диалоге и сам файл, и краткое описание. Это выручает в нишах, где проще показать, чем описать: запчасти, ремонт, подбор по фото.
Пиксель покупки для сайта с корзиной#
Если оплата идёт на вашем сайте, а не в чате, вставьте на страницу «Спасибо за заказ» короткий фрагмент из кабинета, подставив номер заказа и сумму. Покупка привяжется к диалогу, и в статистике будет видно, какие переписки заканчиваются продажей.
Проверка#
Три минуты, которые стоит потратить после настройки:
- Откройте сайт в режиме инкогнито и нажмите кнопку виджета. Задайте вопрос про товар.
- Откройте ссылку на агента с телефона. Проверьте, что предлагается установка.
- Отправьте ссылку себе в мессенджер и посмотрите на превью.
- Загляните в «Диалоги»: там должны появиться обе переписки.
Частые вопросы#
Виджет на сайте и ссылка — это разные агенты#
Один и тот же. Каталог, условия, диалоги и заявки общие. Отличается только оформление: на сайте окно в углу, по ссылке — страница на весь экран, которую можно поставить на телефон.
Можно ли поменять адрес ссылки#
Адрес формируется из названия магазина при создании витрины. Если нужно другое, напишите нам в Telegram — поменяем вручную, чтобы не сломать уже расклеенные ссылки.
Виджет замедлит сайт#
Нет. Скрипт весит немного и грузится асинхронно, после основного содержимого страницы. Само окно чата подгружается только когда покупатель нажимает кнопку.
Что видит покупатель, если агент выключен#
Ничего: кнопка не появляется, а страница по ссылке показывает, что агент недоступен. Выключатель находится в разделе «Виджет и ссылка».
Как убрать надпись «Работает на Commerce Agents»#
Пока никак: подпись остаётся на всех тарифах. Она кликабельна и ведёт на наш сайт — это часть цены, за счёт которой сервис стоит 29 € вместо заметно большей суммы.