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