Виџет на сајту, линк ка агенту и апликација на телефону
Како поставити агента на сајт једним редом кода, како функционише кратак линк за друштвене мреже и месинџере и како купац инсталира вашег агента на телефон као апликацију.
Агент има два облика. На сајту је то прозор у углу који се отвара кликом на дугме. На друштвеним мрежама и у месинџерима, то је страница са кратком везом која функционише као мала продавница и може се инсталирати на телефон као апликација. Каталог, услови, дијалози и захтеви су притом заједнички: агент је један.
Све што је описано у наставку налази се у одељку „Виџет и веза“.
Веза ка агенту#
Кратак 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> |
Након убацивања, у доњем десном углу појавиће се дугме. Положај се мења на леви у подешавањима, боја и тема — такође тамо.
Виџет се учитава асинхроно и не успорава страницу. Ако имате подешен строг CSP, дозволите домен comag.vibevox.pro у script-src и connect-src.
Изглед#
Подешавања која купац види:
- Назив продавнице и име асистента. Друго — потпис саговорника у заглављу ћаскања.
- Поздрав. Прва фраза. Добар поздрав обећава корист, а не само поздравља.
- Предлози на почетку дијалога. До четири дугмета са питањима. Ако је празно — аутоматски ће се прикупити из каталога.
- Тон комуникације. Из листе или сопствени: „топао и кратак“, „стручан, на ви“.
- Акцентна боја. Једна боја одређује дугме, везе и истицање картица.
- Логотип. Он ће постати и икона апликације на телефону.
- Дугме микрофона. Препознавање говора у прегледачу. Ако прегледач не подржава, купац ће снимити гласовну поруку, а Gemini ће је транскрибовати.
Десно је преглед уживо: мења се док куцате. Дугме „Сачувај“ преноси измене на сајт.
Светла и тамна тема#
Ћаскање има два изгледа, а пребацују се у једном пољу подешавања — „Тема“.
| Вредност | Шта купац види |
|---|---|
| „Као код посетиоца“ | Тема се прилагођава подешавањима његовог телефона или рачунара: ноћу тамна, дању светла |
| „Светла“ | Увек светао прозор, без обзира на уређај |
| „Тамна“ | Увек таман прозор |
Подразумевано је постављено „као код посетиоца“, и у већини случајева то је прави избор: особа са тамном темом на телефону неће добити бели бљесак у лице, а онај ко је навикао на светлу, видеће познат прозор.
Фиксна тема је потребна када је сам сајт направљен у једном стилу. Таман лендинг са светлим ћаскањем у углу изгледа као закрпа, и обрнуто. У том случају, поставите исту тему као на сајту, и виџет ће се стопити са дизајном.
Акцентна боја функционише преко обе теме: дугмад, везе и истицање картица преузимају вашу корпоративну боју, док се позадина и текст мењају заједно са темом. Најлакше је проверити обе варијанте у прегледу десно — он се одмах прецртава док мењате вредност.
Картице производа воде на ваш сајт#
Агент одговара не једноставним текстом, већ картицама: фотографија, назив, цена, дугме. Иза дугмета увек стоји адреса — страница производа на вашем сајту или оригинална објава на друштвеној мрежи, ако је картица одатле преузета.
Унутар виџета на сајту, прелазак се дешава у истом прозору, како се не би стварали нови табови. На страници агента путем везе, картица се отвара у новом табу, како се дијалог не би изгубио.
За продавнице на Shopify и WooCommerce постоји пријатан детаљ: дугме не само да отвара производ, већ га и ставља у корпу продавнице користећи стандардни механизам платформе. Детаљи су у чланцима о Shopify и WordPress.
И још: виџет чита ознаке производа на страници где је отворен и преноси их агенту. Зато се питање „а у плавом има?“ на картици производа разуме у контексту, без потребе за појашњењем о чему се ради.
Апликација на телефону купца#
Страница агента може да се инсталира као апликација. Купац отвара везу са телефона, види предлог да дода на почетни екран и добија икону са вашим логотипом.
- Име испод иконе — једна реч до 12 знакова. Ако је празно — узећемо прву реч назива продавнице.
- Икона — постављени логотип. Ако логотипа нема, користи се логотип Commerce Agents.
- На iPhone-у инсталација иде преко „Подели“ → „На почетни екран“, то је ограничење Safari-ја, и агент сам даје упутства за кораке.
Након инсталације, купцу се могу слати пуш-обавештења из одељка „Дијалози“. Дозволу за њих даје сам, кликом на звонце у заглављу ћаскања.
Прилози од купца#
У ћаскању постоји спајалица: фотографија, видео или аудио до 20 мегабајта. Ако прегледач нема препознавање говора, држање микрофона снима гласовну поруку.
Gemini анализира датотеку: шта је приказано, који текст је на слици, шта је речено наглас. Агент одговара на основу ове анализе, а ви у дијалогу видите и саму датотеку и кратак опис. Ово је корисно у нишама где је лакше показати него описати: резервни делови, поправке, одабир по фотографији.
Пиксел куповине за сајт са корпом#
Ако се плаћање врши на вашем сајту, а не у ћаскању, убаците на страницу „Хвала на поруџбини“ кратак фрагмент из административног панела, уносећи број поруџбине и износ. Куповина ће се повезати са дијалогом, и у статистици ће бити видљиво које се преписке завршавају продајом.
Провера#
Три минута које вреди посветити након подешавања:
- Отворите сајт у инкогнито режиму и кликните на дугме виџета. Поставите питање о производу.
- Отворите линк ка агенту са телефона. Проверите да ли се нуди инсталација.
- Пошаљите линк себи у месинџер и погледајте преглед.
- Погледајте у „Дијалоге“: тамо би требало да се појаве оба разговора.
Честа питања#
Виџет на сајту и линк — да ли су то различити агенти#
Исти су. Каталог, услови, дијалози и захтеви су заједнички. Разликује се само изглед: на сајту је прозор у углу, а преко линка — страница преко целог екрана, коју можете инсталирати на телефон.
Да ли се може променити адреса линка#
Адреса се формира од назива продавнице приликом креирања излога. Ако вам треба другачија, пишите нам на Telegram — променићемо ручно, како не бисмо покварили већ постављене линкове.
Да ли ће виџет успорити сајт#
Неће. Скрипта је лагана и учитава се асинхроно, након главног садржаја странице. Сам прозор за ћаскање се учитава тек када купац кликне на дугме.
Шта купац види ако је агент искључен#
Ништа: дугме се не појављује, а страница преко линка показује да агент није доступан. Прекидач се налази у одељку „Виџет и линк“.
Како уклонити натпис „Ради уз Commerce Agents“#
За сада никако: потпис остаје на свим тарифама. Кликабилан је и води на наш сајт — то је део цене, захваљујући чему услуга кошта 29 € уместо знатно веће суме.