Come aggiungere il widget Conversational AI di ElevenLabs al tuo sito WordPress

La IA conversazionale di ElevenLabs è uno strumento potente per il supporto clienti che ti permette di creare esperienze interattive basate sull’IA e aumentare il coinvolgimento. Se hai un sito WordPress puoi integrare facilmente HTML e JavaScript personalizzati, incluse funzionalità dinamiche come la Conversational AI di ElevenLabs.

In questa guida ti mostriamo come aggiungere il widget Conversational AI al tuo sito WordPress usando i blocchi HTML personalizzati per pagine specifiche e l’inserimento di codice per una funzionalità globale.

Prima di iniziare

Prima di cominciare, assicurati di avere:

1. Piano WordPress: Se usi WordPress.com, serve un piano Business o Commerce per aggiungere JavaScript personalizzato. Se usi WordPress self-hosted puoi aggiungere codice senza queste limitazioni.
2. Account ElevenLabs: Configura il tuo agente vocale IA in ElevenLabs e copia il codice di incorporamento, che include gli snippet < script > e < div >.
3. Conoscenze base di WordPress: È utile sapere come aggiungere blocchi, modificare pagine o usare plugin.

Guida passo passo

Passo 1: Prepara il tuo widget ElevenLabs

1. Accedi al tuo account ElevenLabs.
2. Vai alla sezione Conversational AI.
3. Configura il tuo agente IA e copia il codice di incorporamento, che include:
4. • Uno snippet < script > per caricare la funzionalità del widget.
   • Uno snippet < div > per definire dove apparirà il widget.

Passo 2: Aggiungi il widget a una pagina specifica usando i blocchi HTML personalizzati

Per mostrare il widget su una pagina specifica, usa il blocco HTML personalizzato di WordPress.

1. Accedi alla dashboard di WordPress.
2. Vai su Pagine e crea una nuova pagina o modifica una esistente.
3. Clicca sull’icona + per aggiungere un nuovo blocco.
4. Cerca e seleziona HTML personalizzato tra le opzioni dei blocchi.
5. Incolla lo snippet < div > dal codice di incorporamento ElevenLabs nel blocco.
6. Clicca su Anteprima per verificare che il widget venga visualizzato correttamente.
7. Pubblica o aggiorna la pagina per rendere effettive le modifiche.

Passo 3: Aggiungi lo script globalmente tramite plugin o impostazioni del tema

Per far funzionare correttamente il widget, devi includere lo snippet < script > a livello globale.

Opzione A: Usa un plugin (consigliato se non sei sviluppatore)

1. Installa e attiva un plugin come Header Footer Code Manager.
2. Vai nelle impostazioni del plugin e crea un nuovo snippet di codice.
3. Incolla lo snippet < script > nella sezione Footer.
4. Imposta lo snippet per l’esecuzione su Tutte le pagine.
5. Salva le modifiche.

Opzione B: Aggiungi lo script direttamente al tema

1. Vai su Aspetto > Editor del tema nella dashboard di WordPress.
2. Apri il file footer.php del tema attivo.
3. Incolla lo snippet < script > subito prima del tag di chiusura < /body >.
4. Salva il file.

Passo 4: Pubblica e testa

1. Visita la pagina dove hai aggiunto il widget per verificare che sia visibile e funzioni correttamente.
2. Testa il widget su diversi dispositivi e browser per assicurarti che funzioni senza problemi.

Problemi comuni e soluzioni

Hai difficoltà ad attivare il widget? Questi suggerimenti possono aiutarti.

Problema 1: Il widget non viene visualizzato

• Causa: Snippet < script > o < div > mancanti o posizionati in modo errato.
• Soluzione: Controlla che lo snippet < script > sia aggiunto globalmente e che il < div > sia inserito nella pagina.

Problema 2: Widget disallineato

• Causa: Allineamento del blocco o stile mancante.
• Soluzione: Usa gli strumenti di allineamento dei blocchi di WordPress o aggiungi CSS personalizzato per posizionare correttamente il widget.

Problema 3: Conflitti tra plugin

• Causa: Altri plugin interferiscono con l’esecuzione di JavaScript.
• Soluzione: Disattiva i plugin uno alla volta per individuare il conflitto.

Suggerimenti avanzati

Dai un’occhiata a questi suggerimenti per personalizzare il widget secondo le tue esigenze. 

• Personalizzazione del widget: Usa la sezione Personalizza > CSS aggiuntivo di WordPress per adattare lo stile del widget al design del tuo sito.
• Test su diversi dispositivi: Prova il widget su desktop, tablet e dispositivi mobili per garantire un’esperienza utente coerente.
• Widget specifici per pagina: Se vuoi che il widget appaia solo su alcune pagine, evita di aggiungere lo snippet < script > globalmente. Inseriscilo invece in un plugin o blocco che agisce solo su quelle pagine.

Considerazioni finali

Aggiungere il widget Conversational AI di ElevenLabs al tuo sito WordPress è un modo efficace per coinvolgere i visitatori con interazioni basate sull’IA. Che tu lo inserisca su una singola pagina o su tutto il sito, WordPress ti offre gli strumenti per un’integrazione semplice.

Segui i passaggi descritti qui, testa bene la tua implementazione e apporta le modifiche necessarie. Se incontri problemi, non esitare a contattare il supporto ElevenLabs per assistenza.

Oppure, se non l’hai ancora fatto, registrati alla piattaforma Agents di ElevenLabs oggi stesso per iniziare subito.