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

ElevenLabs’ Conversational AI é uma poderosa ferramenta de suporte ao cliente para criar experiências interativas impulsionadas por IA que aumentam o engajamento. Se você tem um site WordPress, pode facilmente integrar HTML e JavaScript personalizados, incluindo recursos dinâmicos como o Conversational AI da ElevenLabs.

Neste guia, vamos mostrar como adicionar o widget de Conversational AI ao seu site WordPress usando Blocos de HTML Personalizado para páginas específicas e Injeção de Código para funcionalidade global.

Conversational AI

Adicione voz aos seus agentes na web, mobile ou telefonia em minutos. Nossa API em tempo real oferece baixa latência, total configurabilidade e escalabilidade perfeita.

Antes de começar

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

1. Plano WordPress: Para usuários do WordPress.com, é necessário um plano Business ou Commerce para adicionar JavaScript personalizado. Usuários de WordPress auto-hospedado podem adicionar código sem essas restrições.
2. Conta ElevenLabs: Configure seu agente de voz IA na ElevenLabs e copie o código de incorporação, que inclui trechos de < script > e < div >.
3. Conhecimento básico de WordPress: Familiaridade com a adição de blocos, edição de páginas ou uso de plugins é ú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. Configure seu agente de IA e 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á.

Passo 2: Adicione o widget a uma página específica usando blocos de HTML Personalizado

Para exibir o widget em uma página específica, use o Bloco de HTML Personalizado do WordPress.

1. Faça login no painel do WordPress.
2. Navegue até Páginas e crie uma nova página ou edite uma existente.
3. Clique no ícone + para adicionar um novo bloco.
4. Procure e selecione HTML Personalizado nas opções de bloco.
5. Cole o trecho de < div > do seu código de incorporação da ElevenLabs no bloco.
6. Clique em Visualizar para confirmar que o widget está sendo exibido corretamente.
7. Publique ou atualize a página para tornar as alterações visíveis.

Passo 3: Adicione o script globalmente usando um plugin ou configurações de tema

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

Opção A: Usando um plugin (recomendado para não desenvolvedores)

1. Instale e ative um plugin como Header Footer Code Manager.
2. Navegue até as configurações do plugin e crie um novo trecho de código.
3. Cole o trecho de < script > na seção de Rodapé.
4. Defina o trecho para rodar em Todas as Páginas.
5. Salve suas alterações.

Opção B: Adicionando o script diretamente ao seu tema

1. Vá para Aparência > Editor de Tema no painel do WordPress.
2. Abra o arquivo footer.php do seu tema ativo.
3. Cole o trecho de < script > logo antes da tag de fechamento < /body >.
4. Salve o arquivo.

Passo 4: Publique e teste

1. Visite a página onde você adicionou o widget para confirmar que ele aparece e funciona corretamente.
2. Teste o widget em vários dispositivos e navegadores para garantir que funcione perfeitamente.

Problemas comuns e soluções

Está tendo dificuldades para fazer o widget funcionar? Estas dicas podem ajudar.

Problema 1: Widget não exibido

• Causa: Trechos de < script > ou < div > ausentes ou mal posicionados.
• Solução: Verifique se o < script > está adicionado globalmente e o < div > está colocado na página.

Problema 2: Widget desalinhado

• Causa: Alinhamento de bloco ou estilo ausente.
• Solução: Use as ferramentas de alinhamento de bloco do WordPress ou adicione CSS personalizado para posicionar o widget corretamente.

Problema 3: Conflitos de plugins

• Causa: Outros plugins interferindo na execução do JavaScript.
• Solução: Desative os plugins um por um para identificar o conflito.

Dicas avançadas

Confira estas dicas para mais ajuda em fazer o widget operar como você deseja. 

• Personalizando o widget: Use a seção Personalizar > CSS Adicional do WordPress para estilizar o widget, garantindo que ele combine com o design do seu site.
• Testando em vários dispositivos: Teste o widget em dispositivos desktop, tablet e mobile para garantir uma experiência consistente ao usuário.
• Widgets específicos para páginas: Se você deseja que o widget apareça apenas em páginas específicas, evite adicionar o trecho de < script > globalmente. Em vez disso, inclua-o em um plugin ou bloco que direcione essas páginas.

Considerações finais

Adicionar o widget de Conversational AI da ElevenLabs ao seu site WordPress é uma maneira eficaz de engajar visitantes com interações impulsionadas por IA. Seja incorporando em uma única página ou em todo o seu site, o WordPress oferece as ferramentas necessárias para uma integração perfeita.

Siga os passos aqui descritos, teste sua implementação cuidadosamente e faça ajustes conforme necessário. Se encontrar problemas, não hesite em contatar o suporte da ElevenLabs para assistência.

Ou, se ainda não fez, inscreva-se para ElevenLabs