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 da galeria. Use o menu suspenso de categorias no canto superior direito para filtrar por caso de uso (por exemplo, Promoções e ofertas ou Jogos e marketplaces), ou deixe em Todos os modelos.

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

Se o layout incluir uma ou mais imagens, cada uma 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 Galeria de mídia do seu projeto.

Abaixo da pré-visualização:

• Ajuste: como a imagem preenche seu quadro: Natural, Cobrir ou Conter. Não é mostrado para uma imagem de fundo, que sempre cobre sua área.
• Desfoque: suaviza a imagem, de 0 a 20 px.
• Escurecer: apenas para imagens de fundo. Adiciona uma camada escura sobre a foto para que o texto colocado sobre ela permaneça legível, de 0 a 100%.

Alguns layouts também adicionam uma seção de Layout com configurações de posicionamento da imagem:

• Largura da imagem: parte da largura do pop-up, como uma porcentagem.
• Posição da imagem: Esquerda ou Direita, para layouts com uma imagem 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 vazios 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 sobrancelhas.
• Texto sobre a imagem: mostrado apenas para layouts com texto sobre uma imagem de fundo. Define a cor usada para esse texto.

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 de negrito, itálico ou sublinhado.
• Adicione ou remova um link.
• Defina o alinhamento à esquerda, centro ou direita.
• Escolha um estilo de texto: Ícone, Sobrancelha, 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 a 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. Consulte Trabalhar com várias páginas.

Dica

Quando um bloco de texto, botão ou formulário de inscrição é selecionado, clique em Adicionar na sua barra de ferramentas e escolha Texto, Botã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 os botões + Texto, + Botão e + Formulário — clique em um para adicionar esse tipo de bloco ali.

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á exista:

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 dupla confirmação (double opt-in) configurada.

Importante

Se você escolher um formulário existente no menu suspenso, salvar este pop-up atualizará 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ê definir neste bloco substituirão 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ê deseja uma aparência mais leve.
2. Ative a Privacidade para adicionar uma linha de consentimento de privacidade sob o formulário e, em seguida, insira a URL da sua política de privacidade no campo que aparece.

3. Clique em Campos… para abrir um popover 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.

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 oferta curta 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.
• 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.

Nota

Modelos 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 se abre. Clique em Excluir para remover a página. Isso não pode ser desfeito.

Nota

Botões com uma ação Ir para a página apontando para a página excluída retornarão para a página inicial.

Salvar o conteúdo

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

Nota

Salvar o conteúdo não exibe 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 de 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, consulte Criar campanhas de pop-up da web.