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

L'IA conversazionale di ElevenLabs è un potente strumento di assistenza clienti per creare esperienze interattive basate sull'IA che aumentano il coinvolgimento. Se hai un sito WordPress, puoi integrare facilmente HTML e JavaScript personalizzati, comprese funzionalità dinamiche come l'IA conversazionale di ElevenLabs.

In questa guida ti mostreremo come aggiungere il widget IA conversazionale al tuo sito WordPress usando i blocchi HTML personalizzati per pagine specifiche e l'inserimento di codice per funzionalità globali.

Prima di iniziare

Prima di iniziare, assicurati di avere quanto segue:

1. Piano WordPress: per gli utenti di WordPress.com, è necessario un piano Business o Commerce per aggiungere JavaScript personalizzato. Gli utenti di WordPress self-hosted possono aggiungere codice senza queste restrizioni.
2. Account ElevenLabs: configura il tuo agente vocale IA conversazionale in ElevenLabs e copia il codice di incorporamento, che include snippet < script > e < div >.
3. Conoscenze di base di WordPress: è utile avere familiarità con l'aggiunta di blocchi, la modifica delle pagine o l'uso dei plugin.

Guida passo passo

Passaggio 1: prepara il tuo widget ElevenLabs

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

Passaggio 2: aggiungi il widget a una pagina specifica usando i blocchi HTML personalizzati

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

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

Passaggio 3: aggiungi lo script globalmente usando un plugin o le impostazioni del tema

Per assicurarti che il widget funzioni correttamente, devi includere globalmente lo snippet < script >.

Opzione A: usa un plugin (consigliato per chi non è sviluppatore)

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

Opzione B: aggiungi lo script direttamente al tema

1. Nella dashboard di WordPress, vai a Aspetto > Editor del tema.
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.

Passaggio 4: pubblica e testa

1. Visita la pagina in cui hai aggiunto il widget per verificare che venga visualizzato e funzioni correttamente.
2. Testa il widget su più dispositivi e browser per assicurarti che funzioni senza problemi.

Problemi comuni e risoluzione dei problemi

Hai difficoltà ad avviare il widget? Questi suggerimenti potrebbero aiutarti. 

Problema 1: il widget non viene visualizzato

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

Problema 2: widget non allineato

• Causa: allineamento del blocco o stili mancanti.
• Soluzione: usa gli strumenti di allineamento dei blocchi di WordPress oppure 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 identificare il conflitto.

Suggerimenti avanzati

Consulta questi suggerimenti per ulteriore aiuto nel far funzionare il widget come desideri. 

• Personalizzazione del widget: usa la sezione Personalizza > CSS aggiuntivo di WordPress per definire lo stile del widget e assicurarti che si abbini al design del sito.
• Test su più dispositivi: testa il widget su desktop, tablet e dispositivi mobili per garantire un'esperienza utente coerente.
• Widget per pagine specifiche: se vuoi che il widget appaia soltanto su pagine specifiche, evita di aggiungere globalmente lo snippet < script >. Includilo invece in un plugin o blocco destinato a tali pagine.

Considerazioni finali

Aggiungere il widget IA conversazionale di ElevenLabs al tuo sito WordPress è un modo efficace per coinvolgere i visitatori con interazioni basate sull'IA. Che tu lo incorpori in una singola pagina o nell'intero sito, WordPress offre gli strumenti necessari per un'integrazione fluida.

Segui i passaggi descritti qui, testa a fondo l'implementazione e apporta le modifiche necessarie. Se riscontri problemi, non esitare a contattare l'assistenza di ElevenLabs supporto per ricevere assistenza.

Oppure, se non l'hai ancora fatto, registrati oggi a ElevenLabs Agents Platform per avviare il processo.