Webflow
Visão Geral:
O Webflow oferece uma arquitetura de código customizado em camadas, que reflete uma abordagem focada em desenvolvedores, mas que é perfeitamente acessível para usuários no-code. É possível injetar código em três níveis de granularidade: global (para todo o site), por página e em um elemento específico. Essa abordagem oferece um controle preciso sobre onde e como o script é carregado.
Método 1: Instalação Global no Site (Project Settings)
Ideal para scripts de Agente que devem aparecer em todas as páginas para uma experiência de usuário consistente.
Acessar as Configurações de Código Customizado: No painel de controle do seu projeto Webflow, navegue até a aba Settings (Configurações) e selecione Custom Code (Código Customizado) no menu lateral.13
Inserir o Snippet no "Footer Code": Recomenda-se colar o snippet na seção Footer Code, também conhecida como Before </body> tag.13 Esta prática é uma otimização de desempenho, pois o script do Agente será carregado após o conteúdo principal da página ter sido renderizado, garantindo que o carregamento da página não seja atrasado.
Salvar e Publicar: Clique em Save Changes e, em seguida, publique o seu site.
Método 2: Instalação em Página Específica (Page Settings)
Para incluir o Agente em uma única página do site.
Acessar as Configurações da Página: No Webflow Designer, clique no ícone de páginas e selecione as configurações da página desejada.
Inserir o Snippet: Role para baixo até a seção Custom Code e cole o snippet do Aiblue na caixa de texto Before </body> tag.13
Salvar e Publicar: Salve as alterações e publique o site.
Método 3: Instalação em Elemento Específico (Code Embed Element)
Para incluir o Agente em uma seção específica da página, como o rodapé.
Adicionar o Elemento "Code Embed": No painel Add (Adicionar) do Designer, arraste e solte o elemento Code Embed na sua página.16
Colar o Código: Dê um duplo clique no elemento e cole o snippet no editor de código que se abre.16 O Webflow exibirá um espaço reservado no Designer, mas o script será renderizado corretamente no site publicado.16
Salvar e Publicar: Salve o código e publique o site.
Análise e Recomendações:
A arquitetura em camadas do Webflow oferece uma flexibilidade notável, permitindo que os usuários escolham o escopo exato de seu código. A recomendação de colocar scripts no rodapé é uma aplicação direta de boas práticas de desempenho web, o que demonstra uma compreensão da plataforma além de suas funcionalidades básicas. A relação de causa e efeito é clara: a injeção de scripts no cabeçalho pode atrasar a renderização do conteúdo principal, enquanto a injeção no rodapé permite que a página carregue primeiro, melhorando a experiência do usuário.
Uma tática avançada no Webflow é a inclusão de um Code Embed dentro de um Reusable Component.17 Ao invés de usar o método global nas configurações do projeto, um usuário pode adicionar o
snippet a um componente como o rodapé do site. Se esse componente for usado em todas as páginas, o script se torna global de forma modular, o que facilita o gerenciamento futuro. É um exemplo de como a arquitetura do Webflow permite soluções modulares e elegantes. É importante notar que o Webflow possui um limite de 50.000 caracteres para o código em cada seção, o que não é um problema para este snippet, mas é uma consideração prática para códigos mais extensos
Atualizado