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

Quer melhorar seu atendimento ao cliente e o engajamento adicionando a IA Conversacional da ElevenLabs ao seu site Wix? Você está no lugar certo. Este guia mostra todo o processo passo a passo e ajuda você a evitar problemas comuns.

Antes de começar

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

1. Conta Wix Premium: a incorporação de JavaScript personalizado está disponível apenas nos planos Premium.
2. Conta ElevenLabs: você precisa de uma conta ElevenLabs para criar agentes de voz com IA. Crie sua conta aqui.
3. Acesso ao Editor Wix com o Modo de Desenvolvedor ativado: você precisará do Modo de Desenvolvedor para adicionar código personalizado ao seu site.

Guia passo a passo

Etapa 1: prepare seu widget da ElevenLabs

1. Entre na sua conta ElevenLabs.
2. Acesse a seção de IA Conversacional.
3. Configure seu agente conversacional e copie o código de incorporação JavaScript fornecido.

Etapa 2: ative o Modo de Desenvolvedor no Wix

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

Observação: se o Modo de Desenvolvedor não estiver visível, confira se você está usando o Editor Wix completo, e não o Wix ADI (Inteligência de Design Artificial).

Etapa 3: adicione o código de incorporação JavaScript

1. No Editor Wix, acesse Configurações > Código personalizado.
2. Clique em + Adicionar código personalizado.
3. Cole o código JavaScript da ElevenLabs no campo fornecido.
4. Em Aplicar código a, 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

Teve algum problema ao adicionar um widget de IA Conversacional ao seu site Wix? Siga estas etapas simples para resolvê-lo.

Problema 1: o widget desconecta ou não carrega

• Causa: configuração incorreta da lista de permissões ou uso de um plano Wix gratuito.
• Solução: confira se a URL do seu site foi removida da lista de permissões ou está configurada corretamente no painel da ElevenLabs.

Problema 2: o JavaScript não funciona

• Causa: o código JavaScript não foi adicionado corretamente.
• Solução: verifique novamente se o JavaScript foi colado no campo correto em Código personalizado.

Problema 3: plano Wix gratuito

• Causa: a incorporação de JavaScript personalizado não é compatível com os planos Wix gratuitos.
• Solução: faça upgrade para um plano Wix Premium.

Dicas avançadas

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

Ajustando a lista de permissões

Se o widget ainda não funcionar após incorporar o código, siga estas etapas:

1. Entre na sua conta ElevenLabs.
2. Acesse as configurações da lista de permissões do seu agente de IA Conversacional.
3. Confirme se o domínio do seu site foi adicionado corretamente. Se o problema persistir, tente remover o domínio da lista de permissões e faça um novo teste.

Testes em um domínio ativo

O widget pode não funcionar corretamente no modo de visualização do Wix. Publique seu site e teste-o no domínio ativo para confirmar que funciona como esperado.

Testes de compatibilidade entre navegadores

Quando seu widget estiver ativo, teste-o em vários navegadores, como Chrome, Firefox, Edge e Safari. Alguns recursos podem se comportar de forma diferente entre os navegadores devido a variações na forma como o JavaScript é processado.

1. Abra seu site em cada navegador.
2. Interaja com o widget e verifique se ele responde adequadamente.
3. Procure problemas como estilos quebrados ou erros de funcionamento. Se houver problemas, revise seu código JavaScript ou entre em contato com o suporte da ElevenLabs para receber orientação.

Responsividade em dispositivos móveis

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

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

Dicas para depurar JavaScript

Se o 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 (recomendamos o Chrome).
2. Clique com o botão direito em qualquer lugar da página e selecione Inspecionar para abrir o DevTools.
3. Acesse a aba Console e procure mensagens de erro relacionadas ao widget.
4. Se encontrar erros, confira o código de incorporação JavaScript e verifique se todas as URLs necessárias foram adicionadas à lista de permissões. Esse método também pode destacar dependências ausentes ou outros problemas que impedem o widget de funcionar corretamente.

Considerações finais

Integrar o widget de IA Conversacional da ElevenLabs ao Wix exige uma configuração cuidadosa, mas, com as etapas certas, você pode colocá-lo em funcionamento rapidamente. Confirme que você tem um plano Wix Premium, siga as etapas acima e resolva os problemas comuns quando necessário. Se encontrar outros problemas, entre em contato com o suporte da ElevenLabs para receber ajuda.

Ou, se ainda não fez isso, crie sua conta na plataforma de Agentes de IA hoje.