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

Il widget di ElevenLabs IA conversazionale ti consente di migliorare il tuo sito Framer con conversazioni interattive basate sull'IA. Che tu voglia aumentare il coinvolgimento dei clienti o migliorare l'assistenza clienti, l'IA conversazionale può aiutarti. 

In questa guida ti mostreremo i passaggi per aggiungere il widget al tuo sito Framer. Imparerai a configurare widget per l'intero sito o per pagine specifiche e a risolvere i problemi più comuni.

Prima di iniziare

Prima di iniziare, assicurati di avere quanto segue:

1. Account Framer: accesso a un progetto Framer con la possibilità di aggiungere codice personalizzato (disponibile nei piani a pagamento).
2. Account ElevenLabs: configura il tuo agente di IA conversazionale e copia il relativo codice di incorporamento (inclusi gli snippet < script > e < div >).
3. Conoscenza di Framer: conoscenza di base delle Impostazioni del sito e degli elementi Embed di Framer

Guida passo passo

Passaggio 1: prepara il 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 fornito, che include:
4. • Uno snippet < script > per caricare le funzionalità del widget.
   • Uno snippet < div > per definire dove verrà visualizzato il widget.

Passaggio 2: aggiungi lo script alle impostazioni del sito Framer

1. Apri il tuo progetto Framer.
2. Nell'angolo in alto a destra, fai clic su Project Settings.
3. Vai alla scheda General e scorri fino alla sezione Custom Code.
4. Incolla lo snippet < script > del codice di incorporamento di ElevenLabs nel campo End of < body > tag.
5. Salva le modifiche. Questo passaggio assicura che lo script necessario venga caricato per il tuo sito.

Passaggio 3: aggiungi il widget a una pagina specifica

1. Nel tuo progetto Framer, vai alla pagina in cui vuoi visualizzare il widget.
2. Aggiungi un Embed Element dalla sezione Utilities del menu Insert.
3. Seleziona l'Embed Element nell'area di lavoro per accedere alle sue impostazioni.
4. Imposta Type su HTML.
5. Incolla lo snippet < div > del codice di incorporamento di ElevenLabs nel campo HTML.
6. Posiziona e ridimensiona l'Embed Element nell'area di lavoro secondo necessità.

Passaggio 4: pubblica e testa

1. Fai clic su Publish per rendere effettive le modifiche.
2. Apri il tuo sito web in un browser per verificare che il widget venga visualizzato e funzioni correttamente.
3. • Nota: il codice personalizzato non viene visualizzato nella modalità Preview di Framer; devi pubblicare il sito per visualizzarlo.

Problemi comuni e risoluzione dei problemi

Se hai difficoltà a far funzionare l'integrazione, non preoccuparti: consulta i suggerimenti per la risoluzione dei problemi qui sotto. 

Problema 1: il widget non viene visualizzato

• Causa: snippet < script > o < div > mancante o posizionato in modo errato.
• Soluzione: assicurati che lo snippet < script > sia aggiunto al campo End of < body > tag nelle Site Settings e che lo snippet < div > sia nell'Embed Element.

Problema 2: il widget è visibile solo parzialmente

• Causa: l'Embed Element ha dimensioni o posizione errate.
• Soluzione: regola le dimensioni e l'allineamento dell'Embed Element nell'editor di Framer.

Problema 3: errori dello script

• Causa: script in conflitto o risorse esterne bloccate.
• Soluzione: apri la console del browser per verificare la presenza di errori JavaScript. Assicurati che Framer disponga delle autorizzazioni per caricare script esterni.

Suggerimenti avanzati

Cerchi opzioni di personalizzazione più avanzate? Questi suggerimenti possono aiutarti. 

• Personalizzare il widget: usa CSS personalizzato per definire lo stile del widget e integrarlo perfettamente nel design del tuo sito web.
• Test su più dispositivi: gli strumenti di responsive design di Framer semplificano il test del widget nelle visualizzazioni mobile, tablet e desktop, per assicurarti che venga ridimensionato correttamente.
• Aggiungere widget a pagine specifiche: per includere il widget solo in pagine specifiche, aggiungi lo snippet < div > a un Embed Element nelle pagine desiderate e assicurati che lo snippet < script > sia presente nelle Site Settings.

Considerazioni finali 

Seguendo questa guida, puoi migliorare il tuo sito Framer con interazioni dinamiche basate sull'IA, pensate per le esigenze del tuo pubblico. Pubblica le modifiche, testa la configurazione e lascia che la tua IA conversazionale inizi a interagire con i visitatori già oggi. Per ulteriore assistenza, contatta il supporto di ElevenLabs.

Registrati a Agenti vocali IA oggi stesso per iniziare.