Conteúdo de pop-up da web

O conteúdo de pop-up da web é o layout visual que os visitantes veem quando um pop-up da web aparece no seu site. Crie-o em Conteúdo e, em seguida, anexe-o a uma campanha de pop-up da web.

Criar conteúdo de pop-up da web

1. Vá para Conteúdo → Conteúdo de pop-up da web.
2. Clique em Criar conteúdo de pop-up da web.
3. Escolha um modelo inicial na galeria. Use o menu suspenso de categorias no canto superior direito para filtrar por caso de uso (por exemplo, Promoções e ofertas, Jogos e marketplaces ou Feedback e pesquisas), ou deixe em Todos os modelos. A categoria Layouts em branco contém os pontos de partida simples, incluindo Modal + formulário de inscrição, que já vem com um bloco de formulário de inscrição.

4. Depois de escolher um modelo, personalize o pop-up no editor.

Nomear o pop-up

Clique no nome do pop-up na barra superior para editá-lo. O nome identifica este conteúdo dentro do Pushwoosh, na lista de conteúdo e no assistente de campanha. Os visitantes do site não o veem.

Editar configurações do pop-up

Ajuste a aparência e a posição do pop-up no painel de configurações à esquerda da tela:

Nota

Essas configurações controlam apenas o design do pop-up. As configurações de público, segmentação de página, atraso, frequência e lançamento são configuradas na campanha de pop-up da web.

Imagens e vídeo

Se o layout incluir um ou mais blocos de mídia, cada um terá seu próprio bloco no topo do painel com uma pré-visualização e controles.

Clique em Alterar imagem para escolher um arquivo da Loja de mídia do seu projeto, ou defina Mídia como Vídeo para reproduzir um vídeo em vez de uma imagem estática.

Abaixo da pré-visualização:

• Mídia: Imagem ou Vídeo.
• Ajuste: como a imagem ou o pôster preenche seu quadro: Natural, Cobrir ou Conter. Não é mostrado para uma imagem de fundo, que sempre cobre sua área.
• Desfoque: suaviza a imagem ou o pôster, de 0 a 20 px.
• Escurecer: apenas para mídia de fundo. Adiciona uma camada escura sobre a imagem ou vídeo para que o texto colocado sobre ele permaneça legível, de 0 a 100%.

Definir Mídia como Vídeo adiciona mais quatro campos:

• URL do vídeo: um link direto para o arquivo de vídeo. O vídeo aceita apenas um URL externo. Você não pode enviar um vídeo para a Loja de mídia. Exporte-o como MP4 (vídeo H.264, áudio AAC) com “início rápido” ativado (às vezes chamado de “otimizado para web”), para que o navegador possa começar a reproduzir antes que o arquivo inteiro seja baixado. Se o URL não carregar, os visitantes verão apenas o pôster.
• Repetir: reproduz o vídeo continuamente em vez de parar após uma reprodução.
• Mostrar controles: exibe os controles de reprodução, pausa e volume integrados do navegador. Os vídeos sempre começam sem som, e sem esta opção os visitantes não têm como ligar o som.
• URL do pôster: a imagem mostrada enquanto o vídeo carrega. É opcional, mas recomendado: também é a única coisa mostrada a um visitante cujo navegador ainda está executando um script de pop-up mais antigo que não suporta vídeo, então deixá-lo em branco significa que o visitante não verá nada onde o vídeo estaria.

Alguns layouts também adicionam uma seção de Layout com configurações de posicionamento para o bloco de mídia:

• Largura da imagem: parte da largura do pop-up, como uma porcentagem.
• Posição da imagem: Esquerda ou Direita, para layouts com mídia ao lado do texto.

A seção Layout só aparece quando o layout atual tem configurações como estas. Em um layout de barra inferior, ela oferece Largura dos botões em vez de controles de imagem.

Tamanho e estilo do pop-up

Na seção Pop-up:

• Largura, Altura (vazio = automático): deixe ambos em branco para um pop-up que se ajusta ao seu conteúdo, ou defina um tamanho fixo em pixels. Em um pop-up com várias páginas, cada página tem seu próprio tamanho.
• Raio do canto, Sombra: o arredondamento dos cantos e a sombra projetada do pop-up.
• Animação: como o pop-up aparece: Nenhuma, Esmaecer ou Deslizar.

Cores

Clique em Cores para expandir a paleta de cores do pop-up:

• Fundo, Destaque (botões): o fundo do pop-up e a cor de destaque aplicada aos botões.
• Texto, Texto secundário: a cor do texto do corpo e do texto secundário, como legendas e títulos.
• Texto sobre imagem: mostrado apenas para layouts com texto sobre uma imagem de fundo. Define a cor usada para esse texto.

Modo escuro

Ative o Modo escuro para dar ao pop-up uma segunda paleta para visitantes cujo dispositivo está configurado com um esquema de cores escuras. Com ele desativado, o pop-up sempre é renderizado com a paleta clara acima, para todos os visitantes.

Uma vez que o Modo escuro está ativado:

• Use o seletor Claro / Escuro acima dos campos de cor para escolher qual paleta você está editando. A tela é redesenhada nesse esquema, para que você possa verificar o pop-up como ele realmente aparecerá em cada modo.
• Clique em Automático a partir do claro para (re)gerar a paleta escura a partir das cores claras atuais: as superfícies ficam escuras e o texto fica claro, enquanto Destaque e Texto sobre imagem são mantidos inalterados. Edite qualquer um dos cinco campos depois para ajustar o resultado.
• Desativar o Modo escuro não descarta a paleta escura — ela é mantida, então ativá-la novamente restaura suas edições em vez de regenerar do zero.

O navegador de um visitante decide qual paleta ele vê, com base na configuração de modo escuro do sistema operacional — não há um seletor de claro/escuro no próprio pop-up. Um site pode forçar um esquema para todos, independentemente da configuração do SO; veja webPopups.colorScheme nos documentos do SDK da Web.

Posicionamento e sobreposição

Na seção POSICIONAMENTO:

• Posição: escolha onde o pop-up se ancora na página usando a grade 3×3.
• Deslocamento da borda: defina a distância em pixels da borda selecionada.

Na seção SOBREPOSIÇÃO:

• Escurecer a página atrás: ative para escurecer o resto da página enquanto o pop-up é exibido.
• Cor, Opacidade: defina a cor e a opacidade da sobreposição de 0 a 1.

Editar texto

Clique em qualquer bloco de texto no pop-up para editá-lo diretamente. Uma barra de ferramentas aparece acima dele:

• Aplique formatação em negrito, itálico ou sublinhado.
• Adicione ou remova um link.
• Defina o alinhamento à esquerda, centro ou direita.
• Escolha um estilo de texto: Ícone, Título auxiliar, Título 1–3, Corpo ou Legenda.

Editar botões

Clique em um botão para abrir sua barra de ferramentas:

• Escolha o estilo do botão: Primário ou Secundário.
• Escolha o que o botão faz:
  • Abrir um link: insira o URL de destino.
  • Fechar o pop-up.
  • Ir para a página: escolha outra página do pop-up para a qual mudar. Esta opção aparece quando o pop-up tem mais de uma página. Veja Trabalhar com várias páginas.

Dica

Quando um bloco de texto, botão ou outro elemento é selecionado, clique em Adicionar na sua barra de ferramentas e escolha Texto, Botão, Ícone, Contagem regressiva, Seletor de tópicos, Avaliação ou Formulário de inscrição para inserir esse bloco abaixo dele. Use as setas para cima e para baixo para movê-lo na página e o ícone de lixeira para removê-lo. O último elemento restante de uma página não pode ser excluído.

Quando uma seção do pop-up não tem elementos, ela mostra apenas os botões + Texto, + Botão e + Formulário. Para adicionar um bloco de Ícone, Contagem regressiva, Seletor de tópicos ou Avaliação, primeiro adicione um texto ou botão lá e, em seguida, use o menu Adicionar dele.

Adicionar um formulário de inscrição

Adicione um bloco de Formulário de inscrição para coletar inscrições de e-mail e outros campos diretamente no pop-up. Saiba mais sobre formulários de inscrição.

Adicionar o bloco

1. Selecione um bloco de texto, botão ou outro elemento na tela.
2. Clique em Adicionar na sua barra de ferramentas.
3. Escolha Formulário de inscrição. O bloco aparece imediatamente com um campo padrão de E-mail e um botão Inscrever-se.

Escolher uma origem de formulário

Clique no bloco do formulário de inscrição para abrir a barra de ferramentas FORMULÁRIO. O primeiro menu suspenso vincula o bloco a um formulário de inscrição em seu projeto. Você pode criar um novo formulário ou escolher um que já existe:

Opção	Quando usar
Novo formulário — criado ao salvar (padrão)	Início mais rápido: o Pushwoosh cria o formulário para você quando você salva o pop-up, nomeado “nome do pop-up — pop-up da web”.
+ Criar novo formulário…	Você quer nomear o formulário e configurá-lo antes de salvar o pop-up. Abre uma caixa de diálogo Novo formulário de inscrição — insira um Nome, depois defina seus Campos, texto de Envio e Privacidade da mesma forma que abaixo, e clique em Criar.
Um formulário existente no menu suspenso	Reutilize um formulário que já tenha assinantes ou double opt-in configurado.

Importante

Se você escolher um formulário existente no menu suspenso, salvar este pop-up atualiza esse formulário de inscrição para todo o projeto. Os campos, o texto do botão de envio e as mensagens de sucesso que você define neste bloco substituem o que esse formulário tinha antes. Isso inclui o formulário incorporado em seu site e o formulário em Público → Formulários de inscrição.

Outros pop-ups da web que usam o mesmo formulário não são atualizados. Cada pop-up mantém sua própria cópia dos campos e textos do bloco até que você reabra esse pop-up e o salve novamente.

Definir campos e comportamento de envio

1. Defina o Estilo do botão de envio na barra de ferramentas FORMULÁRIO:
   • Primário: botão preenchido com a cor de Destaque do pop-up. Melhor quando Inscrever-se é a ação principal na página.
   • Secundário: botão contornado com uma borda e rótulo na cor de destaque. Melhor quando o pop-up já tem um botão primário ou você quer uma aparência mais leve.
2. Ative a Privacidade para adicionar uma linha de consentimento de privacidade sob o formulário, depois insira o URL da sua política de privacidade no campo que aparece.

3. Clique em Campos… para abrir um pop-over onde você pode manter E-mail (sempre obrigatório) e adicionar Nome, Sobrenome, Telefone ou Personalizado, e definir os textos de Sucesso e Confirmar e-mail mostrados após um visitante enviar.

Adicionar uma contagem regressiva

Adicione um bloco de Contagem regressiva para criar urgência com um prazo que diminui ao vivo no pop-up.

1. Selecione um bloco de texto, botão ou outro elemento na tela.
2. Clique em Adicionar na sua barra de ferramentas e escolha Contagem regressiva.
3. Clique na contagem regressiva para abrir sua barra de ferramentas:
   • Prazo final: a data e a hora em que a contagem regressiva chega a zero.
   • Fuso horário: o fuso em que o prazo final é lido. Deixe em branco para UTC.
   • Idioma: o idioma dos rótulos das unidades (dias, horas, etc.). Deixe em Inglês (padrão) ou escolha entre 13 outros idiomas.
   • Rótulos: ative para mostrar os rótulos das unidades ao lado dos números.
   • Quando o prazo final passar:
     • Mostrar zeros: a contagem regressiva continua mostrando 00:00:00.
     • Não mostrar o pop-up: o pop-up inteiro é ignorado quando o prazo já passou.
     • Ir para a página: salta para outra página do pop-up quando o prazo final passa. Oferecido apenas quando o pop-up tem mais de uma página — escolha a página de destino no menu suspenso que aparece. Veja Trabalhar com várias páginas.

Nota

O prazo final é lido no fuso horário que você escolhe aqui, não no fuso horário do próprio visitante — o mesmo contrato do bloco de contagem regressiva no editor de e-mail. Deixe o campo em branco e o prazo final será lido como UTC.

Nota

Com Não mostrar o pop-up, o Pushwoosh verifica o prazo final logo antes de o pop-up aparecer. Um pop-up ignorado desta forma não conta para a frequência Uma vez por visitante, então não esgota a única chance do visitante de vê-lo.

Adicionar um ícone

Adicione um bloco de Ícone para inserir um pequeno pictograma — um sinal de porcentagem para uma promoção, um presente para um brinde — ao lado do seu texto.

1. Selecione um elemento, clique em Adicionar e escolha Ícone.
2. Clique no ícone para abrir sua barra de ferramentas:
   • Ícone: escolha de um conjunto fixo de 20 ícones (sino, presente, carrinho, gráfico, cadeado, calendário, verificação, estrela, relógio, etiqueta, e-mail, telefone, download, play, escudo, brilho, porcentagem, caminhão, bilhete, usuário). Envios de ícones personalizados não são suportados.
   • Tamanho: 24, 32 ou 48 px.
   • Destaque: ativado por padrão, para que o ícone corresponda à cor de destaque do pop-up. Desative para escolher uma cor personalizada.

Adicionar um seletor de tópicos

Adicione um bloco de Seletor de tópicos para permitir que os visitantes selecionem seus interesses como caixas de seleção ou chips. Suas escolhas são escritas em uma tag em seu dispositivo.

Adicionar o bloco e vincular uma tag

1. Selecione um elemento, clique em Adicionar e escolha Seletor de tópicos. Ele chega com duas opções de espaço reservado e nenhuma tag vinculada — não escreverá nada até que você escolha uma.
2. Clique no bloco para abrir sua barra de ferramentas. O primeiro menu suspenso o vincula a uma tag do tipo Lista em seu projeto — escolha uma existente ou selecione Criar uma tag de lista para criar uma sem sair do editor.

Definir as opções e limites

Ainda na barra de ferramentas:

• Controle: mostre as opções como Caixas de seleção ou Chips.
• Mínimo / Máximo de escolhas: quantas opções um visitante deve ou pode selecionar. 0 em qualquer extremidade significa que não há limite ali — embora pelo menos uma escolha seja sempre necessária para enviar, mesmo com o Mínimo em 0. Escolher além do máximo, ou tentar enviar abaixo do mínimo, mostra uma mensagem em linha ao lado do bloco em vez de enviar qualquer coisa.
• Clique em Opções para abrir o painel de opções:
  • Edite o Rótulo de cada opção (o que o visitante lê) e o Valor da tag (o que é escrito na tag). Deixe o Valor da tag em branco e o Pushwoosh escreve o ID interno da opção (option-1, option-2, etc.) — preencha-o se precisar de um valor legível na tag.
  • + Opção adiciona outra linha, até um total de 12 opções.
  • Defina o Rótulo do botão e a Mensagem após o envio.

As escolhas apenas adicionam, nunca removem

As escolhas de um visitante são anexadas à tag — enviar o bloco novamente adiciona mais valores, nunca limpa os anteriores. Um pop-up não pode ser usado para permitir que um visitante desmarque um tópico que escolheu antes; isso requer uma superfície diferente, como uma página de preferências apoiada pela mesma tag.

Adicionar uma avaliação

Adicione um bloco de Avaliação para coletar uma pontuação rápida — NPS, estrelas ou polegares — como um evento personalizado.

Adicionar o bloco e definir o evento

1. Selecione um elemento, clique em Adicionar e escolha Avaliação. Ele chega sem nenhum evento definido — não enviará nada até que você escolha um.
2. Clique no bloco para abrir sua barra de ferramentas e escolha um Evento dos eventos existentes do seu projeto, ou escolha Criar um evento para definir um novo sem sair do pop-up — o Pushwoosh o configura com os atributos score, scale e slotKey que o bloco envia. A pontuação é postada no Pushwoosh como esse evento — use-o em segmentos ou Customer Journeys da mesma forma que qualquer outro evento.

Criar um evento aqui é permanente

Um evento que você cria a partir deste menu é um evento real em seu projeto, não um rascunho — excluí-lo mais tarde significa ir para a lista de eventos do seu projeto, não apenas alterar o pop-up.

Se um evento vinculado ao bloco for posteriormente renomeado ou excluído em outro lugar — ou foi digitado neste campo antes de se tornar um seletor — o seletor o mostra como Faltando: <nome do evento> em vez de descartá-lo ou trocá-lo silenciosamente. Escolha um evento diferente para corrigir a vinculação.

Configurar a escala

Ainda na barra de ferramentas:

• Escala: NPS 0–10, Estrelas (1 a 5) ou Polegares (para cima ou para baixo).

Nota

Em todas as três escalas, uma pontuação mais alta sempre significa uma avaliação mais positiva — Polegares envia 1 para um polegar para cima e 0 para um polegar para baixo.

• Quando a pontuação é enviada: Ao tocar envia a pontuação no momento em que um visitante escolhe um valor. Com um botão espera que eles também cliquem em um botão de envio — defina seu rótulo assim que esta opção for selecionada.
• Rótulos opcionais nas duas extremidades da escala e a Mensagem após o envio.

Trabalhar com várias páginas

Um pop-up da web pode ter mais de uma página, por exemplo, para guiar os visitantes através de uma curta oferta de várias etapas.

Adicionar uma página

Clique em + Adicionar página para abrir o menu de adição de página:

• Duplicar página atual: copia a página ativa, incluindo quaisquer edições que você tenha feito, como uma nova página. Se a página de origem tiver um formulário de inscrição, a cópia é criada sem ele — um pop-up só pode ter um.
• Escolha um dos layouts de página única para adicionar uma nova página com o conteúdo de demonstração desse layout. A nova página é independente das outras, então pode usar um layout diferente. Modal + formulário de inscrição é um desses layouts — ele já vem com um bloco de formulário de inscrição no lugar.

Nota

Um pop-up da web só pode ter um formulário de inscrição. Uma vez que qualquer página já tenha um, Modal + formulário de inscrição sai deste menu.

Nota

Layouts de exemplo de várias páginas, como Tour do produto (várias páginas), sempre vêm como um conjunto completo de páginas, então eles só estão disponíveis na galeria inicial, não neste menu.

Cada aba é uma página. Clique em uma aba para mudar para ela.

Definir a página inicial

A aba marcada com ★ é a página inicial, a página que os visitantes veem primeiro. Para alterá-la, abra outra aba e clique em ☆ nessa aba.

Excluir uma página

Na aba ativa, clique em ✕. Uma caixa de diálogo de confirmação é aberta. Clique em Excluir para remover a página. Isso não pode ser desfeito.

Nota

Qualquer botão ou contagem regressiva com uma ação Ir para a página apontando para a página excluída volta para a página inicial.

Salvar o conteúdo

Revise o conteúdo, imagens e vídeo, e as ações dos botões. Quando terminar, clique em Salvar na barra superior.

Nota

Salvar o conteúdo não mostra o pop-up da web em seu site. O conteúdo aparece no site somente depois que você o seleciona em uma campanha de pop-up da web e lança a campanha.

Usar o conteúdo em uma campanha

Depois de salvar, o conteúdo aparece em Conteúdo → Conteúdo de pop-up da web. Abra-o na lista para continuar editando.

Para exibi-lo no site, vá para Campanhas → Pop-ups da web, crie ou edite uma campanha e escolha este conteúdo na etapa Conteúdo.

Em seguida, configure o público, as configurações de exibição, a frequência e as opções de lançamento. Para o fluxo completo, veja Criar campanhas de pop-up da web.