Plugin di Chat Web con IA
Aggiungi una chat intelligente al tuo sito web per assistere i visitatori automaticamente con la stessa IA di WhatsApp.
Cos’è il Plugin di Chat?
Il plugin di chat consente di aggiungere un assistente IA a qualsiasi pagina web. I visitatori possono chattare direttamente con l’IA senza bisogno di WhatsApp, e tu puoi assisterli utilizzando le stesse integrazioni e funzioni che hai già configurato.
- • Risposte automatiche con IA addestrata sulla tua attività
- • Accesso alla ricerca di prodotti, clienti e funzioni personalizzate
- • Supporto multilingue con traduzione automatica
- • 10 temi di design personalizzabili
- • Modalità flottante (pulsante nell’angolo) o incorporata (all’interno di un div)
Come attivare il plugin
- Apri il Dashboard di WAzion
- Nel menu laterale, clicca su “Plugin“ → “Chat
- Attiva l’interruttore “Plugin attivo
- Aggiungi il tuo dominio in “Domini Autorizzati“ (es: mitienda.com)
- Copia il codice di integrazione e incollalo nel tuo sito web
Codice di integrazione
Copia questo codice e incollalo prima di chiudere il tag </body> del tuo sito web:
<!-- WAzion Chat Web --> <script> (function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/chat/embed.js'; js.dataset.token=t;d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI'); </script>
Il token viene generato automaticamente al attivare il plugin. Lo troverai nella sezione di configurazione della chat.
Modalità incorporata (opzionale)
Se preferisci inserire la chat all’interno di un contenitore specifico invece che come pulsante flottante, avvolgi il codice in un div:
<div id="mi-chat" style="height: 500px;">
<script>
(function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t};
var js=d.createElement(s);js.async=true;
js.src='https://www.wazion.com/plugins/chat/embed.js';
js.dataset.token=t;d.body.appendChild(js);
})(window,document,'script','TU_TOKEN_AQUI');
</script>
</div>
La chat verrà renderizzato all’interno del div contenitore invece che come pulsante flottante.
Guida all’installazione su Shopify
Segui questi passaggi per aggiungere la chat a tutte le pagine del tuo negozio Shopify.
Accedi all’editor dei temi
Nel tuo pannello di amministrazione di Shopify:
- Vai a Negozio online nel menu laterale a sinistra
- Fai clic su Argomenti
- Nel tuo tema attuale, fai clic sul pulsante ... (tre punti)
- Seleziona Modifica codice
Cerca il file theme.liquid
Nel pannello laterale sinistro dell’editor:
- Cerca la cartella Layout
- Fai clic su theme.liquid
Nota: theme.liquid è il file principale che viene caricato in tutte le pagine del tuo negozio.
Individua il tag </body>
Nell’editor di codice:
- Usa Ctrl+F (Windows) o Cmd+F (Mac) per cercare
- Scrivi </body> e premi Invio
- Troverai l’etichetta vicino alla fine del file
Incolla il codice della chat
Incolla il seguente codice PROPRIO PRIMA di </body>:
<!-- WAzion Chat Web --> <script> (function(w,d,s,t){if(w.WazionPlugin)return;w.WazionPlugin={token:t}; var js=d.createElement(s);js.async=true; js.src='https://www.wazion.com/plugins/chat/embed.js'; js.dataset.token=t;d.body.appendChild(js); })(window,document,'script','TU_TOKEN_AQUI'); </script> <!-- /WAzion Chat Web --> </body>
Importante: Sostituisci TU_TOKEN_AQUI con il token che appare nel tuo Dashboard di WAzion.
Salva le modifiche
Fai clic sul pulsante Salva nell’angolo in alto a destra dell’editor.
Verifica l’installazione
Visita il tuo negozio in una finestra di navigazione in incognito. Dovresti vedere il pulsante della chat nell’angolo dello schermo.
Metodo alternativo: Custom Pixels (Shopify Plus)
Se hai Shopify Plus, puoi utilizzare Custom Pixels:
- Vai a Impostazioni → Privacy del cliente → Pixel personalizzati
- Fai clic su Aggiungi pixel personalizzato
- Dagli un nome (es: “WAzion Chat“)
- Nel campo del codice, incolla:
analytics.subscribe("page_viewed", (event) => {
if (window.WazionPlugin) return;
window.WazionPlugin = {token: 'TU_TOKEN_AQUI'};
const js = document.createElement('script');
js.async = true;
js.src = 'https://www.wazion.com/plugins/chat/embed.js';
js.dataset.token = 'TU_TOKEN_AQUI';
document.body.appendChild(js);
});
Guida all’installazione in WordPress
Opzione 1: Con plugin (consigliato)
Usa un plugin per inserire codice nel footer:
- Installa il plugin Insert Headers and Footers (di WPCode) o simile
- Vai a Code Snippets → Header & Footer
- Nella sezione Footer, incolla il codice della chat:
<script src="https://www.wazion.com/plugins/chat/embed.js"
data-token="TU_TOKEN_AQUI"></script>
Salva le modifiche e la chat apparirà in tutte le pagine.
Opzione 2: Modificando functions.php
Avviso: Questo metodo richiede conoscenze di base di PHP. Fai un backup prima.
- Vai a Aspetto → Editor dei file del tema
- Seleziona functions.php nell’elenco dei file
- Aggiungi questo codice alla fine del file:
// WAzion Chat Web
function wazion_chat_script() {
echo '<script src="https://www.wazion.com/plugins/chat/embed.js"
data-token="TU_TOKEN_AQUI"></script>';
}
add_action('wp_footer', 'wazion_chat_script');
Guida per siti HTML/altri
Per qualsiasi sito web (HTML statico, React, Vue, Angular, ecc.):
Struttura base
Incolla il codice proprio prima di </body> nel tuo file HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mi sitio web</title>
</head>
<body>
<!-- Tu contenido aquí -->
<!-- WAzion Chat Web - Pegar AQUÍ, antes de </body> -->
<script src="https://www.wazion.com/plugins/chat/embed.js"
data-token="TU_TOKEN_AQUI"></script>
</body>
</html>
Per applicazioni SPA (React, Vue, Angular)
Puoi caricare lo script dinamicamente:
// En tu componente principal o App.js
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://www.wazion.com/plugins/chat/embed.js';
script.dataset.token = 'TU_TOKEN_AQUI';
script.async = true;
document.body.appendChild(script);
return () => document.body.removeChild(script);
}, []);
Risoluzione dei problemi
La chat non appare
- → Verifica che il plugin sia attivato nella Dashboard
- → Verifica che il tuo dominio sia nella lista dei domini autorizzati
- → Apri la console del browser (F12) e cerca errori
- → Prova in una finestra in incognito per escludere la cache
Errore “Dominio non autorizzato
- → Aggiungi il tuo dominio esatto alla lista di quelli autorizzati (senza http:// né /)
- → Se usi www, aggiungi sia “midominio.com“ che “www.midominio.com
- → Per lo sviluppo locale, aggiungi “localhost“ o usa “*“ temporaneamente
La chat appare ma non risponde
- → Verifica di avere crediti disponibili sul tuo conto
- → Verifica che il token sia corretto
- → Controlla se hai raggiunto il limite di rate limiting
Opzioni di configurazione
Domini autorizzati
Elenco dei domini in cui la chat può funzionare. Per sicurezza, è consentito l’uso solo dai domini che hai autorizzato.
- • mitienda.com
- • *.mitienda.com (inclusi i sottodomini)
- • * (qualsiasi dominio - solo per sviluppo)
Modalità di Visualizzazione
Galleggiante
Mostra un pulsante nell’angolo della pagina. Al cliccarlo, si apre la finestra di chat.
Incorporato
La chat si inserisce all’interno di un contenitore div nella tua pagina, ideale per pagine di contatto.
Configurazione del Pulsante Fluttuante
- • Posizione: In basso a destra, in basso a sinistra, in alto a destra o in alto a sinistra
- • Icona: 6 icone disponibili (bolla, messaggio, supporto, robot, ecc.)
- • Colori: Colore di sfondo e colore dell’icona personalizzabili
- • Dimensione: Piccolo (48px), Medio (60px), Grande (72px)
- • Animazione: Nessuna, impulso o rimbalzo per attirare l’attenzione
- • Suggerimento: Testo che appare passando il mouse sul pulsante
Temi di Design
10 temi predefiniti per adattare la chat al tuo marchio:
Testi della Chat
Personalizza i testi che vede il visitatore:
- • Titolo della chat (intestazione)
- • Messaggio di benvenuto
- • Segnaposto del campo di testo
- • Testo del pulsante invia
I testi vengono tradotti automaticamente nella lingua del visitatore.
Impostazione della lingua
Rilevamento automatico
Rileva automaticamente la lingua del browser del visitatore.
Lingua fissa
Mostrare sempre in una lingua specifica (es: solo spagnolo).
Con selettore
Rileva automaticamente ma permette al visitatore di cambiare manualmente la lingua.
Comportamento
- • Auto-apertura Apri la chat automaticamente dopo X secondi
- • Suono: Riprodurre suono al ricevere un messaggio
- • Branding: Mostrare “Powered by WAzion“ nella chat
Limitazione della frequenza (Limite di messaggi)
Proteggi il tuo account dall’uso eccessivo impostando limiti per sessione:
- • Massimo di messaggi per finestra temporale (es: 30 messaggi)
- • Finestra temporale in minuti (es: 60 minuti)
Prompt della Chat
Puoi scrivere istruzioni specifiche per la chat web o sincronizzarle con il tuo prompt di WhatsApp:
-
•
Modificare con IA: Scrivi istruzioni in linguaggio naturale (es: “aggiungi orario di apertura dalle 9 alle 18“) e l’IA modificherà automaticamente il tuo prompt. Vedrai una differenza visiva con le modifiche: testo aggiunto in verde e testo eliminato in rosso.
-
•
Importare da modello generale: Copia il tuo prompt di WhatsApp nel plugin con un clic.
-
•
Cronologia delle versioni: Ogni volta che salvi, viene creata una versione. Puoi ripristinare qualsiasi versione precedente.
Sincronizzazione automatica: Dall’Editor di Prompt, puoi selezionare l’opzione “Al salvataggio, aggiorna il prompt del plugin web“. L’IA adatterà automaticamente il tuo prompt eliminando i riferimenti a WhatsApp.
CSS Personalizzato
Per impostazioni avanzate, puoi aggiungere CSS personalizzato che verrà applicato alla chat.
Funzioni dell’IA nella chat
L’IA della chat ha accesso alle stesse funzioni del tuo assistente WhatsApp:
Ricerca di Prodotti
L’IA può cercare i prodotti del tuo negozio e mostrare informazioni.
Informazioni sui clienti
Se hai collegato CRM o Shopify, l’IA accede ai dati del cliente.
Ricerca Web
Se abilitato, l’IA può cercare informazioni su internet.
Funzioni personalizzate
Le tue funzioni personalizzate (function calling) funzionano nella chat.
Statistiche e Visualizzatore di Conversazioni
Metriche di utilizzo
Nel Cruscotto puoi vedere le metriche di utilizzo della chat:
- • Conversazioni totali
- • Messaggi totali
- • Conversazioni negli ultimi 7 giorni
- • Sessioni attive nelle ultime 24 ore
Visualizzatore di Conversazioni
Rivedi tutte le conversazioni della chat con i tuoi visitatori:
- • Filtro per periodo: Oggi, 7 giorni, 30 giorni, 90 giorni, 1 anno, tutti, o intervallo di date personalizzato
- • Lista impaginata: Naviga tra tutte le conversazioni (10 per pagina)
- • Dettaglio completo: Clicca su qualsiasi conversazione per vedere tutti i messaggi
- • Informazioni del visitatore: Lingua, numero di messaggi e pagina di origine
Aprire con messaggio predefinito
Puoi aprire la chat con un messaggio predefinito aggiungendo il parametro ?Message= all’URL:
https://mitienda.com/contacto?Message=Quiero información sobre el producto X
La chat si aprirà automaticamente e invierà il messaggio specificato.
