Como colocar pop-up na loja VTEX: Modal Layout, tag ou aplicativo

Para colocar um pop-up numa loja VTEX há três caminhos: o Modal Layout, app oficial da VTEX montado no tema pelo time de desenvolvimento; uma tag no Google Tag Manager; ou um aplicativo da VTEX App Store. Eles não fazem a mesma coisa. O primeiro serve bem a avisos, os outros dois servem a campanhas, e a escolha depende de o pop-up ser um comunicado ou uma forma de captar contato.

Como montar um pop-up com o Modal Layout

O Modal Layout é um app do VTEX IO para criar modais no Store Framework. O desenvolvimento adiciona a dependência no manifest.json do tema e monta o modal com blocos:

"dependencies": {
  "vtex.modal-layout": "0.x"
}

Os blocos principais são modal-trigger (o que abre o modal), modal-layout (o modal em si), modal-header (cabeçalho com o botão de fechar), modal-content (o conteúdo) e modal-actions (botões de ação, como o que fecha o modal). A estrutura mínima de um aviso, a partir do exemplo do app (que usa click; aqui o gatilho é o de uma vez por sessão):

{
  "store.home": { "children": ["modal-trigger#aviso"] },
  "modal-trigger#aviso": {
    "props": { "trigger": "load-session" },
    "children": ["rich-text#gatilho", "modal-layout#aviso"]
  },
  "rich-text#gatilho": { "props": { "text": "Abrir aviso" } },
  "modal-layout#aviso": { "children": ["rich-text#conteudo"] },
  "rich-text#conteudo": { "props": { "text": "Frete grátis em compras acima de R$ 299" } }
}

O modal abre de quatro formas:

Dá para escolher tela cheia ou não, fundo clicável ou sem fundo, o comportamento da rolagem, o fechamento pela tecla Esc e a presença do botão de fechar. A aparência vem de CSS. Para um aviso institucional, uma mudança de política ou um comunicado de entrega, esse caminho basta e não custa nada além do tempo de desenvolvimento.

O que o Modal Layout não descreve

O Modal Layout não descreve gatilho por intenção de saída, por tempo na página nem por rolagem. Também não descreve frequência por visitante, público novo ou recorrente, início e fim programados, formulário de captação, opt-in nem destino do contato. O mais próximo de um controle de frequência é o gatilho de uma vez por sessão, que conta por sessão e não define regra por visitante nem por período.

Nada disso é impossível. O time de desenvolvimento pode construir cada ponto, e a escolha passa a ser menos sobre o que a plataforma permite e mais sobre quanta manutenção a loja quer assumir. Para captar, o modal é só o contêiner: o formulário, a gravação do dado no Master Data com o aceite do visitante e o envio para os sistemas da marca continuam por fazer.

Como instalar o aplicativo da Popconvert na VTEX

A Popconvert tem aplicativo oficial na VTEX App Store, que se instala sem editar o tema. O caminho, segundo a Central de Ajuda:

1. No painel da Popconvert, abra Integrações e selecione a VTEX. Em plataformas com app oficial, como a VTEX, a instalação é automática.
2. Em Campanhas, escolha Nova Campanha e um modelo da galeria, filtrada por casos de uso, datas promocionais ou Natal.
3. Em Recompensas, cole o cupom criado na VTEX e defina o nome da promoção e a chance de premiação.
4. Salve e ative a campanha. Para conferir a instalação, abra o DevTools da loja (F12), use Ctrl+F e busque cdn.popconvert.

Quem prefere o Google Tag Manager pode instalar por ele; a própria Ajuda traz um tutorial em vídeo na tela de integrações.

Que pop-up usar em cada página da loja

A pergunta que decide o pop-up é onde o visitante está e o que ele está fazendo. A Popconvert separa o quando (gatilho), o para quem (público e limites) e o onde (segmentação por URL), e cada um tem a sua regra.

Gatilhos

Há cinco gatilhos, e a Ajuda recomenda usar um ou dois por campanha, porque combinações excessivas dificultam a exibição:

• Intenção de saída: no desktop, o mouse deixa a janela; no mobile, a inatividade dispara o pop-up, em três níveis de sensibilidade (baixa, média, alta). Recupera quem está prestes a sair, e o guia de exit intent trata disso a fundo.
• Tempo: exibe depois de X segundos na página.
• Páginas visitadas: exibe depois de o visitante navegar por X páginas, o que alcança quem está mais engajado.
• Rolagem: exibe quando o visitante rola X% da página.
• Evento HTML ou seletor CSS: ativa por um clique ou ação específica, o mais flexível de todos.

Para ajustar a sensibilidade no mobile, veja o guia de pop-up no mobile.

Público, frequência e páginas

Em limites de exibição, a loja escolhe se a campanha aparece só para visitantes novos ou para todo o tráfego, e se um contato pode participar de novo com o mesmo e-mail. A frequência padrão é 1, uma vez a cada 24 horas para cada visitante; com 0, a campanha aparece a cada carregamento de página, o que a Ajuda desaconselha.

Em segmentação, a campanha aparece em todo o site por padrão, e dá para restringir por URL (categorias, produtos), bloquear no checkout e na página de agradecimento ou controlar por UTM. Quando as condições estão no mesmo filtro, todas precisam ser verdadeiras; quando há vários filtros, basta um. O agendamento define início e fim da campanha, com data e horário.

Um desenho possível para uma loja VTEX: intenção de saída nas páginas de produto e de categoria, rolagem ou tempo nas páginas de conteúdo, uma campanha própria para o carrinho e nenhuma no checkout. O pop-up de primeira visita está em pop-up de boas-vindas, e o do pós-compra em pop-up pós-compra.

Pop-up com jogo ou sem jogo

A Library reúne modelos prontos, e a loja escolhe o que combina com o objetivo. Nos modelos com jogo (Roleta, TNT, Pick a Gift e outros), o visitante participa e, para receber o prêmio, deixa o contato; nos modelos sem jogo, ele se cadastra direto. Cores, logo, textos e imagens são da marca, e o formulário pede até quatro campos. O prêmio é definido nas recompensas da campanha.

O que muda entre os dois é o motivo para deixar o contato. Na nossa leitura, o modelo sem jogo serve quando a oferta já é a razão para o cadastro (a coleção em primeira mão, uma condição de frete), e o jogo serve quando a oferta precisa de um empurrão. O contato captado vai para o Master Data da loja e, se a marca quiser, para os demais sistemas dela, como CRM, CDP ou data warehouse, por integração ou webhook. O guia de leads na VTEX mostra o que fazer com essa base.

Modal Layout, tag ou aplicativo: como escolher

O recurso nativo é a escolha certa para avisos que não dependem do comportamento do visitante. Para captar contato, o aplicativo poupa o time de reconstruir no tema o que já existe pronto. As duas coisas convivem na mesma loja. Para ver o aplicativo na sua loja, fale com a nossa equipe.

Perguntas frequentes

Como colocar um pop-up na loja VTEX?
Por três caminhos: o Modal Layout, montado pelo time de desenvolvimento no tema; uma tag no Google Tag Manager; ou um aplicativo da VTEX App Store, que se instala sem editar o tema. O primeiro serve a avisos, e os outros dois a campanhas de captação.

Dá para fazer pop-up de saída (exit intent) na VTEX?
O Modal Layout não descreve gatilho por intenção de saída. Com o aplicativo da Popconvert, o pop-up de saída funciona no desktop, quando o mouse sai da página, e no mobile, por inatividade.

Onde ficam salvos os contatos captados pelo pop-up na VTEX?
No Master Data da loja, o cadastro de clientes da VTEX, quando a campanha usa o aplicativo da Popconvert.

Dá para mostrar o pop-up só em algumas páginas e em datas definidas?
Sim. A segmentação define em quais endereços a campanha aparece, e o agendamento define início e fim, com data e horário.

Como saber se o aplicativo da Popconvert está instalado na loja?
Abra o DevTools do navegador (F12), use Ctrl+F e busque cdn.popconvert. Um script duplicado não é problema, porque ele não carrega duas vezes.