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.