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

Quer melhorar seu suporte ao cliente e engajamento adicionando o Conversational AI da ElevenLabs ao seu site Wix. Você está no lugar certo. Este guia te orienta por todo o processo passo a passo, ajudando a evitar erros comuns.

Antes de começar

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

1. Conta premium do Wix: Incorporar JavaScript personalizado está disponível apenas em planos Premium.
2. Conta ElevenLabs: Você precisa de uma conta ElevenLabs para criar agentes de Conversational AI. Cadastre-se aqui.
3. Acesso ao Editor Wix com o Modo Dev ativado: Você precisará do Modo Dev para adicionar código personalizado ao seu site.

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. Configure seu agente conversacional e copie o código JavaScript fornecido.

Passo 2: Ative o Modo Dev no Wix

1. Abra seu site Wix no Editor.
2. Clique em Modo Dev no menu superior para habilitar recursos avançados como adicionar código personalizado.

Nota: Se o Modo Dev não estiver visível, certifique-se de estar usando o Editor completo do Wix, não o Wix ADI (Inteligência Artificial de Design).

Passo 3: Adicione o código JavaScript

1. Vá para Configurações > Código Personalizado no Editor Wix.
2. Clique em + Adicionar Código Personalizado.
3. Cole o código JavaScript da ElevenLabs no campo fornecido.
4. Em Aplicar Código Para, selecione Todas as Páginas (ou escolha uma página específica para o widget).
5. Salve e publique suas alterações.

Problemas comuns e solução de problemas

Encontrou um problema ao adicionar um widget de Conversational AI ao seu site Wix? Siga estes passos simples para resolver seu problema.

Problema 1: Widget desconecta ou não carrega

• Causa: Configuração de Allowlist incorreta ou uso de um plano gratuito do Wix.
• Solução: Certifique-se de que a URL do seu site foi removida da Allowlist ou configurada corretamente no painel da ElevenLabs.

Problema 2: JavaScript não funciona

• Causa: Código JavaScript não adicionado corretamente.
• Solução: Verifique se o JavaScript foi colado no campo correto em Código Personalizado.

Problema 3: Plano gratuito do Wix

• Causa: Incorporar JavaScript personalizado não é suportado em planos gratuitos do Wix.
• Solução: Faça upgrade para um plano Premium do Wix.

Dicas avançadas

Se você quer criar a melhor experiência possível para os visitantes do seu site, confira estas práticas avançadas recomendadas.

Ajustando a allowlist

Se o seu widget ainda não funcionar após incorporar o código, siga estes passos:

1. Faça login na sua conta ElevenLabs.
2. Vá para as configurações de Allowlist do seu agente de Conversational AI.
3. Certifique-se de que o domínio do seu site está adicionado corretamente. Se os problemas persistirem, tente remover seu domínio da Allowlist e testar novamente.

Testando em um domínio ao vivo

O widget pode não funcionar corretamente no modo de visualização do Wix. Publique seu site e teste no domínio ao vivo para garantir que funcione como esperado.

Teste de compatibilidade entre navegadores

Uma vez que seu widget esteja ao vivo, teste em vários navegadores, como Chrome, Firefox, Edge e Safari. Algumas funcionalidades podem se comportar de forma diferente entre navegadores devido a variações no tratamento do JavaScript.

1. Abra seu site em cada navegador.
2. Interaja com o widget e verifique sua responsividade.
3. Procure por problemas como estilo quebrado ou erros de funcionalidade. Se surgirem problemas, reveja seu código JavaScript ou entre em contato com o suporte da ElevenLabs para orientação.

Responsividade móvel

Verifique se o widget funciona perfeitamente em dispositivos móveis, já que muitos usuários acessam sites por smartphones ou tablets.

1. Use o Editor Móvel do Wix para visualizar o layout móvel do seu site.
2. Teste o widget em dispositivos físicos para confirmar sua funcionalidade e facilidade de uso.
3. Verifique se há elementos sobrepostos ou problemas de formatação. Se ajustes forem necessários, use as ferramentas de design móvel do Wix para otimizar o posicionamento e o tamanho.

Dicas de depuração de JavaScript

Se o seu widget não estiver funcionando como esperado, as ferramentas de desenvolvedor do navegador podem ajudar a identificar problemas.

1. Abra seu site em um navegador (recomendado Chrome).
2. Clique com o botão direito em qualquer lugar da página e selecione Inspecionar para abrir o DevTools.
3. Vá para a aba Console e procure por mensagens de erro relacionadas ao widget.
4. Se você vir erros, verifique o código JavaScript incorporado e certifique-se de que todas as URLs necessárias estão adicionadas à Allowlist. Este método também pode destacar dependências ausentes ou outros problemas que impedem o funcionamento correto do widget.

Considerações finais

Integrar o widget de Conversational AI da ElevenLabs no Wix requer uma configuração cuidadosa, mas com os passos certos, você pode colocá-lo em funcionamento rapidamente. Certifique-se de ter um plano Premium do Wix, siga os passos acima e resolva problemas comuns conforme necessário. Se encontrar mais problemas, entre em contato com o suporte da ElevenLabs para assistência.

Ou, se ainda não fez, cadastre-se para o Conversational AI hoje.