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.

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.