Віджет на сайті, посилання на агента та застосунок на телефоні
Як додати агента на сайт одним рядком, як працює коротке посилання для соцмереж та месенджерів і як покупець встановлює вашого агента на телефон як застосунок.
Агент має два обличчя. На сайті це вікно в кутку, що відкривається за кнопкою. У соцмережах та месенджерах — сторінка за коротким посиланням, яка працює як невеликий магазин і встановлюється на телефон як застосунок. Каталог, умови, діалоги та заявки при цьому спільні: агент один.
Усе, що описано нижче, знаходиться в розділі «Віджет і посилання».
Посилання на агента#
Коротка адреса вигляду comag.vibevox.pro/c/your-shop. Розміщується в шапці профілю 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 € замість значно більшої суми.