Apresentando o Eleven v3 (alpha)

Experimente o v3

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

Aprenda a adicionar capacidades de Conversational AI ao seu site WordPress.

A speech bubble with a circuit board pattern inside.

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.

Flowchart diagram with black and white nodes labeled "USER," "SPEECH TO TEXT," "TEXT TO SPEECH," "AGENT," "LLM," "MONITORING," and "FUNCTION CALLING" connected by curved lines on a blue gradient background.

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 Conversational AI 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:
    • 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 na ElevenLabs hoje para iniciar o processo.

Não, familiaridade básica com a adição de blocos HTML ou uso de plugins é suficiente. Edições avançadas podem exigir conhecimento mínimo de programação.

Não, planos gratuitos do WordPress.com não suportam JavaScript ou código personalizado. Faça upgrade para um plano Business ou Commerce ou use WordPress auto-hospedado.

Certifique-se de que o trecho