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

Il widget di ElevenLabs IA conversazionale ti permette di arricchire il tuo sito Framer con conversazioni interattive basate su IA. Che tu voglia aumentare il coinvolgimento dei clienti o migliorare il supporto clienti, la Conversational AI può aiutarti.

In questa guida ti mostriamo tutti i passaggi per aggiungere il widget al tuo sito Framer. Imparerai a configurare widget per tutto il sito o per singole pagine e a risolvere i problemi più comuni.

Prima di iniziare

Prima di cominciare, assicurati di avere:

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 Conversational AI e copia il relativo codice di incorporamento (inclusi gli snippet < script > e < div >).
3. Familiarità con Framer: Conoscenza di base delle Impostazioni del sito e degli Elementi Embed di Framer

Guida passo passo

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

Passaggio 2: Aggiungi lo script nelle impostazioni del sito di Framer

1. Apri il tuo progetto Framer.
2. In alto a destra, clicca su Impostazioni progetto.
3. Vai alla scheda Generale e scorri fino alla sezione Codice personalizzato.
4. Incolla lo snippet < script > dal codice di incorporamento ElevenLabs nel campo End of < body > tag.
5. Salva le modifiche. Questo passaggio garantisce che lo script necessario venga caricato sul tuo sito.

Passaggio 3: Aggiungi il widget a una pagina specifica

1. Nel tuo progetto Framer, vai alla pagina in cui vuoi che appaia il widget.
2. Aggiungi un Embed Element dalla sezione Utilities del menu Inserisci.
3. Seleziona l’Embed Element sulla tua canvas per accedere alle sue impostazioni.
4. Imposta il Tipo su HTML.
5. Incolla lo snippet < div > dal codice di incorporamento ElevenLabs nel campo HTML.
6. Posiziona e ridimensiona l’Embed Element sulla canvas come preferisci.

Passaggio 4: Pubblica e testa

1. Clicca su Pubblica per rendere effettive le modifiche.
2. Apri il tuo sito in un browser per verificare che il widget sia visibile e funzioni correttamente.
3. • Nota: Il codice personalizzato non viene visualizzato nella modalità Anteprima di Framer—devi pubblicare il sito per vederlo.

Problemi comuni e soluzioni

Se hai difficoltà con l’integrazione, niente panico—qui sotto trovi alcuni suggerimenti utili.

Problema 1: Il widget non viene visualizzato

• Causa: Snippet < script > o < div > mancante o inserito nel punto sbagliato.
• Soluzione: Assicurati che lo snippet < script > sia inserito nel campo End of < body > tag nelle Impostazioni del sito e che lo snippet < div > sia nell’Embed Element.

Problema 2: Il widget è visibile solo in parte

• Causa: L’Embed Element ha dimensioni o posizione errate.
• Soluzione: Regola dimensioni e allineamento dell’Embed Element nell’Editor di Framer.

Problema 3: Errori nello script

• Causa: Script in conflitto o risorse esterne bloccate.
• Soluzione: Apri la console del browser per verificare eventuali errori JavaScript. Assicurati che Framer abbia i permessi per caricare script esterni.

Consigli avanzati

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

• Personalizzazione del widget: Usa CSS personalizzato per adattare lo stile del widget e integrarlo perfettamente con il design del tuo sito.
• Test su diversi dispositivi: Gli strumenti di design responsivo di Framer ti permettono di testare facilmente il widget su mobile, tablet e desktop per assicurarti che si adatti correttamente.
• Aggiunta di widget a pagine specifiche: Per includere il widget solo su alcune pagine, aggiungi lo snippet < div > in un Embed Element nelle pagine desiderate e assicurati che lo snippet < script > sia presente nelle Impostazioni del sito.

Considerazioni finali

Seguendo questa guida puoi arricchire il tuo sito Framer con interazioni dinamiche basate su IA, su misura per le esigenze del tuo pubblico. Pubblica le modifiche, testa la configurazione e lascia che la tua Conversational AI inizi a coinvolgere i visitatori già da oggi. Per ulteriore assistenza, contatta il supporto ElevenLabs supporto.

Registrati per Agenti vocali IA oggi stesso per iniziare.