---
title: Виџет на сајту, линк ка агенту и апликација на телефону
description: Како поставити агента на сајт једним редом кода, како функционише кратак линк за друштвене мреже и месинџере и како купац инсталира вашег агента на телефон као апликацију.
section: guide
keywords: виџет за сајт, како додати виџет на сајт, код виџета, Tilda виџет, Shopify виџет, WordPress виџет, линк ка AI агенту, PWA апликација, пуш нотификације, преглед линка, Commerce Agents инсталација, AI агент на телефону
updated: 2026-09-06
---
Агент има два облика. На сајту је то прозор у углу који се отвара кликом на дугме. На друштвеним мрежама и у месинџерима, то је страница са кратком везом која функционише као мала продавница и може се инсталирати на телефон као апликација. Каталог, услови, дијалози и захтеви су притом заједнички: агент је један.

Све што је описано у наставку налази се у одељку „Виџет и веза“.

## Веза ка агенту

Кратак URL адреса типа `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>` |

Након убацивања, у доњем десном углу појавиће се дугме. Положај се мења на леви у подешавањима, боја и тема — такође тамо.

> [!tip] Виџет се учитава асинхроно и не успорава страницу. Ако имате подешен строг CSP, дозволите домен `comag.vibevox.pro` у `script-src` и `connect-src`.

## Изглед

Подешавања која купац види:

- **Назив продавнице и име асистента.** Друго — потпис саговорника у заглављу ћаскања.
- **Поздрав.** Прва фраза. Добар поздрав обећава корист, а не само поздравља.
- **Предлози на почетку дијалога.** До четири дугмета са питањима. Ако је празно — аутоматски ће се прикупити из каталога.
- **Тон комуникације.** Из листе или сопствени: „топао и кратак“, „стручан, на ви“.
- **Акцентна боја.** Једна боја одређује дугме, везе и истицање картица.
- **Логотип.** Он ће постати и икона апликације на телефону.
- **Дугме микрофона.** Препознавање говора у прегледачу. Ако прегледач не подржава, купац ће снимити гласовну поруку, а Gemini ће је транскрибовати.

Десно је преглед уживо: мења се док куцате. Дугме „Сачувај“ преноси измене на сајт.

## Светла и тамна тема

Ћаскање има два изгледа, а пребацују се у једном пољу подешавања — „Тема“.

| Вредност | Шта купац види |
| --- | --- |
| „Као код посетиоца“ | Тема се прилагођава подешавањима његовог телефона или рачунара: ноћу тамна, дању светла |
| „Светла“ | Увек светао прозор, без обзира на уређај |
| „Тамна“ | Увек таман прозор |

Подразумевано је постављено „као код посетиоца“, и у већини случајева то је прави избор: особа са тамном темом на телефону неће добити бели бљесак у лице, а онај ко је навикао на светлу, видеће познат прозор.

Фиксна тема је потребна када је сам сајт направљен у једном стилу. Таман лендинг са светлим ћаскањем у углу изгледа као закрпа, и обрнуто. У том случају, поставите исту тему као на сајту, и виџет ће се стопити са дизајном.

Акцентна боја функционише преко обе теме: дугмад, везе и истицање картица преузимају вашу корпоративну боју, док се позадина и текст мењају заједно са темом. Најлакше је проверити обе варијанте у прегледу десно — он се одмах прецртава док мењате вредност.

## Картице производа воде на ваш сајт

Агент одговара не једноставним текстом, већ картицама: фотографија, назив, цена, дугме. Иза дугмета увек стоји адреса — страница производа на вашем сајту или оригинална објава на друштвеној мрежи, ако је картица одатле преузета.

Унутар виџета на сајту, прелазак се дешава у истом прозору, како се не би стварали нови табови. На страници агента путем везе, картица се отвара у новом табу, како се дијалог не би изгубио.

За продавнице на Shopify и WooCommerce постоји пријатан детаљ: дугме не само да отвара производ, већ га и ставља у корпу продавнице користећи стандардни механизам платформе. Детаљи су у чланцима о [Shopify](/wiki/sr/platform-shopify) и [WordPress](/wiki/sr/platform-wordpress).

И још: виџет чита ознаке производа на страници где је отворен и преноси их агенту. Зато се питање „а у плавом има?“ на картици производа разуме у контексту, без потребе за појашњењем о чему се ради.

## Апликација на телефону купца

Страница агента може да се инсталира као апликација. Купац отвара везу са телефона, види предлог да дода на почетни екран и добија икону са вашим логотипом.

- **Име испод иконе** — једна реч до 12 знакова. Ако је празно — узећемо прву реч назива продавнице.
- **Икона** — постављени логотип. Ако логотипа нема, користи се логотип Commerce Agents.
- На iPhone-у инсталација иде преко „Подели“ → „На почетни екран“, то је ограничење Safari-ја, и агент сам даје упутства за кораке.

Након инсталације, купцу се могу слати пуш-обавештења из одељка „Дијалози“. Дозволу за њих даје сам, кликом на звонце у заглављу ћаскања.

## Прилози од купца

У ћаскању постоји спајалица: фотографија, видео или аудио до 20 мегабајта. Ако прегледач нема препознавање говора, држање микрофона снима гласовну поруку.

Gemini анализира датотеку: шта је приказано, који текст је на слици, шта је речено наглас. Агент одговара на основу ове анализе, а ви у дијалогу видите и саму датотеку и кратак опис. Ово је корисно у нишама где је лакше показати него описати: резервни делови, поправке, одабир по фотографији.

## Пиксел куповине за сајт са корпом

Ако се плаћање врши на вашем сајту, а не у ћаскању, убаците на страницу „Хвала на поруџбини“ кратак фрагмент из административног панела, уносећи број поруџбине и износ. Куповина ће се повезати са дијалогом, и у статистици ће бити видљиво које се преписке завршавају продајом.

## Провера

Три минута које вреди посветити након подешавања:

1. Отворите сајт у инкогнито режиму и кликните на дугме виџета. Поставите питање о производу.
2. Отворите линк ка агенту са телефона. Проверите да ли се нуди инсталација.
3. Пошаљите линк себи у месинџер и погледајте преглед.
4. Погледајте у „Дијалоге“: тамо би требало да се појаве оба разговора.

## Честа питања

### Виџет на сајту и линк — да ли су то различити агенти

Исти су. Каталог, услови, дијалози и захтеви су заједнички. Разликује се само изглед: на сајту је прозор у углу, а преко линка — страница преко целог екрана, коју можете инсталирати на телефон.

### Да ли се може променити адреса линка

Адреса се формира од назива продавнице приликом креирања излога. Ако вам треба другачија, пишите нам на Telegram — променићемо ручно, како не бисмо покварили већ постављене линкове.

### Да ли ће виџет успорити сајт

Неће. Скрипта је лагана и учитава се асинхроно, након главног садржаја странице. Сам прозор за ћаскање се учитава тек када купац кликне на дугме.

### Шта купац види ако је агент искључен

Ништа: дугме се не појављује, а страница преко линка показује да агент није доступан. Прекидач се налази у одељку „Виџет и линк“.

### Како уклонити натпис „Ради уз Commerce Agents“

За сада никако: потпис остаје на свим тарифама. Кликабилан је и води на наш сајт — то је део цене, захваљујући чему услуга кошта 29 € уместо знатно веће суме.