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 atendimento ao cliente, a IA Conversacional pode ajudar. 

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

Antes de começar

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

1. Conta no Framer: acesso a um projeto do Framer que permita adicionar código personalizado (disponível em planos pagos).
2. Conta na ElevenLabs: configure seu agente de IA Conversacional e copie o código de incorporação (incluindo os trechos < 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 trecho < script > para carregar a funcionalidade do widget.
   • Um trecho < div > para definir onde o widget será exibido.

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 trecho < script > do código de incorporação da ElevenLabs no campo Fim da tag < body >.
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 exibir o widget.
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 trecho < 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 de Visualização do Framer — é necessário publicar o site para vê-lo.

Problemas comuns e soluções

Se estiver com dificuldades para fazer a integração funcionar, não se preocupe — confira estas dicas de solução de problemas. 

Problema 1: O widget não é exibido

• Causa: trecho < script > ou < div > ausente ou posicionado incorretamente.
• Solução: verifique se o trecho < script > foi adicionado ao campo Fim da tag < body > nas Configurações do Site e se o trecho < div > está no Elemento de Incorporação.

Problema 2: O widget aparece apenas parcialmente

• Causa: o Elemento de Incorporação está dimensionado ou posicionado incorretamente.
• 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. Verifique se 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. 

• Personalização do widget: use CSS personalizado para estilizar o widget e integrá-lo perfeitamente ao design do seu site.
• Teste em diferentes dispositivos: as ferramentas de design responsivo do Framer facilitam testar o widget nas visualizações para dispositivos móveis, tablets e desktops, garantindo o dimensionamento correto.
• Adição de widgets a páginas específicas: para incluir o widget somente em páginas específicas, adicione o trecho < div > a um Elemento de Incorporação nas páginas desejadas e verifique se o trecho < 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 as alterações, teste sua configuração e deixe sua IA Conversacional começar a interagir com os visitantes hoje mesmo. Para mais ajuda, entre em contato com o suporte da ElevenLabs.

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