Уиджет на сайта, линк към агента и приложение на телефона
Как да инсталирате агента на сайта с един ред код, как работи краткият линк за социални мрежи и месинджъри и как клиентът инсталира вашия агент на телефона си като приложение.
Агентът има две лица. На сайта това е прозорец в ъгъла, който се отваря с бутон. В социалните мрежи и месинджърите – страница с кратък линк, която работи като малък магазин и се инсталира на телефона като приложение. Каталогът, условията, диалозите и заявките при това са общи: агентът е един.
Всичко описано по-долу се намира в раздел „Уиджет и връзка“.
Връзка към агента#
Кратък адрес от вида 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“ |
| Ваш собствен сайт | Директно в шаблона преди </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 € вместо значително по-голяма сума.