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 la Conversational AI di ElevenLabs al tuo sito Webflow, i visitatori possono avere conversazioni naturali come se stessero davvero parlando con un membro del tuo team.

In questa guida ti mostriamo come aggiungere il widget di Conversational AI di ElevenLabs al tuo sito Webflow, integrandolo tramite HTML e JavaScript personalizzati.

Prima di iniziare

Prima di cominciare, assicurati di avere:

1. Account Webflow: Ti serve uno workspace Core, Growth, Agency o Freelancer attivo, oppure un Site Plan, per accedere all’Embed Element.
2. Account ElevenLabs: Configura il tuo agente vocale IA in ElevenLabs e copia il codice di incorporamento fornito (che include gli snippet < script > e < div >).
3. Familiarità con il Designer di Webflow: Una conoscenza di base su come aggiungere e modificare gli Embed Element in Webflow è utile.

Guida passo passo

Passaggio 1: Prepara il tuo widget ElevenLabs

1. Accedi al tuo account ElevenLabs.
2. Vai alla sezione Conversational AI.
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 mostrare il widget su una pagina specifica, usa l’Embed Element.

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

Nota: L’Embed Element funge da segnaposto per il widget nel Designer. Il widget vero e proprio verrà visualizzato solo quando il sito sarà pubblicato.

Passaggio 3: Aggiungi lo script globalmente

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

1. Vai alla Dashboard di Webflow e apri le Impostazioni del Progetto.
2. Vai alla scheda Custom Code.
3. Incolla lo snippet < script > nella sezione Footer Code. In questo modo lo script verrà caricato su tutte le pagine dove è presente il widget.
4. Clicca su Salva modifiche.

Passaggio 4: Pubblica e testa

1. Pubblica il 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 dal vivo.

Problemi comuni e risoluzione

Hai problemi con l’integrazione? Niente panico: questi suggerimenti ti aiuteranno.

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 posizionato correttamente in un Embed Element.

2. Widget disallineato

• Causa: Posizionamento o stile errato dell’Embed Element.
• Soluzione: Usa il pannello Style di Webflow per regolare dimensioni e allineamento dell’Embed Element.

3. Errori

• Causa: Conflitti con altri script o restrizioni del browser.
• Soluzione: Usa la console sviluppatore del browser per individuare e correggere eventuali errori JavaScript.

Consigli avanzati

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

• Personalizzazione del widget: Usa il pannello Style di Webflow o CSS personalizzato per modificare l’aspetto del widget, come dimensioni, allineamento o colori.
• Test su diversi dispositivi:Usa gli strumenti di design responsivo di Webflow per assicurarti che il widget funzioni senza problemi su desktop, tablet e dispositivi mobili.
• Riutilizzo del widget: Salva l’Embed Element come Component se prevedi di usare il widget su più pagine. In questo modo mantieni uno stile coerente e una gestione più semplice.

Considerazioni finali

Integrare il widget di Conversational AI di ElevenLabs in Webflow è semplice, grazie alle funzionalità Embed Element e Custom Code della piattaforma. Che tu voglia aumentare il coinvolgimento su una singola pagina o su tutto il sito, segui i passaggi qui sopra per iniziare.

Se hai bisogno di ulteriore assistenza, contatta ElevenLabs supporto oppure esplora i forum della community di Webflow per altri suggerimenti.

Se non l’hai già fatto, registrati alla piattaforma ElevenLabs Piattaforma di agenti IA oggi stesso per iniziare.

Domande frequenti