Passar para o conteúdo principal

Popup Multi-Step: Guia passo a passo

Neste artigo você vai aprender a criar um popup do tipo multi-step do zero.

Monte um popup de várias etapas totalmente sob medida com um editor de arrastar e soltar (drag-and-drop): faça perguntas tipo quiz, peça o email e o telefone, e mostre uma tela de sucesso com o cupom. Ao dividir a captação em etapas curtas, você reduz a fricção e consegue mais inscritos e dados melhores dos seus clientes. E como os outros popups, também impulsiona suas vendas: os visitantes ganham um cupom de desconto ao participar!


Como criar um popup?

Clique em "Criar popup" e escolha o modelo Multi-Step.

Na tela de edição você vai encontrar:

  • À esquerda: o painel para adicionar blocos.

  • No centro: a pré-visualização ao vivo do seu popup (com botões para alternar entre desktop e celular).

  • À direita: o painel de propriedades do que estiver selecionado.

  • No topo: a barra de etapas, onde você adiciona, reordena e edita cada etapa.


Como funciona o editor?

O popup é montado com etapas e, dentro de cada etapa, com blocos.

  • Etapas: são as telas pelas quais o visitante avança. Você pode criar etapas de Pergunta/Quiz, Email, Telefone/SMS, etapa personalizada e Sucesso. Reordene arrastando pela barra superior.

  • Blocos: são os elementos dentro de cada etapa. Arraste-os do painel esquerdo para o canvas (ou clique para adicioná-los), reordene arrastando, e edite no painel direito ao selecioná-los.


O que dá para configurar?

Blocos disponíveis

  • Texto: com editor avançado (negrito, itálico, títulos, alinhamento).

  • Imagem: faça o upload e escolha largura e alinhamento.

  • Botão: defina o texto e a ação (avançar para a próxima etapa, enviar e finalizar, fechar o popup ou abrir uma URL).

  • Espaçador: para dar espaço entre blocos (com ou sem linha divisória).

  • Campos (inputs): Email, Telefone, Nome, Aniversário e campos personalizados. Cada um com seu rótulo, placeholder e opção de obrigatório.

  • Opções / Quiz: botões, checkboxes ou lista suspensa. Você pode permitir seleção única ou múltipla e fazer com que avance sozinho para a próxima etapa ao selecionar.

  • Cupom: mostra o código ganho na tela de sucesso, com botão para copiá-lo.

Design (Estilos)

Personalize a fonte, o tamanho do popup, o arredondamento, as cores (primária, texto, botões, fundo) e a cor do fundo escurecido (backdrop).

Você também configura a imagem lateral:

  • No desktop: sem imagem, à esquerda ou à direita.

  • No celular (onde as laterais não cabem): ocultá-la, colocá-la como fundo, acima ou abaixo.

Além disso, pode ativar um link "Não, obrigado" configurável (texto e cor) que fecha o popup.

Texto

Todos os textos do popup são totalmente editáveis, do início ao fim: títulos, subtítulos, botões, rótulos dos campos, opções do quiz, etc.

Cupons

Escolha o tipo de recompensa:

  • Sem desconto: você só capta o lead (nenhum código é exibido).

  • Gerar cupom automático: é criado um código exclusivo e de uso único para cada visitante (com tipo de desconto, valor e prefixo configuráveis).

  • Cupom existente da loja: use um código que você já criou na sua loja.


Configuração avançada

Na aba Config você vai poder definir:

  • Quando mostrar o popup: ao entrar no site ou conforme condições (ao tentar sair, depois de X segundos, ou ao rolar X pixels).

  • Frequência: mostrar em cada visita ou limitar as repetições por dia, semana ou mês.

  • Quando parar de mostrar: quando o visitante já se inscreveu ou após X impressões.

  • Em quais dispositivos aparece: desktop, celular e/ou tablet.

  • Filtro por URL: mostrar apenas em certas páginas ou ocultar em outras.

  • Se você permite que um mesmo email participe mais de uma vez.

  • Como entregar o cupom:

    • Na tela de sucesso.

    • Por email (com modelo editável: remetente, assunto, textos, botão, cor).

    • Ambos.

    • Somente integração externa: o código não é exibido nem enviado por email; você o entrega ao cliente por meio de um webhook ou da sua plataforma de email marketing.


Email

Se você escolher entregar o cupom por email (ou ambos), na aba Email configura o modelo completo: email do remetente, assunto, nome da loja, textos, aviso legal, texto do botão, URL do site e cor.


Recursos Pro

  • Teste A/B: teste versões diferentes do popup e fique com a que mais converte.

  • Atribuição de vendas: a Nuby vincula as compras feitas com o cupom ao popup que as gerou.

  • Respostas do quiz: as respostas de cada visitante são salvas junto ao inscrito e, se você tiver uma integração ativa, enviadas ao seu webhook para usar na sua segmentação.

  • Multi-idioma: o popup é exibido automaticamente em espanhol, inglês ou português conforme o idioma do visitante.


Pronto!

Quando terminar de configurar, clique em Salvar e seu popup fica ativo na sua loja. Você pode editar, duplicar ou pausar quando quiser na seção de Campanhas.

Respondeu à sua pergunta?