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

A IA Conversacional da ElevenLabs é uma poderosa ferramenta de atendimento ao cliente para criar experiências interativas com IA que aumentam o engajamento. Se você tem um site em WordPress, pode integrar facilmente HTML e JavaScript personalizados, incluindo recursos dinâmicos como a IA Conversacional da ElevenLabs.

Neste guia, mostraremos como adicionar o widget de IA Conversacional ao seu site WordPress usando blocos de HTML personalizado em páginas específicas e injeção de código para funcionalidades globais.

Antes de começar

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

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

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. Configure seu agente de IA e copie o código de incorporação, que inclui:
4. • Um trecho < script > para carregar as funcionalidades do widget.
   • Um trecho < div > para definir onde o widget aparecerá.

Etapa 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. Entre no painel do WordPress.
2. Acesse Páginas e crie uma nova página ou edite uma existente.
3. Clique no ícone + para adicionar um novo bloco.
4. Pesquise e selecione HTML personalizado nas opções de bloco.
5. Cole no bloco o trecho < div > do código de incorporação da ElevenLabs.
6. Clique em Visualizar para confirmar que o widget está sendo exibido corretamente.
7. Publique ou atualize a página para aplicar as alterações.

Etapa 3: adicione o script globalmente usando um plugin ou as configurações do tema

Para garantir que o widget funcione corretamente, inclua o trecho < script > globalmente.

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

1. Instale e ative um plugin como o Header Footer Code Manager.
2. Acesse as configurações do plugin e crie um novo trecho de código.
3. Cole o trecho < script > na seção Footer.
4. Configure o trecho para ser executado em todas as páginas.
5. Salve as alterações.

Opção B: adicionar o script diretamente ao tema

1. No painel do WordPress, acesse Aparência > Editor de temas.
2. Abra o arquivo footer.php do seu tema ativo.
3. Cole o trecho < script > logo antes da tag de fechamento < /body >.
4. Salve o arquivo.

Etapa 4: publique e teste

1. Acesse a página em que 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 ele funcione sem problemas.

Problemas comuns e solução de problemas

Está com dificuldade para fazer o widget funcionar? Estas dicas podem ajudar. 

Problema 1: widget não é exibido

• Causa: trechos < script > ou < div > ausentes ou posicionados incorretamente.
• Solução: confira se o < script > foi adicionado globalmente e se o < div > está posicionado na página.

Problema 2: widget desalinhado

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

Problema 3: conflitos entre 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 ter mais ajuda e fazer o widget funcionar como você deseja. 

• Personalização do widget: use a seção Personalizar > CSS adicional do WordPress para estilizar o widget e garantir que ele combine com o design do seu site.
• Testes em vários dispositivos: teste o widget em computadores, tablets e dispositivos móveis para garantir uma experiência consistente para o usuário.
• Widgets específicos por página: se você quiser que o widget apareça apenas em páginas específicas, evite adicionar o trecho < script > globalmente. Em vez disso, inclua-o em um plugin ou bloco direcionado a essas páginas.

Considerações finais

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

Siga as etapas descritas aqui, teste sua implementação cuidadosamente e faça os ajustes necessários. Se encontrar problemas, não hesite em entrar em contato com o suporte da ElevenLabs para receber ajuda.

Ou, caso ainda não tenha feito isso, crie uma conta na Plataforma de Agentes da ElevenLabs hoje e dê início ao processo.