Como adicionar o widget de IA Conversacional da ElevenLabs ao seu site no Framer

O widget de IA Conversacional da ElevenLabs permite aprimorar seu site no Framer com conversas interativas conduzidas por IA. Seja para aumentar o engajamento dos clientes ou melhorar seu suporte ao cliente, a IA Conversacional pode ajudar. 

Neste guia, mostraremos como adicionar o widget ao seu site no Framer. Você vai aprender a configurar widgets para todo o site ou para páginas específicas e a solucionar problemas comuns.

Antes de começar

Antes de começar, verifique se você tem o seguinte:

1. Conta no Framer: acesso a um projeto no Framer com permissão para adicionar código personalizado (disponível nos planos pagos).
2. Conta na ElevenLabs: configure seu agente de IA Conversacional e copie o código de incorporação (incluindo os snippets < script > e < div >).
3. Familiaridade com o Framer: conhecimento básico das Configurações do site e dos Elementos de incorporação do Framer

Guia passo a passo

Etapa 1: prepare seu widget da ElevenLabs

1. Entre na sua conta da ElevenLabs.
2. Acesse a seção de IA Conversacional.
3. Configure seu agente de IA e copie o código de incorporação fornecido, que inclui:
4. • Um snippet < script > para carregar as funcionalidades do widget.
   • Um snippet < div > para definir onde o widget aparecerá.

Etapa 2: adicione o script às configurações do site no Framer

1. Abra seu projeto no Framer.
2. No canto superior direito, clique em Configurações do projeto.
3. Acesse a aba Geral e role até a seção Código personalizado.
4. Cole o snippet < script > do código de incorporação da ElevenLabs no campo End of < body > tag.
5. Salve as alterações. Isso garante que o script necessário seja carregado no seu site.

Etapa 3: adicione o widget a uma página específica

1. No seu projeto no Framer, acesse a página em que você quer que o widget apareça.
2. Adicione um Elemento de incorporação na seção Utilitários do menu Inserir.
3. Selecione o Elemento de incorporação na tela para acessar as configurações.
4. Altere o Tipo para HTML.
5. Cole o snippet < div > do código de incorporação da ElevenLabs no campo HTML.
6. Posicione e dimensione o Elemento de incorporação na tela conforme necessário.

Etapa 4: publique e teste

1. Clique em Publicar para colocar suas alterações no ar.
2. Abra seu site em um navegador para verificar se o widget aparece e funciona corretamente.
3. • Observação: o código personalizado não aparece no modo Preview do Framer — é preciso publicar o site para visualizá-lo.

Problemas comuns e soluções

Se você está com dificuldade para fazer a integração funcionar, não se preocupe — confira as dicas de solução de problemas abaixo. 

Problema 1: o widget não aparece

• Causa: snippet < script > ou < div > ausente ou inserido no local errado.
• Solução: verifique se o snippet < script > foi adicionado ao campo End of < body > tag nas Configurações do site e se o snippet < div > está no Elemento de incorporação.

Problema 2: o widget aparece apenas parcialmente

• Causa: o tamanho ou o posicionamento do Elemento de incorporação está incorreto.
• Solução: ajuste as dimensões e o alinhamento do Elemento de incorporação no Editor do Framer.

Problema 3: erros de script

• Causa: scripts conflitantes ou recursos externos bloqueados.
• Solução: abra o console do navegador para verificar se há erros de JavaScript. Confirme que o Framer tem permissão para carregar scripts externos.

Dicas avançadas

Quer opções de personalização mais avançadas? Estas dicas podem ajudar. 

• Personalizar o widget: use CSS personalizado para estilizar o widget e integrá-lo perfeitamente ao design do seu site.
• Testar em diferentes dispositivos: as ferramentas de design responsivo do Framer facilitam testar o widget nas visualizações para celular, tablet e desktop, garantindo o dimensionamento adequado.
• Adicionar widgets a páginas específicas: para incluir o widget somente em páginas específicas, adicione o snippet < div > a um Elemento de incorporação nas páginas desejadas e verifique se o snippet < script > está presente nas Configurações do site.

Considerações finais 

Seguindo este guia, você pode aprimorar seu site no Framer com interações dinâmicas conduzidas por IA, adaptadas às necessidades do seu público. Publique suas alterações, teste sua configuração e deixe sua IA conversacional começar a interagir com visitantes hoje mesmo. Para mais ajuda, entre em contato com o suporte da ElevenLabs.

Crie sua conta para usar Agentes de Voz IA e comece hoje mesmo.