Documentação

Framer

Adicione seu agente a um site Framer usando Custom Code.

Adicione seu agente de IA a um site Framer via Código personalizado. O snippet carrega em todas as páginas depois de publicado.

Primeiro, obtenha seu código de incorporação em Chatbot > Publicar no painel.

Configuração Rápida

  1. Abra seu projeto no Framer.
  2. Na barra lateral esquerda, clique em Configurações do projeto (o ícone de engrenagem).
  3. Selecione a aba Código personalizado.
  4. Clique em + Adicionar script.
  5. Dê ao script um nome reconhecível (ex.: Agentkit Widget).
  6. Cole seu código de incorporação no corpo do script.
  7. No local, escolha Final da tag <body> (Body End) — essa é a opção recomendada para widgets de chat.
  8. Escolha carregar em Todas as páginas.
  9. Clique em Salvar.
  10. Clique em Publicar no canto superior direito para colocar a atualização no ar.

Formato de exemplo (use os valores reais de Chatbot > Publicar):

<script
  src="YOUR_WIDGET_URL"
  data-chatbot="YOUR_CHATBOT_ID"
  async
></script>

Por que o final do <body>, e não o Head

O Framer separa o Custom Code em Head Code e End of <body> Code. Widgets de chat devem ir no final do <body> para não atrasarem a primeira renderização da página — isso também corresponde ao atributo async no script.

O Head Code é reservado para coisas que precisam ser executadas muito precocemente, como pixels de analytics ou pré-carregamento de fontes.

Instalação Específica por Página

Para carregar o widget apenas em páginas específicas:

  1. Selecione uma página no painel de camadas do Framer.
  2. Abra Configurações da página (painel do lado direito).
  3. Adicione o Custom Code lá em vez de nas Project Settings.

O código no nível da página é executado apenas nessa página específica.

Planos e Domínios

  • O Custom Code está disponível em sites Framer, mas executá-lo em um domínio personalizado (não *.framer.website) normalmente exige um plano pago.
  • O widget funciona na URL padrão *.framer.website se o seu plano permitir Custom Code nela.

Depois de Publicar

O Custom Code do Framer não é executado dentro do editor ou da pré-visualização — apenas no site publicado. Depois de clicar em Salvar, clique em Publicar e então abra a URL no ar.

Solução de Problemas

O widget não aparece na pré-visualização do editor.

  • Esperado. O Custom Code só é executado no site publicado.

O widget também não aparece no site publicado.

  • Confirme que você clicou tanto em Salvar quanto em Publicar.
  • Confirme que seu domínio está permitido em Chatbot > Publicar > Segurança.
  • Force a atualização (⌘+Shift+R) para contornar o cache da CDN.

O widget aparece e depois desaparece.

  • Verifique se há transições de página ou animações do Framer que possam recarregar o DOM. O widget deve ser remontado a cada carregamento de página — se isso não acontecer, contate o suporte.

Testes

  1. Abra a URL publicada em uma janela anônima.
  2. Procure pelo balão de chat.
  3. Clique para abrir e envie uma mensagem de teste.

Próximos Passos