> For the complete documentation index, see [llms.txt](https://aiblue.gitbook.io/aiblue/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aiblue.gitbook.io/aiblue/documentation/basico/images-and-media.md).

# 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)**<br>

Ideal para scripts de Agente que devem aparecer em todas as páginas para uma experiência de usuário consistente.

1. 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
2. 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.
3. 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)**<br>

Para incluir o Agente em uma única página do site.

1. 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.
2. 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
3. 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é.

1. Adicionar o Elemento "Code Embed": No painel Add (Adicionar) do Designer, arraste e solte o elemento Code Embed na sua página.16
2. 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
3. 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