--- title: Віджет на сайті, посилання на агента та застосунок на телефоні description: Як додати агента на сайт одним рядком, як працює коротке посилання для соцмереж та месенджерів і як покупець встановлює вашого агента на телефон як застосунок. section: guide keywords: віджет на сайт, код віджета, Tilda віджет, Shopify віджет, WordPress віджет, посилання на агента, коротке посилання, PWA застосунок, push сповіщення, прев'ю посилання updated: 2026-09-06 --- Агент має два обличчя. На сайті це вікно в кутку, що відкривається за кнопкою. У соцмережах та месенджерах — сторінка за коротким посиланням, яка працює як невеликий магазин і встановлюється на телефон як застосунок. Каталог, умови, діалоги та заявки при цьому спільні: агент один. Усе, що описано нижче, знаходиться в розділі «Віджет і посилання». ## Посилання на агента Коротка адреса вигляду `comag.vibevox.pro/c/your-shop`. Розміщується в шапці профілю 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/uk/platform-shopify) та [WordPress](/wiki/uk/platform-wordpress). І ще: віджет читає розмітку товару на сторінці, де він відкритий, і передає її агенту. Тому питання «а в синьому є?» на картці товару розуміється в контексті, без уточнення, про що йдеться. ## Застосунок на телефоні покупця Сторінка агента може встановлюватися як застосунок. Покупець відкриває посилання з телефону, бачить пропозицію додати на домашній екран і отримує іконку з вашим логотипом. - **Ім'я під іконкою** — одне слово до 12 знаків. Порожньо — візьмемо перше слово назви магазину. - **Іконка** — завантажений логотип. Якщо логотипу немає, використовується логотип Commerce Agents. - На iPhone встановлення відбувається через «Поділитися» → «На екран „Додому“», це обмеження Safari, і агент підказує кроки сам. Після встановлення покупцеві можна надсилати push-сповіщення з розділу «Діалоги». Дозвіл на них він дає сам, натиснувши дзвіночок у шапці чату. ## Вкладення від покупця У чаті є скріпка: фото, відео або аудіо до 20 мегабайтів. Якщо в браузері немає розпізнавання мови, утримання мікрофона записує голосове повідомлення. Файл аналізує Gemini: що показано, який текст на зображенні, що сказано вголос. Агент відповідає за цим аналізом, а ви бачите в діалозі і сам файл, і короткий опис. Це виручає в нішах, де простіше показати, ніж описати: запчастини, ремонт, підбір за фото. ## Піксель покупки для сайту з кошиком Якщо оплата відбувається на вашому сайті, а не в чаті, вставте на сторінку «Дякуємо за замовлення» короткий фрагмент з кабінету, підставивши номер замовлення та суму. Покупка прив'яжеться до діалогу, і в статистиці буде видно, які переписки закінчуються продажем. ## Перевірка Три хвилини, які варто витратити після налаштування: 1. Відкрийте сайт у режимі інкогніто та натисніть кнопку віджета. Поставте запитання про товар. 2. Відкрийте посилання на агента з телефону. Перевірте, чи пропонується встановлення. 3. Надішліть посилання собі в месенджер і подивіться на прев'ю. 4. Зазирніть у «Діалоги»: там мають з'явитися обидві переписки. ## Часті запитання ### Віджет на сайті та посилання — це різні агенти Один і той самий. Каталог, умови, діалоги та заявки спільні. Відрізняється лише оформлення: на сайті вікно в кутку, за посиланням — сторінка на весь екран, яку можна встановити на телефон. ### Чи можна змінити адресу посилання Адреса формується з назви магазину під час створення вітрини. Якщо потрібна інша, напишіть нам у Telegram — змінимо вручну, щоб не зламати вже розклеєні посилання. ### Віджет сповільнить сайт Ні. Скрипт важить небагато і завантажується асинхронно, після основного вмісту сторінки. Саме вікно чату підвантажується лише тоді, коли покупець натискає кнопку. ### Що бачить покупець, якщо агент вимкнений Нічого: кнопка не з'являється, а сторінка за посиланням показує, що агент недоступний. Вимикач знаходиться в розділі «Віджет і посилання». ### Як прибрати напис «Працює на Commerce Agents» Поки що ніяк: підпис залишається на всіх тарифах. Він клікабельний і веде на наш сайт — це частина ціни, завдяки якій сервіс коштує 29 € замість значно більшої суми.