Widget pe site, link către agent și aplicație pe telefon
Află cum să instalezi agentul pe site cu o singură linie de cod, cum funcționează linkul scurt pentru rețele sociale și mesagerie și cum își instalează cumpărătorul agentul tău pe telefon ca aplicație.
Agentul are două forme. Pe site, este o fereastră în colț care se deschide la apăsarea unui buton. În rețelele sociale și mesagerii, este o pagină accesibilă printr-un link scurt, care funcționează ca un mic magazin și poate fi instalată pe telefon ca aplicație. Catalogul, condițiile, dialogurile și solicitările rămân comune: agentul este unul singur.
Tot ce este descris mai jos se găsește în secțiunea „Widget și link”.
Link către agent#
O adresă scurtă de tipul comag.vibevox.pro/c/your-shop. Se plasează în antetul profilului de Instagram, TikTok sau Telegram, se trimite pe WhatsApp, se adaugă în descrierea de sub un videoclip pe YouTube.
Când este trimisă într-un mesager, linkul se transformă într-o carte de vizită: copertă, numele magazinului și descriere. Toate cele trei câmpuri sunt configurabile:
- Titlul previzualizării — implicit, numele magazinului.
- Descrierea previzualizării — o frază scurtă despre ce se poate întreba.
- Coperta — se generează automat din culoarea dvs. de accent, logo și fotografiile produselor. Puteți încărca o imagine proprie, dimensiunea 1200 pe 630 de pixeli.
Cel mai simplu mod de a verifica cum arată previzualizarea este să trimiteți linkul către dvs. în Telegram.
Cod pentru site#
O singură linie care se inserează înainte de eticheta de închidere </body> pe toate paginile. Se copiază cu un buton din cont.
Unde anume se inserează pe platformele populare:
| Platformă | Unde se inserează |
|---|---|
| Tilda | Setări site → Mai mult → Cod HTML pentru body |
| Shopify | Temă → Editează codul → theme.liquid, înainte de </body> |
| WordPress | Aspect → Editor temă → footer.php, sau un plugin de inserare cod |
| Wix | Setări → Cod personalizat → adaugă în Body end |
| Site propriu | Direct în șablon, înainte de </body> |
După inserare, în colțul din dreapta jos va apărea un buton. Poziția se poate schimba în stânga din setări, culoarea și tema — tot de acolo.
Widgetul se încarcă asincron și nu încetinește pagina. Dacă aveți un CSP strict configurat, permiteți domeniul comag.vibevox.pro în script-src și connect-src.
Aspect#
Setări vizibile pentru cumpărător:
- Numele magazinului și numele asistentului. Al doilea este semnătura interlocutorului în antetul chatului.
- Mesajul de întâmpinare. Prima frază. Un mesaj de întâmpinare bun promite beneficii, nu doar salută.
- Sugestii la începutul dialogului. Până la patru butoane cu întrebări. Gol — se vor genera automat din catalog.
- Tonul conversației. Din listă sau personalizat: „cald și concis”, „expert, formal”.
- Culoarea de accent. O singură culoare definește butonul, linkurile și evidențierea cardurilor.
- Logo. Acesta va deveni și pictograma aplicației pe telefon.
- Butonul microfonului. Recunoaștere vocală în browser. Dacă browserul nu suportă, cumpărătorul va înregistra un mesaj vocal, iar Gemini îl va transcrie.
În dreapta este o previzualizare live: se modifică pe măsură ce tastați. Butonul „Salvează” aplică modificările pe site.
Temă deschisă și temă închisă#
Chatul are două stiluri, iar acestea se comută dintr-un singur câmp de setări — „Temă”.
| Valoare | Ce vede cumpărătorul |
|---|---|
| Ca la vizitator | Tema se adaptează la setările telefonului sau computerului său: închisă noaptea, deschisă ziua |
| Deschisă | Întotdeauna o fereastră deschisă, indiferent de dispozitiv |
| Închisă | Întotdeauna o fereastră închisă |
Implicit este setat „Ca la vizitator”, iar în majoritatea cazurilor aceasta este alegerea corectă: o persoană cu o temă închisă pe telefon nu va primi o lumină albă bruscă, iar cine este obișnuit cu o temă deschisă va vedea o fereastră familiară.
O temă fixă este necesară atunci când site-ul în sine este conceput într-o singură tonalitate. Un landing page întunecat cu un chat deschis în colț arată ca o improvizație, și invers. Într-un astfel de caz, setați aceeași temă ca a site-ului, iar widgetul se va integra în design.
Culoarea de accent funcționează peste ambele teme: butoanele, linkurile și evidențierea cardurilor preiau culoarea dvs. de brand, în timp ce fundalul și textul se modifică odată cu tema. Cel mai simplu mod de a verifica ambele variante este în previzualizarea din dreapta — aceasta se actualizează imediat, pe măsură ce schimbați valoarea.
Cardurile de produse duc către site-ul dvs.#
Agentul răspunde nu cu text continuu, ci cu carduri: fotografie, nume, preț, buton. În spatele butonului se află întotdeauna o adresă — pagina produsului de pe site-ul dvs. sau postarea originală din rețeaua socială, dacă cardul a fost generat de acolo.
În interiorul widgetului de pe site, tranziția se face în aceeași fereastră, pentru a nu crea multiple taburi. Pe pagina agentului, accesată prin link, cardul se deschide într-o filă nouă, pentru ca dialogul să nu se piardă.
Pentru magazinele pe Shopify și WooCommerce există un detaliu plăcut: butonul nu doar deschide produsul, ci îl adaugă în coșul magazinului prin mecanismul standard al platformei. Detalii în articolele despre Shopify și WordPress.
Și încă ceva: widgetul citește marcajul produsului de pe pagina unde este deschis și îl transmite agentului. Prin urmare, întrebarea „este disponibil pe albastru?” pe un card de produs este înțeleasă în context, fără a fi nevoie de clarificări suplimentare.
Aplicație pe telefonul cumpărătorului#
Pagina agentului poate fi instalată ca aplicație. Cumpărătorul deschide linkul de pe telefon, vede o sugestie de a adăuga pe ecranul principal și primește o pictogramă cu logo-ul dvs.
- Nume sub pictogramă — un singur cuvânt de până la 12 caractere. Gol — vom prelua primul cuvânt din numele magazinului.
- Pictogramă — logo-ul încărcat. Dacă nu există logo, se folosește logo-ul Commerce Agents.
- Pe iPhone, instalarea se face prin „Partajează” → „Pe ecranul „Acasă””, aceasta este o limitare a Safari, iar agentul indică singur pașii.
După instalare, cumpărătorului i se pot trimite notificări push din secțiunea „Dialoguri”. Acesta acordă permisiunea singur, apăsând pe clopoțelul din antetul chatului.
Atașamente de la cumpărător#
În chat există o agrafă: fotografii, videoclipuri sau fișiere audio de până la 20 de megabytes. Dacă browserul nu are recunoaștere vocală, menținerea microfonului înregistrează un mesaj vocal.
Gemini analizează fișierul: ce este afișat, ce text este pe imagine, ce este rostit cu voce tare. Agentul răspunde pe baza acestei analize, iar dvs. vedeți în dialog atât fișierul în sine, cât și o scurtă descriere. Acest lucru este util în nișe unde este mai simplu să arăți decât să descrii: piese de schimb, reparații, selecție după fotografie.
Pixel de achiziție pentru site-uri cu coș de cumpărături#
Dacă plata se realizează pe site-ul dvs., și nu în chat, inserați pe pagina „Mulțumim pentru comandă” un fragment scurt din cont, înlocuind numărul comenzii și suma. Achiziția se va lega de dialog, iar în statistici va fi vizibil care conversații se finalizează cu o vânzare.
Verificare#
Trei minute pe care merită să le dedici după configurare:
- Deschide site-ul în modul incognito și apasă butonul widgetului. Pune o întrebare despre un produs.
- Deschide linkul agentului de pe telefon. Verifică dacă se oferă instalarea.
- Trimite-ți linkul într-un mesaj și vezi previzualizarea.
- Verifică în „Conversații”: ar trebui să apară ambele discuții.
Întrebări frecvente#
Widgetul de pe site și linkul sunt agenți diferiți#
Este același agent. Catalogul, condițiile, conversațiile și cererile sunt comune. Diferă doar aspectul: pe site, fereastra este în colț, iar prin link — o pagină pe tot ecranul, pe care o poți instala pe telefon.
Se poate schimba adresa linkului#
Adresa se generează din numele magazinului la crearea vitrinei. Dacă ai nevoie de altă adresă, scrie-ne pe Telegram — o vom schimba manual, ca să nu stricăm linkurile deja distribuite.
Widgetul va încetini site-ul#
Nu. Scriptul are o dimensiune mică și se încarcă asincron, după conținutul principal al paginii. Fereastra de chat se încarcă doar când cumpărătorul apasă butonul.
Ce vede cumpărătorul dacă agentul este oprit#
Nimic: butonul nu apare, iar pagina prin link arată că agentul este indisponibil. Comutatorul se află în secțiunea „Widget și link”.
Cum se elimină textul „Funcționează cu Commerce Agents”#
Deocamdată, nu se poate: semnătura rămâne pe toate planurile tarifare. Este clicabilă și duce către site-ul nostru — aceasta este o parte din preț, datorită căreia serviciul costă 29 € în loc de o sumă considerabil mai mare.