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

Quer aumentar o engajamento e oferecer um suporte ao cliente de alto nível no seu site Squarespace? O Conversational AI da ElevenLabs pode ajudar.

Este guia irá orientá-lo nas etapas para adicionar o widget ao seu site Squarespace, seja em uma página específica ou em todo o site. Também explicará problemas comuns que você pode encontrar e fornecerá dicas de solução para resolver esses obstáculos.

Antes de começar

Antes de iniciar, certifique-se de ter o seguinte:

1. Conta Squarespace: Acesso a um plano Business ou Commerce, pois esses planos permitem o uso de Code Blocks e Code Injection.
2. Conta ElevenLabs: Configure seu agente de Conversational AI na ElevenLabs e copie o código de incorporação (contendo os trechos < script > e < div >).
3. Familiaridade com Squarespace: Conhecimento básico sobre como adicionar blocos ou navegar nas configurações de Code Injection.

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 e configure seu agente IA.
3. Copie o código de incorporação fornecido, que consiste em:
4. • Um trecho < script > para carregar a funcionalidade do widget.
   • Um trecho < div > para especificar onde o widget aparecerá.

Passo 2: Adicione o widget usando um bloco de código

Se você quiser o widget em uma página ou post específico, use um bloco de código.

1. Navegue até a página ou post do Squarespace onde você deseja que o widget apareça.
2. Clique no símbolo + para adicionar um bloco.
3. Selecione Código no menu.
4. Cole o trecho < div > do código de incorporação da ElevenLabs no Bloco de Código.
5. Salve o bloco e certifique-se de que está posicionado corretamente na página.

Passo 3: Adicione o script usando Code Injection

Para garantir que o widget funcione corretamente, você precisa incluir o trecho < script > usando Code Injection.

1. No painel do Squarespace, vá para Configurações > Avançado > Code Injection.
2. Cole o trecho < script > na seção de Rodapé.
3. Salve suas alterações.

Nota: A seção de Rodapé garante que o script seja carregado em todas as páginas, habilitando a funcionalidade dos widgets adicionados via Code Blocks.

Passo 4: Publique e teste

1. Publique a página ou post onde o widget foi adicionado.
2. Abra seu site ao vivo para verificar se o widget aparece e funciona corretamente. Importante: O código personalizado muitas vezes não aparece na pré-visualização do editor do Squarespace—publique a página para testar a integração.

Problemas comuns e solução de problemas

Se você está tendo dificuldades para fazer a integração funcionar corretamente, não se preocupe—essas dicas devem ajudar.

Problema 1: Widget não exibido

• Causa: Trechos < script > ou < div > ausentes ou colocados incorretamente.
• Solução: Certifique-se de que o trecho < script > está na seção de Code Injection do Rodapé e o trecho
  está corretamente adicionado a um Bloco de Código.

Problema 2: Widget apenas parcialmente visível

• Causa: Tamanho do Bloco de Código ou conflitos de layout.
• Solução: Ajuste o tamanho e o alinhamento do bloco. Use CSS personalizado, se necessário, para um posicionamento preciso.

Problema 3: Erros de script

• Causa: Scripts conflitantes ou restrições do navegador.
• Solução: Use o console do navegador (por exemplo, Chrome DevTools) para identificar erros. Resolva conflitos de script ou verifique problemas de CORS.

Dicas avançadas

Procurando opções de personalização mais avançadas? Confira as dicas abaixo.

• Personalizando o widget: Use CSS personalizado na seção Design > CSS Personalizado do Squarespace para estilizar o widget. Ajuste cores, fontes ou posicionamento para alinhar com o design do seu site.
• Testando em diferentes dispositivos: Teste seu site em diferentes dispositivos (desktop, tablet e celular) para garantir que o widget se ajuste e funcione corretamente em todos os tamanhos de tela.
• Adicionando widgets a várias páginas: Para incluir o widget em várias páginas, repita o processo de Bloco de Código para cada página e certifique-se de que o script está ativo no Rodapé do Code Injection.

Considerações finais

Adicionar o widget de Conversational AI da ElevenLabs ao seu site Squarespace é uma maneira simples de aumentar a interatividade e o engajamento. Seja incorporando em uma única página ou em todo o site, os recursos de Code Blocks e Code Injection do Squarespace tornam a integração fácil.

Siga este guia passo a passo, teste sua configuração cuidadosamente e aproveite os benefícios do Conversational AI no seu site. Para mais assistência, entre em contato com o suporte da ElevenLabs.

Ou, se ainda não fez isso, inscreva-se para o Conversational AI hoje.