Widget sul sito, link all'agente e app sul telefono
Come installare l'agente sul sito con una riga di codice, come funziona il link breve per social media e messaggistica e come il cliente può installare il tuo agente sul telefono come app.
L'agente ha due aspetti. Sul sito web è una finestra nell'angolo che si apre tramite un pulsante. Sui social media e nelle app di messaggistica è una pagina con un link breve, che funziona come un piccolo negozio e può essere installata sul telefono come un'applicazione. Catalogo, condizioni, conversazioni e richieste sono comuni: l'agente è uno solo.
Tutto ciò che è descritto di seguito si trova nella sezione «Widget e link».
Link all'agente#
Un indirizzo breve del tipo comag.vibevox.pro/c/il-tuo-negozio. Si inserisce nell'intestazione del profilo Instagram, TikTok o Telegram, si invia su WhatsApp, si aggiunge alla descrizione sotto un video su YouTube.
Quando inviato in un'app di messaggistica, il link si espande in una scheda: copertina, nome del negozio e descrizione. Tutti e tre i campi sono personalizzabili:
- Titolo dell'anteprima — per impostazione predefinita, il nome del negozio.
- Descrizione dell'anteprima — una breve frase su cosa si può chiedere.
- Copertina — creata automaticamente dal tuo colore principale, logo e foto dei prodotti. Puoi caricarne una tua, dimensione 1200 per 630 pixel.
Il modo più semplice per controllare l'aspetto dell'anteprima è inviare il link a te stesso su Telegram.
Codice per il sito web#
Una singola riga da inserire prima del tag di chiusura </body> su tutte le pagine. Si copia con un pulsante nell'area personale.
Dove inserirlo esattamente sulle piattaforme più diffuse:
| Piattaforma | Dove inserire |
|---|---|
| Tilda | Impostazioni del sito → Altro → Codice HTML per il body |
| Shopify | Tema → Modifica codice → theme.liquid, prima di </body> |
| WordPress | Aspetto → Editor del tema → footer.php, o plugin di inserimento codice |
| Wix | Impostazioni → Codice personalizzato → aggiungi in Body end |
| Il tuo sito | Direttamente nel template prima di </body> |
Dopo l'inserimento, un pulsante apparirà nell'angolo in basso a destra. La posizione può essere spostata a sinistra nelle impostazioni; colore e tema si trovano nello stesso punto.
Il widget si carica in modo asincrono e non rallenta la pagina. Se hai configurato un CSP rigoroso, autorizza il dominio comag.vibevox.pro in script-src e connect-src.
Stile#
Impostazioni visibili all'acquirente:
- Nome del negozio e nome dell'assistente. Il secondo è la firma dell'interlocutore nell'intestazione della chat.
- Messaggio di benvenuto. La prima frase. Un buon benvenuto promette un beneficio, non si limita a salutare.
- Suggerimenti all'inizio del dialogo. Fino a quattro pulsanti con domande. Se vuoto, verranno generati automaticamente dal catalogo.
- Tono di comunicazione. Dalla lista o personalizzato: «caldo e conciso», «esperto, formale».
- Colore principale. Un unico colore definisce il pulsante, i link e l'evidenziazione delle schede.
- Logo. Diventerà anche l'icona dell'applicazione sul telefono.
- Pulsante microfono. Riconoscimento vocale nel browser. Se il browser non lo supporta, l'acquirente registrerà un messaggio vocale, che verrà trascritto da Gemini.
Sulla destra c'è un'anteprima dal vivo: cambia mentre digiti. Il pulsante «Salva» applica le modifiche al sito.
Tema chiaro e scuro#
La chat ha due stili, che si alternano in un unico campo delle impostazioni: «Tema».
| Valore | Cosa vede l'acquirente |
|---|---|
| Come il visitatore | Il tema si adatta alle impostazioni del suo telefono o computer: scuro di notte, chiaro di giorno |
| Chiaro | Finestra sempre chiara, indipendentemente dal dispositivo |
| Scuro | Finestra sempre scura |
Per impostazione predefinita è impostato su «come il visitatore», e nella maggior parte dei casi è la scelta giusta: una persona con un tema scuro sul telefono non riceverà un flash bianco in faccia, e chi è abituato a quello chiaro vedrà una finestra familiare.
Un tema fisso è necessario quando il sito stesso è realizzato con un unico stile. Una landing page scura con una chat chiara nell'angolo appare come una toppa, e viceversa. In tal caso, imposta lo stesso tema del sito e il widget si integrerà con il design.
Il colore principale funziona su entrambi i temi: pulsanti, link e evidenziazione delle schede assumono il tuo colore aziendale, mentre sfondo e testo cambiano con il tema. Il modo più semplice per verificare entrambe le opzioni è nell'anteprima a destra — si aggiorna immediatamente mentre cambi il valore.
Le schede prodotto rimandano al tuo sito web#
L'agente risponde non con un testo continuo, ma con schede: foto, nome, prezzo, pulsante. Dietro il pulsante c'è sempre un indirizzo — la pagina del prodotto sul tuo sito o il post originale sui social media, se la scheda è stata creata da lì.
All'interno del widget sul sito, il passaggio avviene nella stessa finestra per non creare troppe schede. Sulla pagina dell'agente tramite link, la scheda si apre in una nuova scheda per non perdere il dialogo.
Per i negozi su Shopify e WooCommerce c'è un dettaglio interessante: il pulsante non si limita ad aprire il prodotto, ma lo aggiunge al carrello del negozio tramite il meccanismo standard della piattaforma. Dettagli negli articoli su Shopify e WordPress.
E ancora: il widget legge il markup del prodotto sulla pagina in cui è aperto e lo trasmette all'agente. Per questo, la domanda «c'è in blu?» sulla scheda del prodotto viene compresa nel contesto, senza bisogno di specificare di cosa si tratta.
Applicazione sul telefono dell'acquirente#
La pagina dell'agente può essere installata come un'applicazione. L'acquirente apre il link dal telefono, vede la proposta di aggiungerla alla schermata iniziale e ottiene un'icona con il tuo logo.
- Nome sotto l'icona — una parola fino a 12 caratteri. Se vuoto, useremo la prima parola del nome del negozio.
- Icona — il logo caricato. Se non c'è un logo, viene utilizzato il logo di Commerce Agents.
- Su iPhone l'installazione avviene tramite «Condividi» → «Aggiungi alla schermata Home», è una limitazione di Safari, e l'agente suggerisce i passaggi da solo.
Dopo l'installazione, è possibile inviare notifiche push all'acquirente dalla sezione «Conversazioni». Il permesso viene dato dall'acquirente stesso, cliccando sull'icona della campanella nell'intestazione della chat.
Allegati dall'acquirente#
Nella chat c'è una graffetta: foto, video o audio fino a 20 megabyte. Se il browser non ha il riconoscimento vocale, tenendo premuto il microfono si registra un messaggio vocale.
Gemini analizza il file: cosa viene mostrato, quale testo è presente nell'immagine, cosa viene detto a voce. L'agente risponde basandosi su questa analisi, e tu vedi nella conversazione sia il file stesso che una breve descrizione. Questo è utile in settori dove è più facile mostrare che descrivere: ricambi, riparazioni, selezione tramite foto.
Pixel di acquisto per siti con carrello#
Se il pagamento avviene sul tuo sito, e non nella chat, inserisci un breve frammento dall'area personale nella pagina «Grazie per l'ordine», sostituendo il numero dell'ordine e l'importo. L'acquisto verrà collegato alla conversazione, e nelle statistiche sarà visibile quali scambi si concludono con una vendita.
Verifica#
Tre minuti da dedicare dopo la configurazione:
- Apra il sito in modalità incognito e clicchi il pulsante del widget. Ponga una domanda sul prodotto.
- Apra il link all'agente dal telefono. Verifichi che venga proposta l'installazione.
- Invii il link a sé stesso in una chat e controlli l'anteprima.
- Dia un'occhiata a «Chat»: lì dovrebbero apparire entrambe le conversazioni.
Domande frequenti#
Il widget sul sito e il link sono agenti diversi#
È lo stesso. Catalogo, condizioni, chat e richieste sono comuni. Cambia solo l'aspetto: sul sito è una finestra nell'angolo, tramite il link è una pagina a schermo intero che può essere installata sul telefono.
Si può cambiare l'indirizzo del link#
L'indirizzo viene generato dal nome del negozio al momento della creazione della vetrina. Se ne desidera uno diverso, ci scriva su Telegram: lo cambieremo manualmente per non compromettere i link già diffusi.
Il widget rallenterà il sito#
No. Lo script pesa poco e si carica in modo asincrono, dopo il contenuto principale della pagina. La finestra della chat stessa viene caricata solo quando il cliente clicca il pulsante.
Cosa vede il cliente se l'agente è disattivato#
Nulla: il pulsante non appare e la pagina tramite il link mostra che l'agente non è disponibile. L'interruttore si trova nella sezione «Widget e link».
Come rimuovere la dicitura «Funziona con Commerce Agents»#
Per ora non è possibile: la firma rimane su tutti i piani. È cliccabile e porta al nostro sito: è parte del prezzo, grazie alla quale il servizio costa 29 € invece di una somma notevolmente maggiore.