Modais

Configure modais inteligentes para captar leads, exibir ofertas e comunicar mensagens com controle total de gatilhos e frequência.

Nesta página:

• O que são Modais
• Tipos de conteúdo
• Criando um Modal
• Configuração por dispositivo
• Efeito de entrada
• Acompanhando resultados
• Boas práticas

---

O que são Modais

Modais aparecem como janelas sobrepostas ao conteúdo da página

Modais são janelas sobrepostas que aparecem sobre o conteúdo da página, capturando a atenção total do visitante. São o formato de maior impacto entre os componentes da UserIn.

Aspecto	Detalhe
Formato	Overlay centralizado sobre a página
Conteúdo	Imagem com CTA ou HTML customizado
Dispositivos	Configuração independente para desktop e mobile
Animação	Fade, slide, bounce, zoom e outras 8 variações
Acionamento	Via Construtor de Fluxos (ação “Exibir Modal” em jornadas InSite)

Modais são acionados exclusivamente por jornadas InSite no Construtor de Fluxos. No editor de jornadas, use o bloco de ação Exibir Modal para selecionar qual modal será exibido ao visitante.

---

Tipos de conteúdo

Ao criar um modal, você escolhe entre dois tipos de conteúdo que definem como o visual será construído.

Imagem

O modal exibe uma imagem (banner, arte promocional) com um botão de CTA sobreposto. É o caminho mais rápido para colocar um modal no ar.

Configuração	Descrição
Imagem	Upload ou URL da imagem
Tamanho	Largura total, automático ou dimensões customizadas
Ajuste	Contain, cover ou fill
Posição	Centro, topo, base, esquerda ou direita

Ideal para campanhas promocionais onde o time de design já produziu a arte final.

HTML

O modal renderiza HTML customizado, oferecendo controle total sobre layout, estilos e interações. Suporta variáveis Liquid para personalização dinâmica.

Configuração	Descrição
HTML	Código HTML com CSS inline ou classes
Dimensionamento	Automático (ajusta ao conteúdo) ou fixo (largura e altura definidas)

Ideal quando você precisa de formulários, layouts complexos ou consistência com o design system do site.

<div style="padding: 32px; text-align: center;">
  <h2>Olá, {{contact.firstName:visitante}}!</h2>
  <p>Aproveite 20% de desconto na sua próxima compra.</p>
  <a href="/oferta" style="background: #0020E7; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; display: inline-block; margin-top: 16px;">
    Resgatar desconto
  </a>
</div>

---

Criando um Modal

1. Acesse a criação

   No menu lateral, acesse Componentes → Modais. Na tela “Meus Modais”, clique em Criar um Modal. Você será direcionado ao editor com o preview em tempo real à direita.

2. Preencha as informações básicas

   Campo	Descrição
   Nome	Identificador interno (obrigatório)
   Descrição	Contexto sobre o objetivo do modal (opcional)
   Tipo	Imagem ou HTML

3. Configure o conteúdo

   Monte o visual do modal conforme o tipo escolhido. O painel esquerdo exibe as opções de configuração organizadas em seções colapsáveis, e o preview à direita atualiza em tempo real.

   Botão de CTA: configure texto, cores, tamanho, posição e ação (link, JavaScript ou fechar modal). Suporta HTML customizado e animação de pulse para chamar atenção.

   Overlay: defina a cor de fundo atrás do modal (ex: rgba(0,0,0,0.7)) e se clicar fora fecha o modal.

   Botão de fechar: posição (canto superior direito ou esquerdo), tamanho e cores.

4. Salve e ative

   Escolha entre Salvar Rascunho (status draft) ou Salvar e Ativar (status active). Modais ativos ficam disponíveis para seleção no Construtor de Fluxos.

Use o botão Visualizar Fullscreen para ver o modal no tamanho real, simulando como o visitante verá no site.

---

Configuração por dispositivo

Modais possuem configurações independentes para desktop e mobile. Por padrão, a configuração mobile replica a do desktop, mas você pode desativar essa opção e personalizar cada dispositivo separadamente.

Cenário	Recomendação
Imagem responsiva que funciona nos dois formatos	Mantenha “Usar mesma config do Desktop” ativado
Arte diferente para mobile (vertical) e desktop (horizontal)	Desative e configure cada aba separadamente
HTML que precisa de ajustes de layout para telas menores	Desative e ajuste o HTML da aba Mobile

Sempre teste o visual nas duas abas (Desktop e Mobile) antes de ativar. Um modal que funciona bem em desktop pode ter o CTA fora da área visível em telas menores.

---

Efeito de entrada

O efeito de entrada define como o modal aparece na tela. Uma animação bem escolhida melhora a experiência sem distrair.

Efeito	Comportamento
Fade	Aparece gradualmente (opacidade)
Scale	Cresce do centro
Slide Up/Down/Left/Right	Desliza a partir de uma direção
Bounce	Aparece com efeito de salto
Zoom	Zoom de fora para dentro
Nenhum	Aparece instantaneamente

Para cada efeito, você ajusta três parâmetros:

Parâmetro	Faixa	Padrão sugerido
Duração	100 a 1500ms	300–500ms
Intensidade	0 a 100	50
Delay	0 a 2000ms	0

---

Acompanhando resultados

Cada modal ativo registra métricas automaticamente. Acesse a análise clicando em Ver Analytics na lista de modais.

KPIs principais

Métrica	O que mede
Impressões	Quantas vezes o modal foi exibido
Cliques no CTA	Quantas vezes o botão de ação foi clicado
CTR	Taxa de clique (cliques / impressões)
Fechamentos	Quantas vezes o visitante fechou o modal (botão X, overlay ou ESC)
Visitantes únicos	Quantidade de visitantes distintos que viram o modal
Tempo médio de visualização	Quanto tempo o modal ficou visível antes de interação

Análises disponíveis

Análise	Descrição
Visão geral	CTR, taxa de fechamento e tempo médio até o clique
Eventos por dia	Gráfico de área com impressões e cliques nos últimos 30 dias
Por dispositivo	Distribuição entre desktop, tablet e mobile (gráfico de pizza, barras e tabela)
Timeline	Últimos 50 eventos com tipo, dispositivo e timestamp

Se a taxa de fechamento está acima de 70%, o modal pode estar sendo exibido com frequência excessiva ou para uma audiência pouco relevante. Revise a segmentação na jornada e o controle de frequência.

---

Boas práticas

Controle a frequência pela jornada

Como modais capturam a atenção total, são o tipo mais sensível à repetição. No Construtor de Fluxos, use blocos de condição para limitar exibições: uma vez por sessão ou máximo 3 vezes no total é um bom ponto de partida.

Adapte o visual para mobile

Imagens horizontais ficam pequenas em telas verticais. Para campanhas importantes, crie versões separadas: uma arte horizontal para desktop e uma vertical para mobile, desativando a opção “Usar mesma config do Desktop”.

Mantenha o CTA visível e claro

O botão de ação deve ser o elemento mais visível do modal. Use cores de alto contraste, texto de ação direto (3-4 palavras) e posicione o CTA na metade inferior da área visível.

Use exit intent com critério

Modais de exit intent são eficazes para retenção, mas podem frustrar se aplicados em todas as páginas. Restrinja a exibição a páginas de alto valor (checkout, carrinho, precificação) usando condições na jornada.

Teste variações com A/B

Crie dois modais com variações de copy, imagem ou oferta. No Construtor de Fluxos, use o bloco Teste A/B para dividir o tráfego e identificar qual versão gera mais resultado.

---

Próximos passos

Smart Blocks

Embutir blocos personalizados diretamente na estrutura da página.

Mini Games

Engaje visitantes com mecânicas de gamificação interativas.