Pop-up de boas-vindas: 7 exemplos e como criar [Guia + Vídeo]

Bem-vindo!

Para saber mais sobre pop-ups de boas-vindas, veja designs inspiradores de pop-ups de boas-vindas e obtenha um tutorial sobre como criá-los, basta rolar para baixo.

Veja o que eu fiz lá?

Assim como esta introdução, um pop-up de boas-vindas é uma mensagem que cumprimenta os novos visitantes do seu site. Ele também tem um objetivo super importante: converter esses novos visitantes em assinantes e clientes.

Neste post, você encontrará tudo o que precisa para fazer um pop-up de boas-vindas que converta visitantes: exemplos, modelos, dicas e um guia de criação passo a passo.

Vá para as seções:

• O que é um pop-up de boas-vindas?
• Exemplos de pop-ups de boas-vindas
• Como adicionar um pop-up de boas-vindas a qualquer site
• Dicas de pop-up de boas-vindas

O que é um pop-up de boas-vindas?

Um pop-up de boas-vindas é uma mensagem que aparece quando os visitantes entram em um site. Seu objetivo é atrair a atenção de novos visitantes e convertê-los em assinantes ou clientes.

Adicionar um pop-up de boas-vindas a um site é uma maneira eficaz de converter visitantes que não estão prontos para comprar imediatamente. É por isso que as empresas on-line usam pop-ups de boas-vindas para criar listas de e-mail para alimentá-las com campanhas de marketing posteriormente. Outros usos populares incluem direcionar tráfego para páginas de produtos e fazer anúncios de marketing.

Aqui está um típico pop-up de boas-vindas de um site de comércio eletrônico.

Exemplos de pop-ups de boas-vindas

Se você quiser alguma inspiração, vamos dar uma olhada em alguns designs incríveis de pop-ups de boas-vindas de sites populares. Esses exemplos são bonitos e eficazes, convertendo até vários milhares de visitantes todos os meses.

1. Pop-up de boas-vindas em tela cheia

• Site : Nicky Kehoe
• Objetivo : Construir uma lista de e-mail
• Incentivo : acesso antecipado a novos produtos, ofertas exclusivas, últimas notícias e convites para eventos presenciais

Se você está procurando um pop-up de boas-vindas inspirador, este pode ser o único. Este reforça lindamente a identidade da marca e a vibração geral do site elegante. E apenas olhe para ele - é simplesmente lindo.

Nickey Kehoe mostra seu pop-up de boas-vindas alguns segundos depois de abrir um site. Observe que você pode fechar o pop-up de duas maneiras (clicando em Entrar em nosso site ou no botão fechar). Essa decisão de design simplifica a tarefa de fechar o pop-up, o que é uma boa maneira de manter a experiência do visitante positiva.

2. Pop-up de boas-vindas com desconto

• Site : Blume
• Objetivos : a) Construir uma lista de e-mail, b) Gerar mais pedidos de visitantes de primeira viagem
• Incentivo : desconto de 20% no primeiro pedido + benefícios para membros (frete e devoluções grátis)

Um bom pop-up de boas-vindas que oferece um desconto para o primeiro pedido. Muitas lojas de comércio eletrônico contam com pop-ups de boas-vindas da página inicial como este para gerar leads e pedidos.

Este pop-up de boas-vindas da Blume converte 5% dos visitantes do site , o que está muito acima da taxa média de conversão de pop-ups de cerca de 2%. Razões: uma oferta generosa, um design pop-up de marca de aparência legal e uma boa reputação da marca.

3. Pop-up de boas-vindas com uma amostra gratuita do produto

• Site : Domingos para cães
• Objetivo : Aumentar as vendas ajudando os visitantes a decidir sobre a compra
• Incentivo : amostra grátis do produto

A Sundays For Dogs, uma empresa de assinatura de comida para cães, motiva os recém-chegados a experimentar uma amostra grátis de comida personalizada. É uma ótima tática de marketing: amostras grátis comprovadamente aumentam as vendas para empresas de assinatura de alimentos.

Quando os clientes clicam em Obter o seu, eles vão para a página com o produto de amostra. Lá, eles escolhem a preferência e o pedido da receita - a única cobrança é de US$ 5 pelo frete. Graças às informações de preferência, a empresa também coleta dados úteis para personalizar ofertas futuras.

4. Pop-up de boas-vindas com um código de cupom

• Site : Vela Delírio
• Objetivos : Gerar leads e vendas de visitantes de primeira viagem
• Incentivo : um código de cupom de desconto para a primeira compra

Cupons personalizados podem obter leads, aumentar o valor do pedido e impulsionar as vendas. Esse pop-up de boas-vindas incentiva os visitantes de primeira viagem a converter com um código de cupom exclusivo - também uma boa maneira de cumprimentar novos visitantes. Além disso, os códigos exclusivos também ajudam a acompanhar o desempenho da campanha.

Em termos de design, é um pop-up de boas-vindas bastante simples, mas de boa aparência. Há uma bela imagem de um produto da Candle Delirium, design de marca e uma mensagem curta e doce. Um bom exemplo de pop-up de boas-vindas para lojas de comércio eletrônico.

Quer ver designs pop-up legais? ️ Exemplos de pop -up de e-mail ️ Exemplos de pop-ups de SMS ️ Exemplos pop-up de spin-to-win

5. Pop-up de boas-vindas com uma demonstração do software

• Site : Zendesk
• Objetivos : Aumentar as visualizações de demonstração e gerar leads
• Incentivo : Ver como o Zendesk pode ajudar a melhorar a qualidade do atendimento ao cliente com exemplos

Este pop-up de boas-vindas se destacou para mim por vários motivos.

Primeiro, a Zendesk é uma empresa de software, então o objetivo da campanha é mostrar o produto em uma sessão de demonstração. Em segundo lugar, o pop-up tira o máximo proveito da imagem, mostrando uma captura de tela do painel do produto junto com alguns aplicativos populares com os quais se integra.

Quando os visitantes clicam no botão CTA, o site os leva para a página de inscrição de demonstração. Lá, eles inserem seu nome e e-mail para começar a assistir à demonstração.

No geral, o Zendesk nos dá um exemplo incrível de como os pop-ups de sites ajudam as empresas de software a gerar leads e aumentar o reconhecimento de seus produtos.

6. Pop-up de boas-vindas "Introdução da marca"

• Site : PRESS Healthfoods
• Objetivo : Construir uma lista de clientes fiéis
• Incentivo : conteúdo semanal com dicas de estilo de vida saudável, ofertas VIP e brindes

Duas coisas me chamaram a atenção aqui: uma bela imagem do produto e o tom casual da escrita acompanhado de um emoji.

A PRESS Healthfoods fez um trabalho incrível com imagens de produtos, então incluir uma em um pop-up de boas-vindas é uma boa ideia. Além disso, os pop-ups com imagens convertem quase 5% dos visitantes enquanto os sem imagens convertem apenas 2,85%.

Quanto ao texto, “Vamos oficializar” parece um começo de conversa amigável, que evoca uma sensação de agrado. Um estilo de comunicação tão amigável e casual é algo que 57% dos compradores on-line preferem, então esse pop-up de boas-vindas causa a boa primeira impressão.

7. Pop-up de boas-vindas com oferta por tempo limitado

• Site : Pedego Bikes
• Objetivo : Aumentar as vendas de produtos específicos
• Incentivo : Oferta por tempo limitado para atualizar um produto gratuitamente

Além de gerar inscrições por e-mail, os pop-ups de boas-vindas também são ótimos para aumentar a conscientização sobre ofertas e promoções promocionais. Isso é exatamente o que este pop-up de boas-vindas está tentando realizar: direcionar o tráfego para uma página de produto com uma oferta atraente por tempo limitado.

Copywriting é outra grande coisa sobre este pop-up. Mesmo algumas frases aqui estão repletas de palavras poderosas que chamam a atenção: “grátis”, “tempo limitado”, “salvar” e “fins”. Usar essas palavras nas manchetes é uma tática comprovada na qual escritores experientes envolvem os visitantes.

Como adicionar um pop-up de boas-vindas a qualquer site

Você pode criar e adicionar um pop-up de boas-vindas ao seu site com facilidade e rapidez. Para isso, usaremos Wisepops , nossa própria ferramenta pop-up.

Se você preferir um vídeo com um tutorial, use este abaixo. Mas se você quiser um guia passo a passo, está logo abaixo do vídeo.

Então-

Siga estas etapas para criar e adicionar um pop-up de boas-vindas ao seu site sem codificação. Para começar, obtenha uma conta gratuita no Wisepops .

Etapas para criar um pop-up de boas-vindas:

• Etapa 1: criar uma nova campanha
• Etapa 2: escolha uma meta
• Etapa 3: escolha um formato de campanha
• Etapa 4: selecione um modelo pop-up
• Etapa 5: crie seu pop-up de boas-vindas
• Etapa 6: personalizar a janela de agradecimento
• Etapa 7: definir como mostrar seu pop-up
• Etapa 8: publique o pop-up do seu site

Etapa 1: criar uma nova campanha

Vamos criar um pop-up clássico de boas-vindas para lojas online – aquele que promete acesso a ofertas especiais e um desconto como agradecimento por se inscrever. Mas você pode personalizar sua versão no processo da maneira que quiser.

No painel do Wisepops, clique em Criar campanha e escolha Assistente de campanha .

O Assistente de campanha é um recurso útil que o guiará pelo processo de criação da campanha. Portanto, é perfeito para novos usuários.

Etapa 2: escolha uma meta

Depois de acessar o Assistente de campanha , você verá três metas para escolher: aumentar seu público, impulsionar as vendas e coletar feedback.
Clique em Aumente seu público.

Etapa 3: escolha um formato de campanha

Como estamos criando um pop-up de boas-vindas para criar sua lista de e-mail, escolha Newsletter .

Etapa 4: selecione um modelo pop-up

Agora escolhemos como será nosso pop-up de boas-vindas. Nossa biblioteca de modelos oferece algumas boas opções de formatos pop-up pré-criados.

Clique em um modelo para confirmar sua escolha e passar para a próxima etapa.

Vamos com este modelo pop-up de boas-vindas - ele tem um formato familiar que foca a atenção dos visitantes na mensagem.

Etapa 5: crie seu pop-up de boas-vindas

Precisamos tornar este pop-up de boas-vindas verdadeiramente seu—

Isso significa personalizar cores, imagens e texto para que pareça uma parte natural do seu site. Fazer isso é muito fácil graças ao editor de arrastar e soltar - basta clicar em um elemento e alterar.

Primeiro, vamos escrever nosso texto.

Clique no elemento textual para abrir as configurações de edição. Logo acima do pop-up, você os verá (destacado na imagem).

Próximo-

Vamos adicionar uma nova imagem.

Para fazer isso, clique no visual no modelo. Isso iniciará o menu de imagem no lado esquerdo da tela. Lá, clique em Substituir e escolha outra imagem.

Mudei as cores e a imagem clicando nelas e—

Veja como nosso modelo está agora. Parece um pop-up real de uma loja de velas, concorda?

E você pode criar totalmente o mesmo (e ainda melhor!) pop-up.

Para os interessados ​​em replicar esse design, usei:

• Arial para fonte
• #803345 para cores
• Esta foto livre de Castorly Stock para o visual

Etapa 6: personalizar a janela de agradecimento

Uma janela de agradecimento aparece quando um visitante preenche os campos e clica em Sign Me Up . A maioria dos modelos pop-up estão equipados com essa janela porque são usados ​​para confirmar a assinatura, agradecer ao visitante e compartilhar códigos de desconto.

Para iniciar-

Clique na guia Obrigado .

Lá, você verá a janela de agradecimento.

Personalize o design exatamente como você fez para o pop-up de boas-vindas principal. Você pode retornar facilmente ao principal para obter códigos de cores - basta clicar em Main Pop-Up . Além disso, adicione o código de desconto prometido (eu fui com TENOFF).

Veja como ficou minha versão.

Agora, o design do nosso pop-up de boas-vindas está pronto.

A última coisa antes de publicar é definir o pop-up a ser exibido em seu site para novos visitantes. É isso que estamos prestes a fazer.

Etapa 7: definir como mostrar seu pop-up

Vá para Regras de exibição no menu principal.

O Wisepops mostrará seu pop-up de boas-vindas aos visitantes depois que eles passarem oito segundos em seu site. Se você quiser exibi-lo mais cedo, digamos, cinco segundos, basta adicionar seu número preferido no campo Mostrar somente depois .

E a última configuração—

Queremos que apenas nossos novos visitantes vejam este pop-up de boas-vindas. Para garantir isso, escolha Novos visitantes na guia Público .

É isso.

Você acabou de criar um pop-up de boas-vindas de marca e de boa aparência para o seu site para gerar leads e aumentar seu público. Bem feito!

Etapa 8: publique seu pop-up de boas-vindas!

Terminamos de projetar nosso pop-up, então clique em Concluído edição . Você será redirecionado para a janela de visão geral da campanha, onde clicará em Publicar e confirmará.

É isso aí, o pop-up de boas-vindas está ativo no seu site! Parabéns!

Assim que o pop-up começar a receber visualizações e gerar e-mails, você poderá verificar o desempenho no painel do Wisepops.

Dicas de pop-up de boas-vindas

Use essas dicas para transformar seu pop-up de boas-vindas em uma máquina de geração de leads.

1. Oferecer benefícios

Conteúdo novo e útil, descontos, cupons, ofertas exclusivas, frete grátis, acesso antecipado a novos produtos – as empresas adicionam pop-ups de boas-vindas a tudo isso. Se você estiver administrando um negócio online, considere usar um incentivo também.

2. Escreva uma cópia clara

Todos os grandes pop-ups de boas-vindas comunicam claramente uma mensagem envolvente.

Para escrever uma boa cópia:

• Mantenha-o curto e doce. As pessoas precisam receber sua mensagem o mais rápido possível, então tente escrever apenas duas frases (título + mensagem de apoio)
• Seja envolvente e criativo . Use uma linguagem amigável e casual em seu pop-up de boas-vindas, mas não hesite em ser espirituoso ou brincalhão se a voz da sua marca permitir
• Peça para as pessoas agirem. Descreva o que você precisa que seus visitantes façam e seja claro sobre essa ação

3. Faça seu pop-up aparecer com um atraso

As pessoas não gostam de pop-ups que aparecem no momento em que chegam aos sites.

É por isso que considere definir um atraso de pelo menos cinco segundos para seu pop-up de boas-vindas (assim como fizemos no tutorial).

Profissionais de marketing experientes também fazem um truque simples. Eles descobrem o tempo médio que as pessoas gastam em seu site com o Google Analytics e definem o tempo de exibição em cerca de 20% desse valor. Por exemplo, se o tempo médio for de 60 segundos, o pop-up poderá aparecer em 12 segundos (20% de 60 = 12).

4. Adicione um cronômetro de contagem regressiva

Um senso de urgência é um poderoso motivador para comprar: a pesquisa da Wisepops mostra que adicionar um cronômetro de contagem regressiva aumenta a taxa de conversão em 41%.

Para adicionar este elemento no Wisepops: no menu principal, vá para Blocks e escolha Countdown . O cronômetro será adicionado automaticamente ao seu pop-up de boas-vindas.

5. Teste diferentes versões de pop-ups de boas-vindas

Alguns clientes querem encontrar o melhor preço.

Outros tendem a comprar por impulso.

Para descobrir as preferências de seus visitantes (e o que os faz comprar), crie diferentes versões da campanha pop-up de boas-vindas.

No Wisepops, isso significa criar um teste A/B: basicamente, você duplica seu pop-up de boas-vindas clicando em teste AB no painel. Aqui está uma visualização de uma campanha que foi dividida em duas versões dessa maneira.

A divisão facilita a alteração da segunda versão da campanha da maneira que você deseja (tamanho do desconto, contagem regressiva/sem contagem regressiva etc.) e monitora os resultados.

Perguntas frequentes sobre pop-ups de boas-vindas

Embora os pop-ups de boas-vindas sejam populares, muitos proprietários de sites se preocupam com sua eficácia e o impacto na experiência do visitante. É por isso que nesta última seção, responderemos às perguntas mais comuns que as pessoas têm.

Quão eficazes são os pop-ups de boas-vindas?

Os pop-ups de boas-vindas podem converter até 5% dos visitantes.

Um pop-up de boas-vindas prejudicará a experiência dos meus clientes?

Os pop-ups de boas-vindas podem ser irritantes se forem muito genéricos e aparecerem muito rapidamente. Se você criar uma campanha de marca com um valor claro para os visitantes, poderá converter muitos visitantes.

Como um pop-up de boas-vindas afeta o SEO da minha loja?

Se você usar o melhor software pop-up para criar um pop-up de boas-vindas, suas campanhas serão 100% compatíveis com todos os requisitos de SEO.

Para mais dicas e insights sobre pop-ups, dê uma olhada em outros guias no blog Wisepops .