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

Vuoi migliorare l'esperienza dei tuoi clienti? IA conversazionale può aiutarti. Aggiungendo l'IA conversazionale di ElevenLabs al tuo sito Webflow, i visitatori potranno avere naturali conversazioni come se stessero davvero parlando con un membro del tuo team. 

In questa guida ti illustreremo come aggiungere il widget IA conversazionale di ElevenLabs al tuo sito Webflow e integrarlo usando HTML personalizzato e JavaScript.

Prima di iniziare

Prima di iniziare, assicurati di avere quanto segue:

1. Account Webflow: per accedere all'Embed Element, devi avere un workspace Core, Growth, Agency o Freelancer attivo oppure un Site Plan.
2. Account ElevenLabs: configura il tuo agente vocale IA conversazionale in ElevenLabs e copia il codice di incorporamento fornito, che include gli snippet < script > e < div >.
3. Familiarità con Designer di Webflow: è utile avere una conoscenza di base di come aggiungere e modificare gli Embed Element in Webflow.

Guida passo per passo

Passaggio 1: prepara il widget di ElevenLabs

1. Accedi al tuo account ElevenLabs.
2. Vai alla sezione IA conversazionale.
3. 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 nella pagina.

Passaggio 2: aggiungi il widget a una pagina Webflow

Per visualizzare il widget in una pagina specifica, usa l'Embed Element.

1. Apri il tuo progetto Webflow nel Designer.
2. Vai alla pagina in cui vuoi che appaia il widget.
3. Dal pannello Elements, trascina l'Embed Element nella posizione desiderata della pagina.
4. Nell'editor di codice dell'Embed Element, incolla lo snippet < div > del codice di incorporamento di ElevenLabs.
5. Fai clic su Save & Close per applicare le modifiche.

Nota: l'Embed Element funge da segnaposto per il widget nel Designer. Il widget effettivo verrà visualizzato solo dopo la pubblicazione del sito.

Passaggio 3: aggiungi lo script a livello globale

Per assicurarti che il widget funzioni correttamente, devi includere lo snippet < script > a livello globale nel tuo sito.

1. Vai alla Dashboard di Webflow e apri Project Settings.
2. Vai alla scheda Custom Code.
3. Incolla lo snippet < script > nella sezione Footer Code. In questo modo, lo script verrà caricato in tutte le pagine in cui viene usato il widget.
4. Fai clic su Save Changes.

Passaggio 4: pubblica e testa

1. Pubblica il tuo sito sul dominio di staging di Webflow o sul tuo dominio personalizzato.
2. Apri il sito in un browser per verificare che il widget appaia e funzioni come previsto.

Importante: il codice personalizzato non viene visualizzato nel Designer di Webflow. Devi pubblicare il sito per vedere il widget in funzione.

Problemi comuni e risoluzione dei problemi

Hai difficoltà a configurare l'integrazione? Non preoccuparti: i suggerimenti qui sotto dovrebbero aiutarti.

1. Il widget non viene visualizzato

• Causa: snippet < script > o < div > mancanti o posizionati in modo errato.
• Soluzione: assicurati che lo snippet < script > sia nella sezione Footer Code e che lo snippet < div > sia inserito correttamente in un Embed Element.

2. Widget non allineato

• Causa: posizionamento o stile errato dell'Embed Element.
• Soluzione: usa lo Style Panel di Webflow per regolare le dimensioni e l'allineamento dell'Embed Element.

3. Errori

• Causa: conflitti con altri script o restrizioni del browser.
• Soluzione: usa la console per sviluppatori del browser per identificare e correggere gli errori JavaScript.

Suggerimenti avanzati

Se vuoi personalizzare il widget, testarlo su dispositivi diversi o riutilizzarlo su più pagine, ecco cosa devi sapere.

• Personalizzare il widget: usa lo Style Panel di Webflow o CSS personalizzato per modificarne l'aspetto, ad esempio dimensioni, allineamento o colori.
• Testare su dispositivi diversi: usa gli strumenti di responsive design di Webflow per assicurarti che il widget funzioni senza problemi su desktop, tablet e dispositivi mobili.
• Riutilizzare il widget: salva l'Embed Element come Component se prevedi di usare il widget su più pagine. Così manterrai uno stile coerente e lo gestirai più facilmente.

Considerazioni finali

Integrare il widget IA conversazionale di ElevenLabs in Webflow è semplice, grazie alle funzionalità Embed Element e Custom Code della piattaforma. Che tu voglia migliorare il coinvolgimento in una sola pagina o nell'intero sito, segui i passaggi sopra per iniziare.

Per ulteriore assistenza, non esitare a contattare il supporto di ElevenLabs o a esplorare i forum della community di Webflow per ulteriori indicazioni. 

Se non l'hai già fatto, registrati oggi a Piattaforma per agenti IA di ElevenLabs per iniziare. 

Domande frequenti