Como adicionar o widget de Conversational AI da ElevenLabs ao seu site Framer

O ElevenLabs Conversational AI widget permite que você melhore seu site Framer com conversas interativas impulsionadas por IA. Seja para aumentar o engajamento do cliente ou melhorar seu suporte ao cliente, o Conversational AI pode ajudar.

Neste guia, vamos orientá-lo nos passos para adicionar o widget ao seu site Framer. Você aprenderá a configurar widgets para o site inteiro ou para páginas específicas e a solucionar problemas comuns.

Antes de começar

Antes de começar, certifique-se de ter o seguinte:

1. Conta Framer: Acesso a um projeto Framer com a capacidade de adicionar código personalizado (disponível em planos pagos).
2. Conta ElevenLabs: Configure seu agente de Conversational AI e copie seu código de incorporação (incluindo os trechos < script > e < div >).
3. Familiaridade com Framer: Compreensão básica das Configurações do Site e Elementos de Incorporação do Framer

Guia passo a passo

Passo 1: Prepare seu widget ElevenLabs

1. Faça login na sua conta ElevenLabs.
2. Navegue até a seção de Conversational AI.
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 aparecerá.

Passo 2: Adicione o script às configurações do site do Framer

1. Abra seu projeto Framer.
2. No canto superior direito, clique em Configurações do Projeto.
3. Navegue até a aba Geral e role para baixo até a seção Código Personalizado.
4. Cole o trecho < script > do seu código de incorporação ElevenLabs no campo Fim da tag < body >.
5. Salve suas alterações. Este passo garante que o script necessário seja carregado para o seu site.

Passo 3: Adicione o widget a uma página específica

1. No seu projeto Framer, vá para a página onde você deseja 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 sua tela para acessar suas configurações.
4. Altere o Tipo para HTML.
5. Cole o trecho < div > do código de incorporação ElevenLabs no campo HTML.
6. Posicione e dimensione o Elemento de Incorporação na sua tela conforme necessário.

Passo 4: Publique e teste

1. Clique em Publicar para tornar suas alterações ao vivo.
2. Abra seu site em um navegador para verificar se o widget aparece e funciona corretamente.
3. • Nota: O código personalizado não será exibido no modo de Pré-visualização do Framer—ele deve ser publicado para ser visualizado.

Problemas comuns e solução de problemas

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

Problema 1: Widget não exibido

• Causa: Trecho < script > ou < div > ausente ou colocado incorretamente.
• Solução: Certifique-se de que o trecho < script > seja adicionado ao campo Fim da tag < body > nas Configurações do Site e o trecho < div > esteja no Elemento de Incorporação.

Problema 2: Widget visível apenas parcialmente

• Causa: Elemento de Incorporação dimensionado ou posicionado incorretamente.
• Solução: Ajuste as dimensões e o alinhamento do Elemento de Incorporação no Editor Framer.

Problema 3: Erros de script

• Causa: Scripts conflitantes ou recursos externos bloqueados.
• Solução: Abra o console do navegador para verificar erros de JavaScript. Certifique-se de que o Framer tem permissões para carregar scripts externos.

Dicas avançadas

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

• Personalizando o widget: Use CSS personalizado para estilizar o widget e integrá-lo perfeitamente ao design do seu site.
• Testando em diferentes dispositivos: As ferramentas de design responsivo do Framer facilitam o teste do widget em visualizações de celular, tablet e desktop para garantir o dimensionamento adequado.
• Adicionando widgets a páginas específicas: Para incluir o widget apenas em páginas específicas, adicione o trecho < div > a um Elemento de Incorporação nas páginas desejadas e certifique-se de que o trecho < script > esteja presente nas Configurações do Site.

Considerações finais

Seguindo este guia, você pode melhorar seu site Framer com interações dinâmicas impulsionadas por IA, adaptadas às necessidades do seu público. Publique suas alterações, teste sua configuração e deixe seu Conversational AI começar a interagir com os visitantes hoje. Para mais assistência, entre em contato com o suporte da ElevenLabssuporte.

Inscreva-se para o Conversational AI hoje mesmo para começar.