Come Configurare il Widget WhatsApp di Irelia.ai sul Tuo Sito Web

~10 minuti di configurazione

Cosa ti serve

Prerequisiti prima di iniziare

Widget WhatsApp vs. Webchat Tradizionale

Scopri i pro e i contro, e perché questa soluzione vince per la lead generation

Percorso rapido

Passaggi sintetici per utenti esperti

Configurazione passo dopo passo

Guida completa (Passaggi 1–5)

Checklist rapida

Verifica che tutto funzioni

Risoluzione dei problemi e FAQ

Problemi comuni e risposte

Introduzione

Stai investendo tempo e budget per portare traffico al tuo sito web. I visitatori arrivano, navigano, magari hanno una domanda — e poi se ne vanno. Nessun nome, nessun numero, nessun modo per fare follow-up. Persi. I widget di webchat tradizionali (live chat) cercano di risolvere questo problema, ma ne creano un altro: conversazioni anonime che svaniscono nel momento in cui qualcuno chiude la scheda del browser. Il tuo team commerciale si ritrova con chat a metà e zero informazioni di contatto per riprendere il discorso. Il Widget WhatsApp di Irelia.ai adotta un approccio più intelligente. Ha l’aspetto e il funzionamento di una familiare bolla di chat sul tuo sito, ma invece di intrappolare la conversazione dentro una finestra del browser, collega il visitatore direttamente a WhatsApp — dove il tuo AI agent continua la conversazione e tu catturi automaticamente il suo numero di telefono. Alla fine di questa guida, avrai: ✅ Un Widget di chat WhatsApp attivo sul tuo sito web
✅ Il tuo AI agent che risponde automaticamente a ogni visitatore che ti contatta
✅ Il numero WhatsApp di ogni visitatore acquisito in Irelia — pronto per il tuo team commerciale

Come funziona

Il Widget WhatsApp non è una webchat tradizionale — è un ponte intelligente tra il tuo sito web e WhatsApp. Ecco come si presenta l’esperienza dal punto di vista del visitatore:

Vede una bolla di chat WhatsApp verde nell’angolo in basso a destra del tuo sito
Ci clicca sopra e si apre una finestra simile a una chat con il nome della tua attività e un messaggio di benvenuto
Scrive la sua domanda nel campo di testo — proprio come farebbe in qualsiasi webchat
Preme Send (Invia) Ed ecco il colpo di genio. Invece di avviare una chat sul sito, il widget reindirizza il visitatore su WhatsApp tramite un link wa.me con il messaggio già precompilato. WhatsApp si apre (l’app su mobile, WhatsApp Web su desktop), e il visitatore preme invia un’altra volta per recapitare il messaggio. Da quel momento in poi, l’intera conversazione avviene su WhatsApp — gestita dal tuo AI agent Irelia. L’intuizione chiave: inviando quel primo messaggio WhatsApp, il visitatore ti consegna il suo numero di telefono. Nessun modulo. Nessun popup email. Nessun passaggio extra. Il tuo team commerciale ottiene un contatto reale per il follow-up, e la conversazione vive su WhatsApp — dove non scomparirà quando il visitatore chiude il browser.

In breve: Il widget emula una webchat sul tuo sito per quella primissima interazione, poi sposta la conversazione su WhatsApp in modo fluido. È il meglio di entrambi i mondi — la familiarità di una bolla di chat con la persistenza e l’acquisizione del contatto di WhatsApp.

Cosa farai

Ecco una rapida panoramica del processo di configurazione:

Apri le impostazioni WhatsApp in Irelia (~1 minuto)
Personalizza il testo del widget — titolo e messaggio di benvenuto (~2 minuti)
Copia il codice del widget (~30 secondi)
Aggiungi il codice al tuo sito web (~5 minuti)
Verifica che il tuo agent inbound predefinito sia configurato (~1 minuto)

📋 Cosa ti serve

Un account Irelia.ai con WhatsApp già collegato — Come collegare WhatsApp se non l’hai ancora fatto Obbligatorio
Almeno un AI agent attivo configurato in Irelia Obbligatorio
Accesso all’HTML del tuo sito web o a un plugin che ti permetta di aggiungere codice (come WPCode per WordPress) Obbligatorio Non serve programmare. Il codice del widget è già pronto — devi solo copiarlo e incollarlo. Se sai copiare un testo e incollarlo da qualche parte, puoi farcela.

Prima di configurare il widget, è utile capire come si confronta con una webchat tradizionale — e perché i compromessi giocano a tuo favore per la lead generation.

Funzionalità	💬 Webchat Tradizionale	✅ Widget WhatsApp
Esperienza del visitatore sul sito	La chat resta interamente sulla pagina	Reindirizza su WhatsApp dopo il primo messaggio
Acquisizione contatto	❌ Anonima — a meno che il visitatore non compili un modulo	✅ Automatica — ottieni il suo numero WhatsApp
Persistenza della conversazione	❌ Persa quando il visitatore chiude la scheda	✅ Continua su WhatsApp a tempo indeterminato
Follow-up commerciale	❌ Nessun modo per ricontattare il visitatore	✅ Il commerciale può scrivergli direttamente su WhatsApp
Notifiche mobile	❌ Nessuna — il visitatore deve restare sulla pagina	✅ Le notifiche push di WhatsApp lo mantengono coinvolto
Chat fluida sul sito	✅ Completamente integrata, non lascia mai la pagina	❌ Il visitatore viene reindirizzato fuori dal sito
Richiede WhatsApp	✅ No — funziona per chiunque abbia un browser	❌ Sì — il visitatore deve avere WhatsApp installato
La conclusione: Le webchat tradizionali mantengono l’esperienza sul tuo sito ma ti lasciano con conversazioni anonime e usa-e-getta. Il Widget WhatsApp scambia un piccolo reindirizzamento con qualcosa di molto più prezioso — un numero di telefono reale e una conversazione che non scompare mai.
Per la maggior parte degli scenari di vendita e lead generation, il Widget WhatsApp vince nettamente. Il leggero attrito del reindirizzamento è ampiamente compensato dalla possibilità di acquisire informazioni di contatto e continuare le conversazioni molto dopo che il visitatore ha lasciato il tuo sito.

Quando una webchat tradizionale potrebbe essere meglio? Se il tuo pubblico usa principalmente il desktop ed è improbabile che abbia WhatsApp (raro nella maggior parte dei mercati), o se hai bisogno che le conversazioni restino strettamente sulla pagina (es. supporto per utenti autenticati), una webchat tradizionale potrebbe essere più adatta. Per la lead generation però, il Widget WhatsApp è la scelta più forte.

⚡ Percorso rapido (utenti esperti)

Hai già dimestichezza con Irelia e con l’aggiunta di codice al tuo sito? Ecco la versione sintetica:

Irelia: Vai su “Settings” (Impostazioni) → scorri fino alla sezione “WhatsApp Widget” in fondo
Personalizza: Imposta il “Chat Title” (Titolo della Chat) e il “Message text” (Testo del messaggio)
Copia: Clicca su “Copy widget code” (Copia codice widget)
Sito web: Incolla il codice nel footer del tuo sito — direttamente prima di </body> nell’HTML, oppure tramite la funzione di codice personalizzato della tua piattaforma (WPCode per WordPress, Custom Code per Wix, Code Injection per Squarespace, ecc.)
Agent inbound: Verifica di avere un agent predefinito assegnato per le conversazioni WhatsApp inbound — Configura il tuo Agent Inbound Predefinito Ti servono più dettagli? Continua con la guida completa qui sotto.

🔧 Configurazione passo dopo passo

Apri le impostazioni WhatsApp in Irelia

~1 minuto

Accedi al tuo account Irelia.ai
Clicca sull’icona Settings (icona dell’ingranaggio) nella barra laterale sinistra
Clicca sulla scheda Whatsapp
Scorri fino in fondo alla pagina Settings
Troverai la sezione “WhatsApp Widget”

Non vedi la scheda WhatsApp? Compare solo dopo aver collegato il tuo numero WhatsApp a Irelia. Se non c’è, collega prima WhatsApp e poi torna a questa guida.

Vedrai il pannello di configurazione del widget: due campi di testo a sinistra e un’anteprima live del widget a destra.

Personalizza il testo del tuo widget

~2 minuti Il widget ha due campi di testo che puoi personalizzare. Questi definiscono la prima impressione che i visitatori ricevono quando interagiscono con la bolla di chat sul tuo sito.

Imposta il “Chat Title” — appare nella barra verde di intestazione del widget. Usa il nome della tua attività o qualcosa di amichevole e riconoscibile. Buoni esempi:

Il nome della tua attività (es. Acme Solutions)
Il nome di un reparto (es. Sales Team)
Qualcosa di invitante (es. Ask Us Anything)

Imposta il “Message text” — appare come una bolla di chat all’interno del widget, simulando un messaggio di benvenuto dalla tua attività. È la prima cosa che i visitatori leggono, quindi rendilo colloquiale e orientato all’azione. Buoni esempi:

How can I help you?
Hi! Ask me anything about our services.
Looking for something specific? Type your question below. L’anteprima live sul lato destro dello schermo si aggiorna mentre scrivi, così puoi vedere esattamente come apparirà il tuo widget prima di aggiungerlo al sito.

Imposta il tono giusto. Ricorda — questo messaggio di benvenuto dà il via a una conversazione WhatsApp. Mantienilo caldo e colloquiale, come se stessi salutando qualcuno che è appena entrato nel tuo negozio. Evita il linguaggio aziendale.

Copia il codice del widget

~30 secondi

Quando sei soddisfatto del titolo e del messaggio, clicca sul pulsante “Copy widget code” sotto i campi di testo
Un banner verde di conferma apparirà in fondo allo schermo: “Code copied! You can now paste it into your website as HTML code” (Codice copiato! Ora puoi incollarlo nel tuo sito web come codice HTML)

Il codice del widget è ora negli appunti — pronto per essere incollato nel tuo sito web.

Cosa contiene il codice? Il widget è costruito con puro HTML, CSS e JavaScript. Nessuna dipendenza esterna, nessuna libreria pesante. È leggero, veloce e non rallenterà il tuo sito.

Vuoi un design completamente personalizzato? Poiché il widget è composto da HTML, CSS e JS standard, uno sviluppatore può modificare ogni aspetto del suo aspetto — colori, font, dimensioni, posizione, animazioni, forma dei pulsanti, tutto. Il codice che copi da Irelia è il tuo punto di partenza. Con un po’ di aiuto da parte di uno sviluppatore, puoi farlo apparire come vuoi.

Aggiungi il widget al tuo sito web

~5 minuti Ora incolla il codice copiato nel tuo sito web. Il principio di base è lo stesso indipendentemente dalla piattaforma: il codice del widget deve caricarsi su ogni pagina del tuo sito, posizionato subito prima del tag di chiusura </body> (o nell’area codice “footer” — che è la stessa cosa). Come farlo dipende dalla piattaforma del tuo sito web. Trova la tua qui sotto.

HTML Diretto
WordPress
Wix
Altre piattaforme

Se hai accesso diretto ai file HTML del tuo sito web (tu o il tuo sviluppatore):

Apri il file HTML del tuo sito web (o il file template/layout) in un editor di codice
Trova il tag di chiusura </body> — di solito è alla fine del file
Incolla il codice del widget direttamente prima del tag </body>
Salva il file e aggiorna il tuo sito web
Dovresti vedere la bolla verde di WhatsApp apparire nell’angolo in basso a destra

Usi un sistema di template? La maggior parte dei siti web usa un file layout o template condiviso che avvolge ogni pagina. Incolla il codice del widget lì, in modo che appaia su tutto il sito. Se non sei sicuro di quale file sia, chiedi al tuo sviluppatore — saprà esattamente dove metterlo.

Se il tuo sito è su WordPress, il plugin gratuito WPCode è l’approccio più semplice — senza bisogno di modificare i file del tema:

Nella dashboard di WordPress, vai su “Plugins” → “Add New”
Cerca WPCode e installa il plugin “WPCode — Insert Headers and Footers + Custom Code Snippets”
Clicca su “Activate”
Nella barra laterale sinistra, vai su “Code Snippets” → ”+ Add Snippet”
Passa il mouse su “Add Your Custom Code (New Snippet)” e clicca sul pulsante “Use Snippet”

Dai al tuo snippet un nome descrittivo (es. Irelia WhatsApp Widget)
Nel menu a tendina “Code Type”, seleziona “HTML Snippet”
Incolla il codice del widget nell’area dell’editor di codice

Scorri fino alla sezione “Insertion” e impostala su “Site Wide Footer”
Attiva lo snippet impostandolo su “Active”
Clicca sul pulsante “Save Snippet”

Importante: Assicurati di selezionare “HTML Snippet” come tipo di codice — non “JavaScript” o “PHP”. Il codice del widget include HTML, CSS e JavaScript insieme, e l’opzione HTML Snippet li gestisce tutti e tre correttamente.

Se il tuo sito è costruito su Wix, puoi aggiungere il widget tramite la funzione Custom Code di Wix:

Vai alla tua Dashboard di Wix
Nella barra laterale sinistra, clicca su “Settings”
Scorri fino alla sezione “Advanced” e clicca su “Custom Code”
Clicca sul pulsante ”+ Add Custom Code”
Incolla il codice del widget nel box del codice
Dagli un nome (es. Irelia WhatsApp Widget)
Sotto “Add Code to Pages”, seleziona “All pages”
Sotto “Place Code in”, seleziona “Body - end”

Clicca su “Apply”

Se non vedi l’opzione “Custom Code” nelle impostazioni di Wix, potresti aver bisogno di un piano Wix Premium. I piani Wix gratuiti hanno accesso limitato all’inserimento di codice personalizzato.

Ogni piattaforma web moderna ha un modo per inserire codice personalizzato nel footer. Cerca una di queste opzioni nelle impostazioni della tua piattaforma:

Squarespace: “Settings” → “Advanced” → “Code Injection” → incolla nel campo “Footer”
Shopify: “Online Store” → “Themes” → “Edit Code” → apri theme.liquid → incolla prima di </body>
Webflow: “Project Settings” → “Custom Code” → incolla nel campo “Footer Code”

Regola generale per qualsiasi piattaforma: Cerca impostazioni etichettate “Custom Code”, “Code Injection”, “Header & Footer Scripts” o “Tracking Code”. Scegli l’opzione di posizionamento footer e incolla lì il codice del widget. Se non sei sicuro, la documentazione della tua piattaforma avrà una guida sull’aggiunta di HTML personalizzato — oppure chiedi al tuo sviluppatore.

Dopo aver salvato su qualsiasi piattaforma, apri il tuo sito web in una nuova scheda del browser (o in una finestra in incognito/privata per bypassare la cache). Dovresti vedere la bolla verde di WhatsApp nell’angolo in basso a destra di ogni pagina.

Il tuo widget è ora attivo sul tuo sito web!

Verifica il tuo agent inbound predefinito

~1 minuto C’è un ultimo tassello fondamentale per far funzionare tutto da cima a fondo. Quando un visitatore usa il tuo Widget WhatsApp, è lui che inizia la conversazione — scrive il primo messaggio. Nel gergo della messaggistica, questa si chiama conversazione inbound (il messaggio arriva a te, iniziato dal visitatore). Perché il tuo AI agent risponda automaticamente a questi messaggi in arrivo, Irelia deve sapere quale agent deve gestirli. Questo si configura tramite la sezione “Manage inbound conversations with this agent” nella scheda Trigger di un agent. Ecco cosa fare: Segui la nostra guida Configurazione dell’Agent Inbound Predefinito per assegnare l’agent giusto. Ci vuole circa un minuto.

Importante: Senza un agent inbound predefinito configurato, il tuo widget funzionerà perfettamente — i visitatori verranno reindirizzati su WhatsApp e il loro messaggio verrà inviato — ma nessun AI agent risponderà. La conversazione resterà senza risposta finché qualcuno del tuo team non risponderà manualmente. Non saltare questo passaggio.

🎉 Tutto pronto! Il tuo Widget WhatsApp è attivo e il tuo AI agent è pronto a gestire le conversazioni. Ecco cosa succede ora: ✅ Un visitatore arriva sul tuo sito e vede una familiare bolla di chat
✅ Scrive una domanda e clicca invia
✅ Viene reindirizzato su WhatsApp senza interruzioni con il messaggio precompilato
✅ Il tuo AI agent risponde istantaneamente — rispondendo alle domande, qualificando i lead, raccogliendo informazioni
✅ Il tuo team commerciale ottiene un numero WhatsApp reale per ogni conversazione — pronto per il follow-up Ogni singola conversazione ti dà un contatto. Niente più visitatori anonimi che scivolano via.

Prossimi passi

Ora che il tuo widget è attivo, ecco alcuni modi per ottenere ancora più valore:

🧪 Testa l’esperienza completa tu stesso — Apri il tuo sito in una finestra in incognito, clicca sul widget, scrivi una domanda e percorri l’intero flusso come farebbe un visitatore. Verifica che il tuo AI agent risponda correttamente su WhatsApp.
🎨 Personalizza il design — Lavora con uno sviluppatore per adattare colori, font e posizionamento del widget al tuo brand. Essendo puro HTML, CSS e JS, tutto è personalizzabile.
📲 Collega più punti di ingresso — Il widget sul sito è solo uno dei modi in cui i potenziali clienti possono raggiungere il tuo AI agent. Configura canali inbound aggiuntivi (come Facebook Messenger) e conversazioni outbound (dove il tuo agent contatta per primo) per coinvolgere i lead su più touchpoint. Consulta la nostra guida ai Punti di Ingresso e Canali di Conversazione.
📊 Monitora le tue conversazioni — Controlla il pannello chat di Irelia per vedere come interagiscono i visitatori e come si comporta il tuo AI agent. Cerca dei pattern nelle domande che le persone fanno — sono oro puro per migliorare il tuo agent.
🔗 Invia i lead al tuo CRM automaticamente — Usa gli eventi webhook di Irelia per inviare ogni nuovo lead WhatsApp direttamente al tuo CRM, ai fogli di calcolo o alla chat del team. Consulta la nostra Guida all’Integrazione con Zapier o la Guida all’Integrazione con Make.com per configurarlo.

✅ Checklist rapida

Usa questa checklist per verificare che la configurazione sia completa:

Configurazione

WhatsApp collegato a Irelia
“Chat Title” personalizzato con il nome della tua attività o un’etichetta
“Message text” impostato su un messaggio di benvenuto chiaro e invitante
Codice del widget copiato da Irelia
Codice incollato nel tuo sito web (prima del tag </body> o tramite WPCode)
Agent inbound predefinito configurato in Irelia

Verifica

La bolla verde di WhatsApp appare sul tuo sito web (angolo in basso a destra)
Cliccando sulla bolla si apre la finestra di chat con il tuo titolo e messaggio
Scrivendo un messaggio e premendo invia si viene reindirizzati su WhatsApp
Il tuo messaggio appare precompilato nella chat di WhatsApp
L’AI agent risponde dopo che invii il messaggio su WhatsApp

✅ Tutto spuntato? Sei pronto!

🛠️ Risoluzione dei problemi e FAQ

Come risolvere: Passo 1: Collega prima WhatsApp

Segui la nostra guida Come collegare WhatsApp per collegare il tuo numero WhatsApp Business a Irelia
Una volta collegato, torna su “Settings” e scorri fino in fondo — la sezione “WhatsApp Widget” apparirà

Il codice del widget non si sta caricando correttamente sul tuo sito

Come risolvere: Passo 1: Controlla il posizionamento del codice

Verifica che il codice sia posizionato all’interno della sezione <body> del tuo HTML (idealmente subito prima di </body>)
Se usi WPCode, conferma che lo snippet sia impostato su “Active” e che il metodo di inserimento sia “Site Wide Footer” Passo 2: Svuota la cache
Svuota la cache del browser, o apri il sito in una finestra in incognito/privata
Se il tuo sito usa un plugin di caching (come WP Super Cache o W3 Total Cache), svuota anche la cache a livello di sito Passo 3: Controlla eventuali errori JavaScript
Clicca col tasto destro in qualsiasi punto della pagina → clicca su “Inspect” (Ispeziona) → vai alla scheda “Console”
Cerca messaggi di errore in rosso — se ne vedi qualcuno relativo al widget, condividili con il tuo sviluppatore

Il reindirizzamento a WhatsApp viene bloccato, di solito da un blocco popup o un'estensione del browser

Come risolvere: Passo 1: Controlla i blocchi popup e pubblicitari

Disabilita temporaneamente eventuali estensioni ad blocker o blocco popup nel tuo browser
Riprova il widget Passo 2: Prova in un browser diverso
Apri il tuo sito in un browser diverso (es. Chrome, Firefox, Safari) per escludere problemi specifici del browser Passo 3: Verifica la tua connessione WhatsApp
Vai su “Settings” di Irelia e conferma che il tuo numero WhatsApp sia correttamente collegato e attivo

Il messaggio del visitatore arriva su WhatsApp correttamente, ma nessun AI agent risponde

Possibili cause:

Nessun agent inbound predefinito è configurato, quindi Irelia non sa quale AI agent dovrebbe rispondere
Il tuo account Irelia ha esaurito i crediti, quindi l’AI agent non può elaborare nuove conversazioni Come risolvere: Passo 1: Controlla il tuo agent inbound predefinito
Segui la guida Configurazione dell’Agent Inbound Predefinito
Assicurati che l’agent corretto sia selezionato per le conversazioni WhatsApp inbound Passo 2: Controlla il tuo saldo crediti
In Irelia, controlla il tuo saldo crediti nella sezione “Subscription” (Abbonamento) sotto “Settings”
Se i tuoi crediti sono esauriti, l’AI agent non risponderà alle nuove conversazioni anche se tutto il resto è configurato correttamente
Attiva il tuo abbonamento o anticipa il rinnovo per ripristinare le risposte automatiche Passo 3: Verifica che l’agent sia configurato per le conversazioni inbound
Apri la configurazione del tuo agent in Irelia e verifica che uno degli agent sia configurato come predefinito per le conversazioni inbound

Posso avere widget diversi su pagine diverse?

Posso cambiare i colori, la posizione o il design del widget?

Il widget funziona su dispositivi mobile?

🆘 Hai bisogno di aiuto?

Supporto Irelia.ai:

Contatta il supporto nel gruppo WhatsApp di supporto prioritario o invia un’email a info@irelia.ai
Includi: screenshot della configurazione del widget, il problema che stai riscontrando, e cosa ti aspettavi rispetto a cosa è successo