Framer
Visão Geral:
O Framer é uma ferramenta de design e construção de sites que equilibra a simplicidade visual com um poder de codificação avançado. Para usuários que desejam integrar snippets de terceiros sem recorrer a programação, a plataforma fornece um componente intuitivo chamado "Embed" (Incorporar), que atua como um contêiner para códigos externos.
Instalação: Usando o Componente Embed
Adicionar o Componente Embed: No painel de edição do Framer, navegue até o menu Insert (Inserir), localizado na barra de ferramentas superior. Busque por Embed e arraste o componente para a sua tela.5
Configurar o HTML: Com o componente Embed selecionado, abra o painel de propriedades na lateral direita da tela. Em vez de inserir uma URL, escolha a opção HTML. Cole o snippet do Aiblue no campo de código fornecido.6
Publicar o Site: Para que o Agente se torne visível para os visitantes do site, você deve publicar as alterações. O Agente aparecerá no site ao vivo.
Análise e Recomendações:
A Framer oferece duas abordagens para o código customizado: o componente Embed e os métodos avançados de "Code Components" ou "Code Overrides".8 A primeira abordagem é a ponte para usuários que não são desenvolvedores, permitindo a integração de funcionalidades pré-fabricadas como o Agente. Os métodos avançados, por outro lado, são destinados à criação de componentes React personalizados com interações complexas e não são necessários para a tarefa em questão.8 A seleção do método mais simples garante uma integração bem-sucedida e evita a complexidade desnecessária.
É importante notar que o Framer atua como um hospedeiro para o código externo. Se o Agente não funcionar como esperado, é provável que a questão esteja no próprio script do Aiblue ou em um problema de compatibilidade com o domínio, como restrições de cabeçalho HTTP que podem bloquear a incorporação.6 Portanto, a solução de problemas deve começar com uma verificação do
status do script de terceiros, e não da plataforma Framer.
Atualizado