Construtores Foto Certa
Gere o código dos componentes do Prosite preenchendo os parâmetros. Os valores ficam salvos neste navegador.
Slideshow de fotos — gera o código de uma apresentação de imagens para colar em um componente HTML de qualquer página. Aceita fotos horizontais e verticais juntas (a foto inteira aparece sobre um fundo desfocado dela mesma), com setas de navegação, legenda individual por foto, bolinhas indicadoras, looping automático e três transições à escolha (fade, deslizar ou zoom). Ideal para mostrar ensaios anteriores nas páginas de campanha.
A prévia do slideshow aparece aqui. Adicione imagens e clique em "Atualizar prévia".
Código para o componente HTML Copiado!
Instrução de uso do código gerado
Onde colar: em um componente HTML da página desejada, no editor do Prosite. Cole o código inteiro substituindo o conteúdo do componente.
Pré-requisitos: nenhum ID Html ou CSS extra é necessário — o código é autocontido. Apenas confira que os links das imagens são públicos (storage da Alboom) e, se a galeria de origem for republicada, atualize os links aqui e gere novamente.
Depois de colar: salve, publique e confira na página publicada (o editor pode se comportar diferente). Se o slideshow aparecer cortado, aumente a altura do componente no editor.
Captação de leads via WhatsApp — gera o código completo da Tag Body da página de campanha: um botão flutuante (WhatsApp, balão neutro ou a coruja da marca) que abre um pop-up pedindo nome e recado do visitante e envia a mensagem formatada para o seu WhatsApp, identificada com o código de atendimento da página. Inclui modo de abertura automática, efeitos de atenção no botão, paleta de cores e textos totalmente customizáveis — e, opcionalmente, a âncora inteligente que faz o botão da página rolar até o calendário dentro do iframe (com plano B de rolagem suave).
Código para a Tag Body Copiado!
Instrução de uso do código gerado
Onde colar: no campo Tag Body da página hospedeira (configurações da página no Prosite). Substitua todo o conteúdo do campo — não cole por cima do que já existe, para não duplicar o botão flutuante.
Pré-requisitos no Prosite (só se a âncora estiver incluída): 1) o botão/link da página (ex.: o do hero) deve ter a URL igual à âncora configurada (ex.: #reserva); 2) a coluna que contém o componente HTML do iframe da página intermediária deve ter, na aba Avançado, o campo ID Html preenchido com o nome da âncora sem o # (ex.: reserva). O botão flutuante e o pop-up não exigem nenhuma configuração extra.
Depois de colar: salve, publique e teste na página publicada: botão da coruja único no canto, pop-up abrindo e enviando ao WhatsApp, e clique do hero rolando até o calendário.
Agendamento TidyCal — gera o código do calendário de agendamento com expansão e recolhimento automáticos quando o formulário de reserva abre e fecha (sem barra de rolagem interna no modal), com alturas calibráveis separadamente para computador e celular. Suporta as duas arquiteturas: componente direto na página final, ou página intermediária embutida por iframe na hospedeira — neste caso gera as três peças necessárias (componente do TidyCal, Tag Body da intermediária e iframe da hospedeira).
1. Componente HTML do TidyCal Copiado!
Instrução de uso do código gerado
Modo "Componente direto na página final": cole o código 1 em um componente HTML da própria página onde o calendário deve aparecer. Nada mais é necessário.
Modo "Página intermediária embutida por iframe" (3 códigos): 1) código 1 → componente HTML da página intermediária; 2) código 2 → campo Tag Body da página intermediária; 3) código 3 → componente HTML da página hospedeira (é o iframe que embute a intermediária).
Pré-requisitos no Prosite: o caminho do booking type deve existir no TidyCal; se for usar âncora de botão até o calendário (gerada na aba Captação de leads), a coluna do componente do código 3 deve ter o ID Html da âncora sem o # (ex.: reserva) na aba Avançado.
Calibragem das alturas: abra a página publicada, escolha data e horário e confira se o formulário abre inteiro, sem barra de rolagem interna — no computador e no celular. Se cortar, aumente a altura correspondente (desktop ou mobile) e gere novamente.
Checkout PayPal — gera um carrinho de pagamento para colar em um componente HTML: um produto/serviço com itens opcionais (seleção única ou múltipla, configurável), cupons de desconto (percentual sobre o produto, percentual sobre o total ou valor fixo, com validade opcional), largura ajustável, total calculado automaticamente e os botões oficiais do PayPal para concluir o pagamento — incluindo cartão sem login e parcelamento, conforme sua conta. Usa apenas o Client ID público da sua conta Business (nenhum segredo vai no código) e identifica a transação com o código do pedido e o cupom usado para conciliação no painel do PayPal.
Código para o componente HTML Copiado!
Instrução de uso do código gerado
Onde colar: em um componente HTML da página de venda, substituindo o conteúdo do componente.
Pré-requisito — obter o Client ID (uma vez só): acesse developer.paypal.com logado na sua conta Business → Apps & Credentials → ambiente Live → Create App (qualquer nome) → copie o Client ID e cole no campo acima. O Client ID é público por definição e pode ir no código sem risco; o Secret da conta não é usado e não deve ser colocado em lugar nenhum.
Sobre o pagamento: os botões oficiais do PayPal cobram o total (produto + opcionais marcados no momento do clique). O botão de cartão de débito/crédito permite pagar sem login no PayPal quando disponível para o comprador — quais botões aparecem é decisão do PayPal. A transação chega no seu painel com o código do pedido.
Sobre os cupons: a validação (existência e validade) acontece no código da página, e o desconto entra no valor cobrado pelo PayPal. Como em todo carrinho desse tipo, os cupons ficam visíveis no código-fonte para quem inspecionar — use códigos que possam ser públicos, como os de campanhas.
Depois de colar: salve, publique e faça um pagamento de teste de valor baixo na página publicada (dá para reembolsar depois pelo painel do PayPal). Confira em especial se a janela do PayPal abre normalmente a partir da página — e teste também no celular.
Checkout Pix — o mesmo carrinho do Checkout PayPal (opcionais em escolha única ou múltipla, cupons de desconto, largura ajustável), mas com cobrança via Pix estático padrão Banco Central: ao confirmar o pedido, o código gera na hora o QR Code e o Pix Copia e Cola com o valor total exato (descontos inclusos), direto no navegador — sem servidor e sem nenhum segredo (chave Pix é pública por natureza). Como Pix estático não tem confirmação automática, o carrinho pode incluir o botão "Já paguei — avisar no WhatsApp", que abre o WhatsApp do cliente com mensagem pronta para você, com produto, código e valor, para conferência com o extrato.
Código para o componente HTML Copiado!
Instrução de uso do código gerado
Onde colar: em um componente HTML da página de venda, substituindo o conteúdo do componente.
Pré-requisitos: conferir a chave Pix, o nome do recebedor e a cidade — são esses dados que aparecem no app do banco do cliente na hora de pagar. O código Pix segue o padrão do Banco Central: acentos são removidos automaticamente (aparece "Vitoria", "Foto Certa") e o identificador txid usa apenas letras e números do código do pedido. O QR Code é desenhado por uma biblioteca carregada da internet (cdnjs); se ela falhar, o Pix Copia e Cola continua funcionando.
Como funciona a confirmação: Pix estático não tem aviso automático — o valor cai direto na sua conta. O cliente paga pelo QR ou Copia e Cola e, com o botão "Já paguei", abre o WhatsApp dele com mensagem pronta para você (produto, código, opcional, cupom e valor), podendo anexar o comprovante na conversa. Você confere com o extrato e confirma o pedido.
Depois de colar: salve, publique e faça um teste real: gere um Pix de valor baixo (mude o preço base para R$ 1 numa página de teste), pague você mesmo e confira o valor, o nome exibido no app do banco e a mensagem do WhatsApp. Teste também trocar o opcional depois de gerar o Pix — o QR antigo some e precisa gerar de novo, de propósito, para nunca haver QR com valor desatualizado.
Checkout PayPal + Pix — o carrinho completo com as duas formas de pagamento juntas: o cliente monta o pedido (opcionais em escolha única ou múltipla, cupom de desconto) e escolhe como pagar — pelos botões oficiais do PayPal (cartão sem login e parcelamento, com confirmação na tela) ou pelo Pix (QR Code + Copia e Cola gerados na hora com o total exato, desconto exclusivo Pix configurável para incentivar essa forma, e aviso de pagamento via WhatsApp). A moeda é fixa em reais (BRL), pois Pix só existe em reais. Nenhum segredo vai no código: apenas o Client ID público do PayPal e a chave Pix, que é pública por natureza.
Código para o componente HTML Copiado!
Instrução de uso do código gerado
Onde colar: em um componente HTML da página de venda, substituindo o conteúdo do componente. Use este construtor no lugar dos checkouts individuais (não cole dois carrinhos na mesma página).
Pré-requisitos: os mesmos dos checkouts individuais — Client ID do PayPal (público, de developer.paypal.com) e os dados Pix corretos (chave, nome com máx. 25 caracteres e cidade com máx. 15; acentos são removidos automaticamente no código Pix). O QR Code usa biblioteca do cdnjs; se ela falhar, o Pix Copia e Cola continua funcionando.
Como funciona cada pagamento: pelos botões do PayPal, a cobrança é do total com desconto e a confirmação aparece na tela (e no seu painel PayPal, com código e cupom). Pelo Pix, o QR e o Copia e Cola são gerados com o total exato do momento; se o cliente alterar o pedido depois, o Pix some e precisa ser gerado de novo (proteção contra valor desatualizado). A confirmação do Pix é manual: botão "Já paguei" abre o WhatsApp do cliente com mensagem pronta para você, e você confere no extrato (o código do pedido vai no txid).
Depois de colar: salve, publique e teste os dois caminhos com valor baixo: um pagamento PayPal (reembolsável pelo painel) e um Pix pago por você mesmo. Teste também no celular.
Ferramenta interna Foto Certa. Novos construtores podem ser adicionados como novas abas.