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

Quer melhorar a experiência dos seus clientes? IA Conversacional pode ajudar. Ao adicionar a IA Conversacional da ElevenLabs ao seu site no Webflow, os visitantes podem ter conversas naturais como se estivessem realmente falando com alguém da sua equipe. 

Neste guia, vamos mostrar como adicionar o widget de IA Conversacional da ElevenLabs ao seu site no Webflow e integrá-lo usando HTML personalizado e JavaScript.

Antes de começar

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

1. Conta do Webflow: você precisa ter um Workspace Core, Growth, Agency ou Freelancer ativo, ou um Site Plan, para acessar o Embed Element.
2. Conta da ElevenLabs: configure seu agente de voz IA na ElevenLabs e copie o código de incorporação fornecido, que inclui snippets < script > e < div >.
3. Familiaridade com o Designer do Webflow: é útil ter noções básicas de como adicionar e editar Embed Elements no Webflow.

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. Copie o código de incorporação, que inclui:
4. • Um snippet < script > para carregar as funcionalidades do widget.
   • Um snippet < div > para definir onde o widget aparecerá na página.

Etapa 2: adicione o widget a uma página do Webflow

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

1. Abra seu projeto do Webflow no Designer.
2. Acesse a página em que você quer exibir o widget.
3. No painel Elements, arraste o Embed Element para o local desejado na página.
4. No editor de código do Embed Element, cole o snippet < div > do código de incorporação da ElevenLabs.
5. Clique em Save & Close para aplicar as alterações.

Observação: o Embed Element funciona como um espaço reservado para o widget no Designer. O widget só será exibido quando o site for publicado.

Etapa 3: adicione o script globalmente

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

1. Acesse o Dashboard do Webflow e abra as configurações do projeto.
2. Acesse a aba Custom Code.
3. Cole o snippet < script > na seção Footer Code. Assim, o script será carregado em todas as páginas que usam o widget.
4. Clique em Save Changes.

Etapa 4: publique e teste

1. Publique seu site no domínio de staging 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ódigos personalizados não são exibidos no Designer do Webflow. Você precisa publicar o site para ver o widget funcionando.

Problemas comuns e soluções

Está com dificuldade para configurar a integração? Não se preocupe — as dicas abaixo devem ajudar.

1. O widget não aparece

• Causa: snippets < script > ou < div > ausentes ou posicionados incorretamente.
• Solução: confirme que o snippet < script > está na seção Footer Code e que o snippet < div > está corretamente inserido em um Embed Element.

2. Widget desalinhado

• Causa: posicionamento ou estilo incorreto do Embed Element.
• Solução: use o Style Panel do Webflow para ajustar as dimensões e o alinhamento do Embed Element.

3. Erros

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

Dicas avançadas

Se você quer personalizar o widget, testá-lo em diferentes dispositivos ou reutilizá-lo em várias páginas, veja o que precisa saber.

• Personalização do widget: use o Style Panel do Webflow ou CSS personalizado para ajustar a aparência do widget, como tamanho, alinhamento ou cores.
• Testes em diferentes dispositivos: use as ferramentas de design responsivo do Webflow para garantir que o widget funcione perfeitamente em computadores, tablets e dispositivos móveis.
• Reutilização do widget: salve o Embed Element como um Component se pretende usar o widget em várias páginas. Isso mantém o estilo consistente e facilita o gerenciamento.

Considerações finais

Integrar o widget de IA Conversacional da ElevenLabs ao Webflow é simples, graças aos recursos Embed Element e Custom Code da plataforma. Seja para aumentar o engajamento em uma única página ou em todo o site, siga as etapas acima para começar.

Para mais ajuda, entre em contato com o suporte da ElevenLabs ou consulte os fóruns da comunidade do Webflow para receber mais orientações. 

Caso ainda não tenha feito isso, crie sua conta na ElevenLabs Plataforma de Agentes de IA hoje para iniciar o processo. 

Perguntas frequentes