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

Quer melhorar a experiência do cliente? Conversational AI pode ajudar. Ao adicionar o Conversational AI da ElevenLabs ao seu site Webflow, os visitantes podem ter conversas naturais como se estivessem realmente falando com um membro da sua equipe.

Neste guia, vamos orientá-lo no processo de adicionar o widget de Conversational AI da ElevenLabs ao seu site Webflow, integrando o widget usando HTML e JavaScript personalizados.

Antes de começar

Antes de iniciar, certifique-se de ter o seguinte:

1. Conta Webflow: Você precisa de um Workspace ativo Core, Growth, Agency ou Freelancer, ou um Site Plan, para acessar o Elemento Embed.
2. Conta ElevenLabs: Configure seu agente de Conversational AI na ElevenLabs e copie o código de incorporação fornecido (que inclui trechos de < script > e < div >).
3. Familiaridade com o Designer do Webflow: Compreensão básica de como adicionar e editar Elementos Embed no Webflow é útil.

Guia passo a passo

Passo 1: Prepare seu widget ElevenLabs

1. Faça login na sua conta ElevenLabs.
2. Vá para a seção de Conversational AI.
3. Copie o código de incorporação, que inclui:
4. • Um trecho de < script > para carregar a funcionalidade do widget.
   • Um trecho de < div > para definir onde o widget aparecerá na página.

Passo 2: Adicione o widget a uma página do Webflow

Para exibir o widget em uma página específica, use o Elemento Embed.

1. Abra seu projeto Webflow no Designer.
2. Navegue até a página onde você quer que o widget apareça.
3. No Painel de Elementos, arraste o Elemento Embed para o local desejado na página.
4. No editor de código do Elemento Embed, cole o trecho de < div > do código de incorporação da ElevenLabs.
5. Clique em Salvar & Fechar para aplicar as mudanças.

Nota: O Elemento Embed atua como um espaço reservado para seu widget no Designer. O widget real só será renderizado quando o site for publicado.

Passo 3: Adicione o script globalmente

Para garantir que o widget funcione corretamente, você precisa incluir o trecho de < script > globalmente no seu site.

1. Vá para o Dashboard do Webflow e abra as Configurações do Projeto.
2. Navegue até a aba Código Personalizado.
3. Cole o trecho de < script > na seção Código do Rodapé. Isso garante que o script seja carregado em todas as páginas onde o widget é usado.
4. Clique em Salvar Alterações.

Passo 4: Publique e teste

1. Publique seu site no domínio de teste do Webflow ou no seu domínio personalizado.
2. Abra seu site em um navegador para verificar se o widget aparece e funciona como esperado.

Importante: Código personalizado não é renderizado no Designer do Webflow. Você deve publicar seu site para ver o widget ao vivo.

Problemas comuns e solução de problemas

Está tendo dificuldades para configurar a integração? Não se preocupe—essas dicas abaixo devem ajudar.

1. Widget não exibido

• Causa: Trechos de < script > ou < div > ausentes ou mal posicionados.
• Solução: Certifique-se de que o trecho de < script > está na seção Código do Rodapé, e o trecho de < div > está corretamente colocado em um Elemento Embed.

2. Desalinhamento do widget

• Causa: Colocação ou estilo incorreto do Elemento Embed.
• Solução: Use o Painel de Estilo do Webflow para ajustar as dimensões e o alinhamento do Elemento Embed.

3. Erros

• Causa: Conflitos com outros scripts ou restrições do navegador.
• Solução: Use o console do desenvolvedor do navegador para identificar e corrigir erros de JavaScript.

Dicas avançadas

Se você deseja personalizar o widget, testar em diferentes dispositivos ou reutilizar o widget em várias páginas, aqui está o que você precisa saber.

• Personalizando o widget: Use o Painel de Estilo do Webflow ou CSS personalizado para ajustar a aparência do widget, como tamanho, alinhamento ou cores.
• Testando em diferentes dispositivos: Use as ferramentas de design responsivo do Webflow para garantir que o widget funcione perfeitamente em dispositivos desktop, tablet e móvel.
• Reutilizando o widget: Salve o Elemento Embed como um Componente se você planeja usar o widget em várias páginas. Isso permite um estilo consistente e gerenciamento mais fácil.

Considerações finais

Integrar o widget de Conversational AI da ElevenLabs no Webflow é simples, graças aos recursos de Elemento Embed e Código Personalizado da plataforma. Se você deseja aumentar o engajamento em uma única página ou em todo o seu site, siga os passos acima para começar.

Para mais assistência, não hesite em entrar em contato com o suporte da ElevenLabs ou explore os fóruns da comunidade Webflow para obter orientações adicionais.

Se você ainda não fez isso, inscreva-se na ElevenLabs hoje para iniciar o processo.

Perguntas Frequentes