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

Quer levar seu site Ghost para o próximo nível? O Conversational AI da ElevenLabs transforma o engajamento do cliente. Ao adicionar o Conversational AI da ElevenLabs à sua plataforma Ghost, você pode oferecer suporte ao cliente interativo e realista que aproxima seu público da sua marca.

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 iniciar, certifique-se de ter o seguinte:

1. Um site Ghost: Você precisa de um plano pago ou uma instância Ghost auto-hospedada. JavaScript personalizado não é suportado no plano gratuito do Ghost.
2. Acesso ao painel de administração do Ghost: Você precisará de acesso às configurações de Code Injection ou ao Editor.
3. Uma conta ElevenLabs: Configure um agente de Conversational AI e copie seu código de incorporação JavaScript.

Guia passo a passo

Opção 1: Adicionando o widget globalmente usando Code Injection

Se você deseja que o widget apareça em todas as páginas do seu site, use o recurso de Code Injection do Ghost.

Passo 1: Prepare seu widget

1. Faça login na sua conta ElevenLabs.
2. Navegue até a seção de Conversational AI e configure seu agente.
3. Copie o código de incorporação JavaScript fornecido.

Passo 2: Acesse as configurações de Code Injection

1. Faça login no seu Painel de Administração do Ghost.
2. Navegue até Configurações > Code Injection.

Passo 3: Incorpore o código JavaScript

1. Cole o código JavaScript copiado no campo Site Footer.
2. Salve suas alterações.

Passo 4: Teste a integração

1. Abra seu site Ghost para garantir que o widget apareça e funcione como esperado.
2. Se não aparecer, verifique novamente a colocação do código e sua configuração na ElevenLabs.

Opção 2: Adicionando o widget a páginas ou posts específicos usando o sinal de mais

Se preferir que o widget apareça apenas em certas páginas ou posts, você pode incorporá-lo diretamente no conteúdo usando o sinal de mais no Editor do Ghost.

Passo 1: Prepare seu widget

1. Copie o código de incorporação JavaScript da sua conta ElevenLabs.

Passo 2: Edite um post ou página no Ghost

1. Abra o Editor do Ghost para a página ou post onde deseja adicionar o widget.
2. Clique no sinal de mais (+) para abrir o menu de blocos.

Passo 3: Insira um Bloco HTML

1. Selecione HTML nas opções de bloco.
2. Cole o código JavaScript no bloco HTML.

Passo 4: Publique e teste

1. Salve e publique a página ou post.
2. Abra a página para confirmar que o widget é exibido e funciona como esperado.

Problemas comuns e solução de problemas

A integração não está funcionando como esperado? Siga os passos abaixo para resolver os problemas que você está enfrentando.

Problema 1: Widget não carrega

• Causa: O código JavaScript foi adicionado incorretamente ou está incompleto.
• Solução: Verifique novamente a colocação do código e confirme que seu agente ElevenLabs está configurado corretamente.

Problema 2: Conflitos de script

• Causa: Outros scripts personalizados nas configurações de Code Injection podem estar em conflito com o widget.
• Solução: Desative temporariamente outros scripts para testar conflitos. Re-adicione-os um por um para identificar o problema.

Dicas avançadas

Procurando mais maneiras de personalizar o widget? Confira as dicas abaixo para obter ajuda.

• Personalizando a colocação do widget: Use CSS para ajustar a aparência ou posição do widget quando adicionado por Code Injection ou bloco HTML. Se quiser que o widget apareça em um local consistente (por exemplo, rodapé ou barra lateral), edite os arquivos de tema do Ghost. Adicione o código de incorporação JavaScript ao arquivo default.hbs e reenvie seu tema.
• Responsividade móvel: Teste o widget em dispositivos móveis para garantir que ele se ajuste e funcione corretamente. Use a visualização responsiva do Ghost ou teste diretamente em dispositivos físicos.
• Teste em vários navegadores: Verifique se o widget funciona em navegadores populares, incluindo Chrome, Firefox, Safari e Edge, para garantir consistência para todos os usuários.
• Depuração de problemas JavaScript: Use as ferramentas de desenvolvedor do navegador (por exemplo, Chrome DevTools) para inspecionar erros no Console. Corrija problemas como dependências ausentes ou conflitos de script.

Considerações finais

Integrar o widget de Conversational AI da ElevenLabs no Ghost é simples e flexível, permitindo que você melhore a interatividade do seu site com mínimo esforço. Se encontrar problemas, reveja os passos, teste cuidadosamente ou entre em contato com o suporte da ElevenLabs, se necessário.

Inscreva-se para o Conversational AI hoje mesmo para começar.