Como Instalar o Hotjar no Framer (Guia Completo e Atualizado 2025)

4 de mai. de 2025

O que é o Hotjar e por que usá-lo no Framer?

O Hotjar é uma ferramenta poderosa de análise de comportamento do usuário. Com recursos como mapas de calor, gravações, enquetes e feedback em tempo real, ele permite que você entenda como os visitantes interagem com o seu site — algo essencial para quem cria com o Framer e deseja melhorar a experiência do usuário (UX).

Benefícios do Hotjar no Framer

Recurso	Benefício para sites no Framer
Mapas de Calor	Visualize cliques, rolagens e movimentos do mouse
Gravações	Assista à navegação real dos usuários
Feedback	Coleta de opiniões em tempo real
Enquetes	Pesquisas contextuais para entender pontos de fricção
Entrevistas	Convide visitantes para entrevistas remotas

Como Instalar o Hotjar no Framer [Passo a Passo]

1. Crie sua conta no Hotjar

Acesse hotjar.com
Clique em Get started free
Cadastre-se e confirme seu e-mail

2. Adicione seu site no Hotjar

Após o login, vá em Sites & Organizations
Clique em Add new site
Insira a URL completa do seu site (ex: https://seusite.com)
Clique em Next

3. Copie o código de rastreamento

O Hotjar vai gerar um tracking code (script)
Copie todo o código JavaScript fornecido

4. Adicione o código no Framer

Acesse seu projeto no Framer
No menu lateral, clique em Settings > General
Vá até a seção Custom Code
Cole o script dentro da tag <head>

<!-- Exemplo de código do Hotjar -->
<script>
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:XXXXXXX,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

<!-- Exemplo de código do Hotjar -->
<script>
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:XXXXXXX,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

<!-- Exemplo de código do Hotjar -->
<script>
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:XXXXXXX,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

5. Publique o site

Clique em Save
Em seguida, clique em Publish

6. Verifique a instalação

Volte para o painel do Hotjar
Clique em Verify Installation
Uma nova aba será aberta para checar se o código foi instalado corretamente
Em até 60 minutos, os dados começam a ser exibidos no painel do Hotjar

Comparativo: Framer com ou sem Hotjar

Métrica	Sem Hotjar	Com Hotjar
Compreensão do comportamento	Superficial	Profunda (mapas + vídeos)
Identificação de problemas UX	Demorada	Imediata
Otimização baseada em dados	Limitada	Baseada em comportamento
Feedback direto de usuários	Raro	Facilitado e automatizado

Melhores práticas ao usar o Hotjar no Framer

🔍 Instale em todas as páginas importantes

Certifique-se de que o script está sendo executado no site como um todo, especialmente em páginas de conversão.

🔒 Respeite a privacidade do usuário

Configure o Hotjar para anônimizar IPs e ocultar campos sensíveis de formulários.

📊 Use as gravações com sabedoria

Assista às sessões dos usuários e marque momentos importantes para sua análise.

FAQ – Dúvidas Frequentes

O Hotjar é compatível com o Framer?

Sim, totalmente. O Framer permite inserção de código personalizado no <head>, o que é suficiente para ativar o Hotjar.

Preciso pagar para usar o Hotjar?

Não. O plano gratuito oferece acesso a recursos como mapas de calor e gravações para sites com até 35 sessões diárias.

Posso usar Hotjar em mais de um projeto do Framer?

Sim, basta adicionar o script em cada projeto ou domínio e registrá-lo no painel do Hotjar.

Quanto tempo leva para ver os dados?

Geralmente, os primeiros dados começam a aparecer no Hotjar em até 1 hora após a verificação.

Conclusão

Instalar o Hotjar no Framer é simples, rápido e extremamente poderoso para designers e criadores que querem entender o comportamento real dos usuários e tomar decisões baseadas em dados. Se você leva a UX a sério, essa integração é obrigatória.