Quem quer uma página de vendas bonita antes do pagamento costuma montar um site em outra ferramenta e colocar lá um botão para o link do checkout. Com o Checkout com Página de Apresentação, a página de vendas e o formulário de compra ficam no mesmo link da EngagED.
O cliente abre o link e vê a apresentação do seu produto: título, vídeo, depoimentos, perguntas frequentes. Quando decidir comprar, clica no botão e a página desce direto até o formulário de pagamento.
⚠️ Atenção: essa funcionalidade está em versão Beta.
Sumário
- O que é o Checkout com Página de Apresentação?
- Como ativar
- Template e cores
- Como a página é organizada
- Contagem regressiva
- Hero (topo da página)
- Seções de conteúdo
- Checkout (formulário de compra)
- Pré-visualização no computador e no celular
- Passo a passo: montando sua primeira página
- Boas práticas
- Pontos de atenção
- Perguntas frequentes
🧩 1. O que é o Checkout com Página de Apresentação?
É uma forma de deixar o seu checkout com cara de página de vendas. Em vez de mostrar só o formulário de compra, o link passa a mostrar, de cima para baixo:
- Contagem regressiva (opcional): uma faixa com relógio para dar senso de urgência.
- Hero: o topo da página, com título, subtítulo, imagem ou vídeo e um botão de chamada.
- Seções: blocos de conteúdo como descrição do produto, galeria de imagens, depoimentos e perguntas frequentes.
- Checkout: o formulário de compra, sempre no final da página.
Tudo é feito dentro da configuração do checkout, sem código e sem ferramenta externa. O formulário de compra continua com tudo o que você já configurou nele, como Opções de Venda, Order Bump e Campos Personalizados.
⚙️ 2. Como ativar
- Acesse o painel administrativo da EngagED em admin.online.engaged.com.br.
- No menu lateral, clique em Comercial e depois em Checkout.
- Clique no checkout que você quer transformar. Se preferir, crie um checkout novo em Criar Checkout.
- Na tela do checkout, clique nos três pontinhos no canto superior direito e selecione Editar.
- Desça a página até a seção Aparência.
- Em Tipo de aparência, escolha Checkout com Página de apresentação.
A outra opção, Apenas Checkout, é o checkout tradicional, sem página de apresentação. Assim que você escolhe a página de apresentação, aparecem as áreas de Template, Preferências da página, Estrutura da página e Pré-visualização.
🎨 3. Template e cores
O Template é o visual pronto da página. Clique em um deles para aplicar:
- Padrão da organização: segue as cores da sua marca, configuradas na aparência da sua conta.
- Temas escuros: Azul meia-noite, Violeta royal, Pôr do sol neon, Black Friday, Vermelho urgência, Natal, Confete, Ameixa e sálvia e Grafite esmeralda.
- Temas claros: Turquesa claro, Areia quente, Azul clean e Rosa suave.
Ao aplicar um template, a EngagED troca as cores, os fundos e o botão da página. O "Padrão da organização" não tem tema próprio: ele usa as cores da aparência da sua organização.
Quando você ativa a página de apresentação pela primeira vez, ela já vem com textos de exemplo, como um título, um subtítulo, três depoimentos e três perguntas frequentes. Eles servem só para você ver como a página fica. Troque todos pelos seus textos antes de salvar.
💡 Dica: os templates "Black Friday" e "Natal" já vêm prontos para essas campanhas. Troque o template na data e volte para o seu padrão depois.
Em Preferências da página, ligue Personalizar tema se quiser ajustar as cores do template escolhido:
- Cor primária: a cor dos botões, links e destaques. Escolha uma das cores prontas ou clique em "Cor personalizada" para usar a cor exata da sua marca.
- Tons de superfície: os tons neutros usados nos fundos, bordas e textos.
- Modo de cor do tema: "Apenas claro" ou "Apenas escuro" deixam a página sempre daquele jeito. No padrão do sistema, a página segue o modo claro ou escuro do celular ou computador de quem está vendo.
🧱 4. Como a página é organizada
Em Estrutura da página, os blocos aparecem na mesma ordem em que o cliente vai ver. Clique na setinha ao lado de cada bloco para abrir as configurações dele:
- Fixado no topo: a Contagem regressiva, quando está configurada para acompanhar a rolagem.
- Hero: o topo da página.
- Seções: os blocos de conteúdo entre o Hero e o checkout. O card mostra quantas seções existem (por exemplo, "Total de Seções: 3"). Use + Adicionar seção para incluir mais.
- Checkout: o formulário de compra, sempre no fim da página.
⏱️ 5. Contagem regressiva
É uma faixa com relógio que mostra quanto tempo falta para a oferta acabar. Serve para dar um empurrão em quem está em dúvida.
Contagem
- Tipo "Tempo em minutos": informe quantos minutos. A contagem começa quando cada visitante abre a página, então cada pessoa vê o próprio relógio.
- Tipo "Data final": escolha a data e a hora em que a oferta acaba. A contagem termina nesse momento para todos os visitantes ao mesmo tempo. Se você escolher uma data que já passou, a EngagED ajusta sozinha para 1 hora a partir de agora.
- Fixa no topo da página: ligada, a faixa acompanha a rolagem até o fim do checkout. Desligada, ela fica parada na posição em que estiver na lista de seções.
Textos
- Texto da contagem ativa: a mensagem que aparece enquanto o tempo corre, como "Oferta por tempo limitado!". Obrigatório, até 120 caracteres.
- Texto da contagem finalizada: opcional, até 120 caracteres. Aparece quando o tempo acaba. Se ficar em branco, a faixa continua com o texto da contagem ativa.
Aparência
- Cor da faixa: vermelha por padrão, para chamar atenção.
- Cor do texto: se você não escolher, o texto fica branco ou preto, o que der mais contraste com a faixa.
A página pode ter só uma contagem regressiva. Para tirar a contagem, clique na lixeira ao lado do bloco. Para colocar de volta, use + Adicionar seção e escolha "Contagem regressiva".
🏠 6. Hero (topo da página)
O Hero é a primeira coisa que o cliente vê. É onde você coloca a promessa principal do produto.
Layout
Escolha como o título e a mídia vão aparecer:
- Título com imagem à direita
- Título com imagem à esquerda
- Título grande com imagem
- Título com vídeo à direita
- Título com vídeo à esquerda
- Título grande com vídeo
Texto
- Título: obrigatório, até 100 caracteres, nos tamanhos pequeno, médio ou grande.
- Subtítulo: opcional, até 300 caracteres, nos mesmos três tamanhos.
Vídeo ou imagem
-
escolha um vídeo da sua biblioteca, envie um novo ou use um link do YouTube ou do Vimeo.
Aparência
- Cor do texto: no automático, a cor se ajusta para ficar legível sobre o fundo.
- Fundo do hero: transparente, padrão do tema, cor sólida, gradiente, imagem ou vídeo. No gradiente, você escolhe a cor inicial, a cor final e a direção (horizontal ou vertical). No padrão do tema, o hero segue as cores do checkout.
- Fundo fixo ao rolar: com fundo de imagem, a imagem fica parada enquanto a página rola por cima, o que dá sensação de profundidade.
- Efeito de vidro: coloca um véu fosco entre o fundo e o conteúdo, para o texto ficar mais fácil de ler sobre uma imagem ou vídeo. Você ajusta o desfoque, a transparência e o tom do véu (claro ou escuro).
Botão de chamada (CTA)
Ligue "Mostrar botão de chamada (CTA)" e configure:
- Texto do botão: obrigatório, até 60 caracteres. Curto e direto, como "Quero começar". Ao clicar, a página rola até o checkout.
- Posição do botão: depois da imagem ou do vídeo, ou antes deles, logo abaixo do subtítulo.
- Cor do botão: usa a cor primária do tema, mas você pode trocar.
- Tamanho: pequeno, médio ou grande.
- Estilo: Preenchido.
- Estilo: Contorno.
- Estilo: Texto.
- ou só texto, com ou sem bordas arredondadas.
- Animação do botão: nenhuma.
- Animação do botão: Brilho, Pulsar, Sticky.
📄 7. Seções de conteúdo
As seções ficam entre o Hero e o checkout. Clique em + Adicionar seção e escolha o tipo:
- Texto: título, parágrafo, imagem e botão de chamada.
- Galeria de imagens: imagens em grade ou carrossel, que abrem em tela cheia ao clicar.
- Depoimentos: prova social com frase, nome e foto dos seus alunos.
- Perguntas frequentes: perguntas e respostas em formato de acordeão (a resposta abre ao clicar na pergunta).
- Linha de conteúdo: conteúdo em colunas, lado a lado.
- HTML personalizado: para colar um HTML seu, com estilos próprios.
- Contagem regressiva: a faixa com relógio. Só pode aparecer uma vez na página, por isso fica indisponível no menu quando a página já tem uma.
Você pode adicionar mais de uma seção do mesmo tipo, com exceção da contagem regressiva. Veja as opções de cada uma:
Texto
Use para descrever o produto: o que a pessoa aprende, em quanto tempo e por que vale a pena começar agora.
- Estilo do texto: simples (texto corrido) ou card (com borda).
- Título: opcional, até 200 caracteres, em seis tamanhos (de extra pequeno a enorme) e alinhado à esquerda, no centro ou à direita.
- Parágrafo: opcional, até 2.000 caracteres, com negrito, itálico, sublinhado, listas, alinhamento e tamanho de fonte.
- Imagem: opcional, exibida abaixo do parágrafo. Recomendado 1280x720px, em JPG, PNG ou WEBP de até 5 MB.
- No estilo card, você também escolhe bordas arredondadas, sombra e se quer mostrar um botão de chamada.
Depoimentos
Mostre o que os seus alunos dizem. Você pode ter de 1 a 12 depoimentos e arrastar para mudar a ordem.
- Título da seção: opcional, como "O que dizem os alunos".
- Em cada depoimento: a frase (obrigatória, até 300 caracteres), o nome (obrigatório, até 80), o cargo ou descrição (opcional, até 80), a nota de 1 a 5 estrelas (opcional) e uma foto quadrada (opcional, recomendado 400x400px). Sem foto, aparecem as iniciais do nome.
- Cores dos cards: por padrão seguem o tema. Você pode trocar a cor do fundo e a do texto.
- Exibir como carrossel animado: os depoimentos passam sozinhos na tela.
- Efeito 3D nos cards: os cards inclinam levemente quando o mouse passa por cima.
Perguntas frequentes
Responda as dúvidas mais comuns antes que o cliente precise chamar sua equipe. Você pode ter de 1 a 50 perguntas e arrastar para reordenar.
- Título da seção: opcional, como "Perguntas frequentes".
- Pergunta: obrigatória, até 200 caracteres.
- Resposta: obrigatória, até 2.000 caracteres, com formatação.
💡 Dica: use as perguntas frequentes para responder o que mais aparece no seu atendimento, como formas de pagamento, quando o acesso é liberado e se o curso serve para iniciantes.
Galeria de imagens
Mostre fotos do curso, do material, de eventos ou dos bastidores.
- Layout da galeria: carrossel animado ou grade. A grade se ajusta sozinha à quantidade de imagens.
- Título da seção: opcional.
- Imagens: pelo menos uma. O contador ao lado mostra quantas você já colocou e qual é o limite. Arraste para mudar a ordem. Cada nova imagem entra no fim da galeria.
- Texto alternativo: uma descrição curta de cada imagem. Ela ajuda quem usa leitor de tela e faz a imagem aparecer na busca de imagens do Google.
- Na página publicada, o cliente clica na imagem e ela abre em tela cheia.
Linha de conteúdo
Coloca conteúdos lado a lado, em colunas. Por exemplo, um texto de um lado e uma galeria do outro.
- Colunas: 1, 2, 3 ou 4 colunas iguais, ou 2 colunas com a maior à esquerda ou a maior à direita.
- Conteúdos: em cada coluna, clique em "Adicionar conteúdo" e escolha texto, depoimentos, perguntas frequentes ou galeria. Também dá para escolher "Espaço vazio", uma coluna vazia de propósito, só para empurrar o conteúdo para o lado.
- Cor de fundo da linha: pinta a faixa inteira atrás da linha, de ponta a ponta da página.
- Espaçamento vertical: o respiro acima e abaixo da linha.
- Espaçamento horizontal: a distância entre as colunas. No celular, as colunas ficam uma embaixo da outra, e esse espaçamento não se aplica.
- Alinhamento vertical: topo, centro ou base, para quando as colunas têm alturas diferentes.
Se você reduzir o número de colunas, o conteúdo das colunas removidas é descartado. Se remover a linha, as seções das colunas voltam para a lista. Em todos os casos, nada é definitivo até você salvar o checkout.
HTML personalizado
Para quem quer colocar um bloco feito sob medida, com código HTML próprio.
- Título interno: só serve para você identificar a seção na lista. Não aparece na página.
- HTML: cole o código e veja o resultado na pré-visualização ao lado. Os estilos escritos dentro das tags (estilos inline) são mantidos. Scripts são removidos ao salvar.
- O HTML pode ter até 20.000 caracteres depois dessa limpeza.
🛒 8. Checkout (formulário de compra)
O último bloco é o próprio formulário de compra. Aqui você ajusta o visual dele:
- Título e subtítulo do checkout: ligue "Adicionar título e subtítulo" para mostrar um texto no topo do formulário. Um bom uso é listar tudo o que o cliente leva na compra.
- Imagem do checkout: ligue "Adicionar imagem personalizada". Recomendado 640x360px.
- Cor de fundo do checkout: transparente, padrão do tema, cor sólida ou gradiente. A cor pinta a faixa inteira atrás do formulário.
- Fonte: vale para o checkout e para toda a página de apresentação.
- Animação do botão de finalizar compra: nenhuma, brilho, pulsar ou sticky.
- Animação em Order Bumps: as mesmas opções, para destacar as ofertas extras do checkout.
Os campos do formulário, as opções de venda, os order bumps e as formas de pagamento continuam vindo das outras configurações do checkout. A página de apresentação só muda o visual.
👀 9. Pré-visualização no computador e no celular
Ao lado da estrutura, a Pré-visualização mostra como a página está ficando enquanto você edita. Role dentro dela para ver a página inteira, do Hero até o formulário de compra.
- Desktop: como a página aparece no computador. Os depoimentos ficam lado a lado.
- Mobile: como a página aparece no celular. Os blocos ficam um embaixo do outro.
- Tela cheia: o ícone ao lado de "Mobile" abre a pré-visualização maior.
Quando terminar, clique em Salvar para publicar as mudanças. Pronto! Seu checkout agora tem uma página de apresentação. ✅
🚀 10. Passo a passo: montando sua primeira página
Se é a primeira vez, siga esta ordem para não se perder:
- Escolha Checkout com Página de apresentação em Tipo de aparência.
- Escolha um template. Comece pelo "Padrão da organização" para usar as cores da sua marca.
- Monte o Hero: escreva o título com a principal promessa do curso, um subtítulo curto, coloque o vídeo de apresentação e ligue o botão de chamada.
- Adicione uma seção de Texto explicando o que o aluno vai aprender.
- Adicione Depoimentos de alunos reais.
- Adicione as Perguntas frequentes.
- Se tiver uma oferta com prazo, configure a Contagem regressiva.
- Troque todos os textos de exemplo que vieram com o template pelos seus.
- Confira a página na Pré-visualização, no Desktop e no Mobile.
- Clique em Salvar.
💡 11. Boas práticas
- No título do Hero, escreva o resultado que o aluno vai alcançar. O nome do curso sozinho diz pouco para quem ainda não conhece você.
- Use um texto de botão que diga o que acontece ao clicar, como "Quero minha vaga" ou "Quero começar".
- Siga a ordem que responde as dúvidas do cliente: o que é, o que ele leva, quem já fez e aprovou, as dúvidas comuns e, por fim, o formulário de compra.
- Use depoimentos de alunos de verdade, com nome e, se possível, foto. Depoimento inventado tira a confiança na página.
- Use a contagem regressiva só quando a oferta tem prazo de verdade. Se a contagem zera e o preço continua o mesmo, o cliente percebe.
- Sempre confira o Mobile antes de divulgar.
📌 12. Pontos de atenção
- A funcionalidade está em Beta. Revise a página no Desktop e no Mobile antes de divulgar o link.
- As mudanças só valem para o cliente depois que você clica em Salvar.
- A pré-visualização mostra a página de apresentação. No checkout publicado, ela aparece acima do formulário de compra.
- A página só pode ter uma contagem regressiva.
- Vídeos do YouTube precisam estar como "Não listado" ou "Público". Vídeos privados não aparecem para o cliente.
- Para voltar ao checkout tradicional, escolha Apenas Checkout em Tipo de aparência e salve.
❓ 13. Perguntas frequentes
Preciso de outra ferramenta para criar a página de vendas?
Não. Tudo é feito na configuração do checkout, na seção Aparência, sem código.
A contagem regressiva é obrigatória?
Não. Se não quiser, exclua o bloco pela lixeira ao lado dele.
Posso usar vídeo do YouTube ou do Vimeo?
Sim. No Hero, você pode escolher um vídeo da sua biblioteca, enviar um novo ou colar um link do YouTube ou do Vimeo.
O que acontece quando o cliente clica no botão do Hero?
A página rola até o formulário de compra, no fim da página.
Posso colocar a mesma seção mais de uma vez?
Sim, com exceção da contagem regressiva, que só pode aparecer uma vez.
A página de apresentação muda o preço ou as formas de pagamento?
Não. Preço, opções de venda, order bumps e formas de pagamento continuam vindo das outras configurações do checkout. A página de apresentação só muda o visual.
Consigo ver como fica no celular antes de salvar?
Sim. Na Pré-visualização, clique em Mobile.
Pronto, agora você já pode transformar seus checkouts em páginas de vendas completas. 🚀
Ficou com alguma dúvida? Entre em contato com nossa equipe de suporte pelos canais oficiais:
1) 📩 Email: suporte@engaged.com.br
2) 💬 Chat ao vivo dentro do admin
3) 🟢 Whatsapp: (41) 99960-3401