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.

No Agentkit, abra Channels → Website embed → Chat widget, ative o canal e copie todo o código gerado. Ele contém um script de inicialização inline e outro que carrega o widget.

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. Para a primeira entrada, clique em Add Script; caso contrário, clique no ícone +.
  5. Dê ao script um nome reconhecível (ex.: Agentkit Widget).
  6. Cole os dois scripts gerados juntos no campo Custom Code. Mantenha o URL do script e o ID do agente exatamente como foram copiados.
  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.

Não use um exemplo com apenas um script nem digite o URL do widget manualmente. Depois de publicar, confirme no código-fonte da página que os dois elementos <script> gerados estão presentes. Em seguida, abra o widget e envie uma mensagem de teste. Guia do widget JavaScript →

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

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.
  • Confira as restrições de domínio para o domínio Framer publicado.
  • 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