Construtores Foto Certa

Gere o código dos componentes do Prosite preenchendo os parâmetros. Os valores ficam salvos neste navegador.

Rascunho rascunho
Identidade — quem recebe e quem atende

Preenchido uma vez, vale para todas as abas. O Checkout, o Link de cobrança e a Mini loja leem a chave Pix, o recebedor e o Client ID daqui; o WhatsApp é lido também pela Captação de leads. Não existe segunda cópia — trocar de chave Pix aqui troca em todas, e não há mais como uma aba ficar com a chave antiga.

Onde fica: no armazenamento deste navegador, em chave própria — não acompanha outro computador e some se você limpar os dados do site. No backup em arquivo ela entra só no com dados; o arquivo sem dados sai sem nada disso. No preset geral não entra: um preset repassado a outra pessoa não leva os seus dados de pagamento.

Paleta

A paleta não se aplica sozinha: ela tem botão. Identidade não muda por campanha, aparência muda — e uma campanha pode precisar de cores próprias. Por isso aqui é cópia com origem visível, e não amarração: você escolhe quando levar estas cores para as abas.

Onde cada cor cai: destaque, fundo e texto vão para Checkout, Link de cobrança, Mini loja e Agendamento por pacote — as quatro abas em que esses três campos significam exatamente isso. As duas cores da coruja vão para Captação de leads, Contagem regressiva e Link de cobrança.

O que o botão não encosta: as cores de Bordas com efeito, as cores próprias da Contagem regressiva (fundo, texto, destaque, borda, botão, progresso, urgência) e as da Captação de leads (cabeçalho, card, botão enviar, texto). Medido: são 35 campos de cor no arquivo e só 9 são a mesma coisa — na Leads, c1 é o fundo do cabeçalho e c3 é o botão enviar, não destaque e texto. Amarrar por nome quebraria aquela aba.

Por que isto não é uma aba, e não entra no preset geral

Identidade não muda por campanha; aparência muda. A chave Pix é a mesma no Natal e na Páscoa. O preset geral é por campanha e página — esta configuração fica num nível acima dele, e por isso trocar de preset geral não mexe em nada do que está neste painel.

Consequência boa: um preset geral repassado a outra pessoa não leva a sua chave Pix, o seu Client ID nem o seu WhatsApp. Consequência que sumiu: como a identidade deixou de ser por aba, o aviso de que “a outra página desta campanha tem outro valor para a chave Pix” não pode mais acontecer — não existem mais duas cópias para divergir.

Campanha e página

O nome não se digita: ele vem da campanha mais a página — Natal 2026 · Hospedeira. Com o nome derivado, a ferramenta sabe que as duas páginas pertencem à mesma campanha e pode comparar uma com a outra.

Salvar como preset geral cria um preset novo com o que está na tela agora, e nele todas as abas nascem fora da página. Ligue as que esta página realmente usa: aba esquecida fora some da página e você vê; aba esquecida dentro publica um bloco a mais e você não vê.

Onde fica: no armazenamento deste navegador, como todo o resto — não acompanha outro computador. Apagar um preset geral não mexe em nenhum código já colado no site.

Outros códigos meus

Estes dois campos ficam guardados por página, dentro do preset geral — ao trocar de preset, eles trocam junto. Nunca vêm de outra página: um preset geral criado a partir de outro nasce com os dois vazios, e sair para o Rascunho também os esvazia. É a mesma proteção que faz as abas nascerem fora — só que aqui, sem interruptor, a proteção é não copiar. É o painel consolidado que os usa: no painel à direita das abas, o que estiver aqui aparece primeiro no campo montado, antes dos blocos gerados, separado deles por uma linha de fronteira.

Backup em arquivo

Exportar tudo gera um arquivo .json com os presets gerais, as bibliotecas de presets de todas as abas e o rascunho (o que está na tela). É o backup completo — a configuração desta ferramenta vive só no armazenamento deste navegador, e some se você limpar os dados do site. Exportar este preset geral leva só a campanha e a página selecionadas na barra, para repassar a alguém.

Os dados de contato e pagamento são escolha na hora de exportar, e o nome do arquivo diz qual é: …-com-dados.json ou …-sem-dados.json. Confira o nome antes de enviar o arquivo a alguém — é ele que diz se o número do WhatsApp, a chave Pix e o Client ID do PayPal estão lá dentro.

Importar mostra um resumo antes e pede confirmação — quantos presets são novos, quantos já existem aqui e o que se perde ao substituí-los. Quando o nome já existe, você escolhe entre substituir e importar como cópia. Um arquivo sem dados não apaga os dados que já estão neste navegador: os campos que ele não traz mantêm o valor atual.

Arquivo de outra pessoa é código que vai para a sua página. A ferramenta confere a forma do arquivo e descarta o que não reconhece, dizendo quantos itens foram — mas as caixas “Outros códigos meus” são texto livre e viajam como estão. Se o arquivo não veio de você, leia esse trecho antes de usar o que ele trouxer.

Nesta largura de janela o painel consolidado — onde a Tag Head e a Tag Body ficam prontas para copiar — não cabe ao lado das abas e está no fim desta página.

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 e bolinhas indicadoras (cada uma pode ser desligada), legenda individual por foto, looping automático e três transições à escolha (fade, deslizar ou zoom). Também dá para usar outra proporção de quadro no celular, embaralhar a ordem a cada visita, arrastar para trocar de foto no toque e pausar enquanto o visitante olha. Ideal para mostrar ensaios anteriores nas páginas de campanha. As fotos podem ser cadastradas uma a uma ou importadas de uma galeria inteira do site, colando o link dela e o código-fonte da página.

1 Imagens
Adicionar imagem
Importar de uma galeria ou de uma página

Por que duas colagens: o navegador não deixa esta ferramenta abrir uma página do fotocerta.com.br por conta própria (política de origem cruzada — medido: Failed to fetch). Então você traz a página até aqui. Como fazer: abra a galeria no navegador, aperte Cmd ⌥ U (ver código-fonte), depois Cmd A (selecionar tudo) e Cmd C (copiar). Cole o link no primeiro campo e o código-fonte no segundo. Vale para galerias (/gallery/…), para portfólios (/portfolio/…) e para as páginas comuns do site (/albuns), que servem as fotos de cdn.alboompro.com em vez do storage.

O código-fonte traz mais fotos que a tela: na galeria de exemplo, o navegador tinha 10 fotos carregadas e o código-fonte trazia 46. As fotos entram na mesma ordem em que aparecem na página, inclusive a de capa, que na página não é a primeira. Só entram endereços dos servidores da Alboom: qualquer outro é descartado com a contagem à vista. Numa página comum a mesma foto aparece em vários tamanhos (medido: 51 endereços para 10 fotos em /albuns) — cada foto entra uma vez só, no maior tamanho que a página trouxe, e só as da conta que aparece em mais fotos, que a conferência mostra. Nada do que você cola aqui é salvo — a ferramenta só lê os endereços das fotos e esquece o resto.

Depois de conferir, escolha como as fotos entram na lista. O botão Adicionar à lista, no fim desta caixa, só liga depois da conferência.

Não dá para trazer uma legenda por foto: medido nas duas galerias, todas as fotos compartilham o mesmo texto de descrição, escrito para buscadores. O que serve é o título da galeria — ao conferir, ele aparece preenchido abaixo como sugestão, e você pode trocar. Conferir outra galeria troca a sugestão — a menos que você já tenha digitado a sua, que nunca é sobrescrita.

Sobre o tamanho: medi as 104 fotos das duas galerias de exemplo e o site já entrega tudo com 1200 px de largura (de 157 a 868 KB por foto; metade delas abaixo de 340 KB, e seis acima de 610 KB). Pedir 1400 px ao redimensionador da Alboom funciona, mas só estica a foto de 1200: arquivo maior, nenhum detalhe a mais. Numa página comum a largura varia por foto — de 735 a 1920 px nas 10 medidas em /albuns —, e por isso a ferramenta mede cada foto da página antes de reduzir: a que já tiver 900 px ou menos entra com o endereço original, porque pedir 900 de uma foto de 735 devolvia 900×1224 com 15% mais bytes e nenhum detalhe a mais (medido). A conferência diz quantas ficaram de fora da redução. Fotos de galeria não são medidas: as 46 da galeria de exemplo têm 1200 px de largura, todas, e medi-las custaria 18 MB de download para confirmar um número que não muda nada.

Imagens do slideshow

    Nenhuma imagem ainda. Adicione os links acima, uma a uma, ou traga uma galeria inteira pelo bloco de importação — depois dá para reordenar com as setas.

    2 Configurações da apresentação
    Transição e proporção
    Ritmo e tamanho
    Proporção no celular

    Foto em retrato dentro de um quadro horizontal aparece minúscula no telefone, que é onde a maioria vê. Abaixo da largura de corte o quadro pode ter outra proporção — o resto (transição, ritmo, legendas) continua igual.

    Ordem e controles do visitante

    Esta galeria quase não tem texto na tela: o que está aqui é o que o leitor de tela anuncia para quem não enxerga as fotos, mais a descrição de reserva de uma foto sem legenda. Todos já vêm com exatamente o texto que a galeria usa hoje. A seção nasce recolhida porque quase nunca se mexe nela.

    O que o leitor de tela anuncia

    Onde você escrever {n}, entra o número da foto. Sem {n}, todas as bolinhas são anunciadas igual — e quem navega por teclado deixa de saber para onde cada uma leva.

    Descrição de cada foto

    A legenda cadastrada na seção 1 já é a descrição da foto. Este campo só entra quando a legenda está vazia — e {n} é o número da foto na ordem em que ela aparece.

    4 Biblioteca de presets
    5 Prévia e código gerado
    Largura da prévia:
    Fundo da prévia (não entra no código gerado)

    Só da prévia: o código gerado sai exatamente igual com qualquer fundo escolhido aqui. Ele existe porque o mesmo bloco pode ir para uma landing page com esquema de cores próprio, e cor sobre fundo errado engana — o que parece legível sobre branco pode sumir sobre uma seção escura.

    A prévia do slideshow aparece aqui. Adicione imagens e clique em "Atualizar prévia".

    O que a prévia mostra: o próprio código da caixa ao lado, rodando num quadro isolado — não é um desenho parecido. O que ainda difere da página publicada: a largura é a largura lógica do botão acima (reduzida na tela só para caber na coluna), enquanto na página real vale a janela do visitante; as fotos vêm da internet, então a que demora aqui demora lá; e "arrastar" só se experimenta num aparelho com toque — no computador o quadro reage a mouse, teclado e cliques.

    Código para o componente HTML Copiado!

    Mexeu na lista, a caixa esvazia. Acrescentar, remover, reordenar, importar ou limpar a lista apaga o código já gerado: ele traz as fotos nome por nome, na ordem, então depois de qualquer uma dessas ações ele descreveria uma lista que não existe mais. Clique em Gerar código de novo. Mudar as configurações (intervalo, largura, proporção) não esvazia — ali a caixa envelhece em silêncio, como em todas as abas, e vale gerar de novo antes de copiar.

    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.

    Mais de uma galeria na mesma página: pode. Gere um código para cada conjunto de fotos e cole cada um no seu próprio componente HTML — cada bloco assume a galeria dele, na ordem em que aparecem na página. O único cuidado é a largura máxima e as proporções (a do quadro e a do celular, com a largura de corte), que cada bloco redefine para todas: se as galerias tiverem tamanhos diferentes, vale a última colada. Use os mesmos valores nos dois, ou aceite o valor do último. Setas, bolinhas, ordem aleatória, arrastar e pausar são de cada bloco e não interferem no outro.

    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).

    1 Essenciais e modo de exibição
    Essenciais

    O WhatsApp de destino saiu desta aba. Ele agora é um só para a ferramenta inteira, no painel Identidade, no topo da página.

    Modo de exibição
    2 Botão flutuante
    Estilo do botão flutuante

    Prévia do botão

    Efeito de atenção no botão
    Posição do botão flutuante

    O padrão de 92 px deixa o botão acima da faixa de rodapé do tema. No celular o bloco continua usando 8 px a menos de rodapé e 16 px de margem lateral (contra 22 no computador), como sempre fez — a distância acima é a do computador.

    3 Mensagem, textos e cores do pop-up
    Mensagem enviada no WhatsApp
    Paleta de cores do pop-up
    Textos do pop-up
    4 Cabeçalho do pop-up: coruja, movimento e efeitos
    Coruja no cabeçalho

    A coruja fica ancorada na ponta, fora da área que rola: com o movimento ligado ela emoldura o cabeçalho em vez de passar junto com o texto. A posição vale só para o cabeçalho do pop-up — no botão flutuante a coruja é o ícone inteiro, e ali posição não se aplica.

    Movimento do conteúdo

    As duas opções de alternância da Contagem regressiva não entram aqui: elas exigem duas ou mais mensagens, e o cabeçalho tem um título só. Com a rolagem ligada o título é repetido até cobrir a largura do cabeçalho — é o que evita o vão que a duplicação simples deixa num título curto. O trilho é medido quando o pop-up abre, porque antes disso ele está escondido e mede zero.

    Destaque contínuo (pode combinar)

    São os cinco da Contagem regressiva. Ressalva registrada: num cabeçalho pequeno, pulsar e tremor incomodam mais do que ajudam — ficam disponíveis porque a decisão de usar é da campanha. O separador piscando não tem relógio para separar aqui: ele entra como um ponto (•) piscando antes do título. O degradê anima entre a cor do cabeçalho e a cor do botão enviar. Quem pede menos movimento no sistema não vê nenhum dos cinco.

    5 Horário de atendimento
    Faixa de atendimento

    Vale só para a abertura automática. O botão flutuante continua na tela nos dois casos, e quem clicar nele abre o pop-up a qualquer hora — com o aviso acima quando estiver fora do horário. Ou seja: escolher “não abrir” não deixa de captar recado à noite; só não interrompe quem está lendo a página.

    O que muda fora do horário

    O botão continua abrindo o pop-up e o recado continua indo para o WhatsApp: fora do horário ninguém é impedido de deixar recado, porque a mensagem fica lá esperando. O que muda é a promessa — um aviso aparece no topo do formulário dizendo que a resposta não é imediata. O aviso é recalculado toda vez que o pop-up abre, então uma página deixada aberta na virada das 18h mostra o aviso certo quando o visitante finalmente clicar.

    O fuso é fixo no código. O relógio do visitante pode estar em qualquer lugar (viagem, aparelho desacertado, cliente de fora), e o horário de atendimento é o seu. O bloco gerado converte o instante para o fuso de Brasília (−3, sem horário de verão desde 2019) antes de decidir — mesma escolha que a Contagem regressiva fez para a data de encerramento. Atendendo de outro fuso, troque HORARIO_FUSO no topo do código gerado.

    Faixa que cruza a meia-noite (ex.: das 20:00 às 02:00) é aceita: o dia marcado é o dia em que o expediente começa. Abertura e fechamento iguais são recusados na geração — não há como saber se você quis dizer 24 horas ou zero.

    Sem nenhum dia marcado, ou com um dos horários em branco, o modo fica desligado e o bloco sai sem nada disso — o aviso ao lado diz isso na tela, para o desligamento não ser silencioso.

    6 Pergunta de qualificação
    A pergunta e as opções
    Opções cadastradas

    Nenhuma opção ainda. Sem opções cadastradas a pergunta não aparece no pop-up e nada muda no código gerado — é assim que este recurso fica desligado.

      A resposta é opcional para o visitante: uma pergunta obrigatória custaria leads, e o recado já é o que importa. Escolhendo alguma coisa, a mensagem ganha uma linha entre a página e o código — Interesse *Ensaio gestante*. Sem escolher, essa linha simplesmente não existe e a mensagem sai exatamente como sairia sem o recurso.

      7 Âncora para o calendário
      Âncora do botão da página (iframe)
      Como configurar no Prosite

      1) No botão/link da página (ex.: o do hero), defina a URL exatamente como a âncora ao lado (ex.: #reserva). 2) Na coluna que contém o componente HTML do iframe da página intermediária, aba Avançado, preencha o campo ID Html com o nome da âncora sem o # (ex.: reserva). 3) Ao clicar, o script rola suave até o calendário dentro do iframe; se ele ainda não tiver carregado, a âncora nativa leva ao topo do iframe (plano B, já incluído no código gerado).

      Os textos que o visitante vê estão nas seções 3 e 5. O que sobra aqui é o que ninguém percebeu que estava cravado: o que o leitor de tela anuncia nos dois botões, e as duas costuras da mensagem que chega no seu WhatsApp. Todos já vêm com exatamente o texto que o bloco usa hoje. A seção nasce recolhida porque quase nunca se mexe nela.

      O que o leitor de tela anuncia

      Os dois botões são só desenho na tela (o ícone e o ×). Sem estes textos, quem usa leitor de tela ouve “botão” e nada mais.

      Costuras da mensagem do WhatsApp

      Onde você escrever {cod}, entra o código da campanha da seção 1. Os dois primeiros começam ou terminam com espaço de propósito — é o espaço que separa as palavras na mensagem pronta. Apagar o espaço gruda as palavras.

      9 Biblioteca de presets
      10 Prévia e código gerado
      Largura da prévia:
      Fundo da prévia (não entra no código gerado)

      Só da prévia: o código gerado sai exatamente igual com qualquer fundo escolhido aqui. Ele existe porque o mesmo bloco pode ir para uma landing page com esquema de cores próprio, e cor sobre fundo errado engana — o que parece legível sobre branco pode sumir sobre uma seção escura.

      A prévia roda o próprio código da caixa ao lado, dentro de um quadro isolado — não é um desenho parecido. O que ainda difere da página publicada: o quadro abre o pop-up sozinho (na página real ele espera o clique ou o tempo do modo automático), e por isso o botão flutuante aparece atrás do véu escuro; o foco automático do campo nome e o window.open do botão enviar são neutralizados só dentro do quadro, senão a prévia roubaria o cursor do formulário e abriria o WhatsApp a cada atualização — o código gerado não é afetado; o aviso de horário usa o relógio deste computador convertido para o fuso configurado; a largura é a largura lógica do botão acima (reduzida na tela só para caber na coluna), enquanto na página real vale a janela do visitante; e o quadro não carrega o CSS do tema do site — e a fonte muda a largura do texto, então o que aqui cabe numa linha pode não caber na sua página.

      O quadro é reduzido para caber no painel, e a redução aparece ao lado dos botões acima. Numa escala de 70%, um desalinhamento de 12 pixels vira 8 na tela e passa despercebido — foi assim que um cartão desalinhado chegou à página publicada em 17/09/2026. Quando algo parecer estranho, use Abrir em tamanho real: o mesmo código, sem redução, em outra aba.

      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). Se já houver ali uma versão anterior deste bloco (ela começa com o comentário FOTO CERTA - BOTAO FLUTUANTE), substitua esse bloco inteiro — colar a versão nova por cima da antiga duplica o botão flutuante. O que estiver no campo e for de outro construtor — a barra de contagem regressiva, por exemplo — fica onde está: os blocos convivem no mesmo campo, um embaixo do outro. Apagar o campo inteiro derrubaria a barra de contagem sem nenhum aviso.

      Primeira troca, quando o bloco antigo não tem cabeçalho: versões geradas antes de ago/2026 saíam sem o cometário de identificação, então não há o que procurar. Nesse caso, o bloco antigo é o trecho do WhatsApp inteiro: começa no <style> que abre as regras .fcw- e termina no último </script> desse trecho. Apague dessa abertura até esse fechamento e cole o novo no lugar. O que vier antes ou depois é de outro construtor e fica. Da próxima vez o cabeçalho já estará lá.

      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 automática quando o formulário de reserva abre (sem barra de rolagem interna no modal), de duas formas à escolha: medindo o formulário, para o quadro crescer só o necessário, ou pela altura calibrada, 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 Configuração do calendário
      Agendamento

      Cole o endereço completo, do jeito que o TidyCal mostra — inclusive quando ele está em domínio próprio (ex.: https://agendamento.seudominio.com.br/ensaio-1-hora). Digitar só o caminho também vale: ele vira um endereço em https://tidycal.com/, e o campo se corrige sozinho ao sair dele.

      Antes de gerar: o botão abre numa aba nova exatamente o endereço configurado. É a mesma página que o código embute — se ela não existir aqui, também não vai existir no site publicado. Descobrir agora custa um clique; descobrir depois custa publicar, testar e voltar. Conferir virou obrigação, e não um extra: o domínio deixou de ser fixo, então um erro de digitação no meio dele apontaria o calendário para outro site — e só você sabe qual é o seu.

      É uma troca, e os dois lados foram medidos em 03/09/2026 contra o TidyCal de verdade. Medindo o formulário: o quadro fica com 764 px em repouso e vai para 1662 px quando o formulário abre — exatamente o que ele precisa. O preço é um vão vazio de cerca de 205 px embaixo do calendário em repouso, no computador: a lista de horários do TidyCal rola por dentro, e esta medição conta o conteúdo inteiro dela — então o vão cresce junto com o número de horários. No celular esse preço é de 1 px. Abrindo espaço pela altura calibrada: o quadro fica com 559 px em repouso, sem vão nenhum, mas o formulário é invisível para a medição — quem abre espaço são as duas alturas abaixo, e são elas que precisam caber nele. Se ficarem curtas, aparece barra de rolagem dentro do calendário; se sobrarem, é vão vazio. A altura calibrada é o padrão, e a razão é medida — não cautela. Medir deveria ser melhor, porque dispensa o número escrito à mão e acompanha o formulário se ele crescer. Mas em 03/09/2026 a mesma página foi carregada quatro vezes seguidas e a altura medida foi aplicada em uma delas: nas outras três o quadro ficou nos 700 px iniciais. A biblioteca do próprio TidyCal estava no comando nas quatro, e recebeu as mesmas duas mensagens em todas — ou seja, não é o nosso código competindo com o deles, é a medição por este método que não é confiável. Defeito que aparece em uma carga de quatro é pior que uma altura fixa: funciona quando você testa e falha quando o cliente usa. O campo fica aqui para você experimentar na sua página — se na sua conta ele se mostrar estável, é a escolha melhor.

      O que vale para as duas escolhas, e é bom saber antes: depois que o cliente abre o formulário de reserva, o quadro não encolhe sozinho — o TidyCal não avisa quando o formulário fecha, então nem a medição nem o recolhimento da altura calibrada chegam a acontecer, e o espaço fica até a página ser recarregada. Isso não é desta escolha: já era assim, e é igual nos dois lados. O que muda é quanto fica sobrando — cerca de 1662 px medindo, contra 2350 px pela altura calibrada de fábrica.

      O preset não substitui a calibragem, adianta o ponto de partida. Só o formulário padrão (2350 / 2700) foi medido em produção, na campanha de Natal; os outros dois são esse mesmo par deslocado para menos e para mais, e continuam precisando da conferência na página publicada. Escolher um preset escreve os dois números nos campos abaixo — nada fica escondido. Mexer num deles devolve a marca para ajuste fino na hora, para o rótulo nunca dizer uma coisa e o campo outra. A largura de corte não entra no preset: ela é o tamanho da tela, não o tamanho do formulário.

      O normal é o calendário ocupar a altura natural dele (cerca de 559 px no computador) e crescer só no instante em que o formulário abre. Sempre deixa o quadro na altura calibrada acima o tempo todo: com os 2350 px de fábrica, são quase 1800 px de vão vazio embaixo do calendário em toda visita, mesmo em quem nunca clicar num horário. Ligue apenas se, na sua página publicada, o modal de confirmação do TidyCal aparecer cortado — é o sinal de que o aviso de abertura não está chegando ao bloco. Com o calendário medindo o formulário esta escolha não faz nada, e por isso ela nem aparece: a altura vem medida, e não há espaço calibrado para abrir.

      Arquitetura da página
      2 Página de obrigado — opcional
      Mostrar os dados do agendamento na página de confirmação

      O TidyCal pode redirecionar quem agenda para uma página sua (nas configurações do tipo de agendamento, Redirect to custom page after booking). Esta seção gera duas coisas: o endereço com as variáveis para colar lá, e um script para a Tag Body daquela página, que preenche o texto com os dados do agendamento.

      Os quatro textos de reserva da página de obrigado estão na seção 2. O que sobra aqui são as emendas da data por extenso — as palavrinhas entre o dia, o mês e o horário — e o nome que o leitor de tela dá ao calendário. Todos já vêm com exatamente o texto que o bloco usa hoje. A seção nasce recolhida porque quase nunca se mexe nela.

      Emendas da data por extenso

      Valem nos formatos “12 de outubro de 2026” e “segunda-feira, 12 de outubro de 2026 às 15:00”, escolhidos na seção 2. No formato curto (12/10/2026) e no como o TidyCal mandar não entra nenhuma delas.

      Os três começam e terminam com espaço de propósito — é o espaço que separa as palavras na data pronta. Apagar o espaço gruda “12deoutubro”.

      O que o leitor de tela anuncia

      É o title do quadro que carrega a página intermediária. Quem usa leitor de tela ouve este nome ao chegar no calendário; vazio, ouve só “quadro”.

      4 Biblioteca de presets
      5 Códigos gerados

      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 endereço do agendamento 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: comece pelo tipo de agendamento, que preenche as duas alturas, e confirme na página publicada: escolha data e horário e veja se o formulário abre inteiro, sem barra de rolagem interna — no computador e no celular. Se cortar, aumente a altura correspondente (a marca vira "ajuste fino" sozinha) e gere novamente.

      Os dois botões de teste não geram nada: abrem numa aba nova o endereço que está nos campos — o do agendamento e o da página intermediária. Servem para conferir o endereço antes de publicar. O botão da intermediária só aceita endereço http(s) completo: um caminho começando com barra é resolvido no domínio do site publicado, que não é o desta ferramenta, e abriria a página errada.

      Checkout — carrinho de pagamento completo para colar em um componente HTML. Você escolhe as formas de pagamento (PayPal, Pix ou os dois juntos) e monta o pedido com um ou vários produtos, cada um com seus próprios itens opcionais. Inclui cobrança de sinal (com o saldo na entrega), quantidade por item, resumo copiável do pedido, cupons de desconto, desconto exclusivo para Pix, largura e cores ajustáveis. O PayPal traz cartão sem login e parcelamento conforme sua conta; o Pix gera QR Code e Copia e Cola na hora, com o valor exato, e aviso de pagamento via WhatsApp. Nenhum segredo vai no código: apenas o Client ID público do PayPal e a chave Pix.

      1 Formas de pagamento e identificação
      Como o cliente vai pagar

      O código gerado carrega apenas o necessário para as formas escolhidas. Com Pix ativo, a moeda é fixa em reais (o Pix só existe em BRL); somente com PayPal, você pode escolher a moeda.

      Decide as duas coisas juntas: a ordem em que os meios aparecem no bloco e qual preço fica em destaque. É um campo só de propósito — separados, dava para publicar um Pix em cima com o preço do cartão grande. O outro preço continua à vista, na linha menor, para o cliente nunca ser surpreendido na hora de pagar.

      Cobrança de sinal

      As três respostas aparecem na tela do cliente, logo abaixo das linhas de sinal e saldo e antes dos botões de pagamento — é ali que ele decide. Cada uma só aparece se estiver preenchida: as três em branco não desenham nada. Elas não entram na mensagem do WhatsApp, que é confirmação do que já foi pago.

      Ligado, o PayPal cobra o sinal, o Pix gera o QR do sinal, a mensagem do WhatsApp declara sinal pago e saldo devido, e o carrinho passa a mostrar três linhas: total, sinal agora e saldo na entrega. A ordem da conta é quantidade multiplica → cupom incide sobre o total → o sinal sai do total já com o cupom. Um sinal maior que o total é recusado: o carrinho avisa e não deixa pagar.

      Identificação do pedido

      Vale para as três pontas ao mesmo tempo — não é uma configuração de nenhuma forma de pagamento em particular. É por ele que você reconhece a campanha no painel do PayPal, no extrato do Pix e no WhatsApp de aviso.

      Conta PayPal

      O Client ID saiu desta aba e está no painel Identidade, no topo da página, com a chave Pix, o recebedor e o WhatsApp. É a mesma conta nas quatro abas de pagamento.

      Dados do recebedor (Pix)

      A chave Pix, o nome e a cidade do recebedor saíram desta aba. Eles são os mesmos aqui, no Link de cobrança e na Mini loja, e por isso ficam num lugar só: o painel Identidade, no topo da página.

      Desconto para pagamento via Pix

      Com a cobrança de sinal ligada este campo não vale. O Pix passa a cobrar o sinal, e o desconto do Pix não se aplica sobre o sinal — seria desconto dobrado, porque o sinal já sai de um total que pode ter cupom. O número acima fica guardado, mas não entra no código gerado nem aparece no carrinho enquanto o sinal estiver ligado. Para usar o desconto do Pix, volte a cobrar o valor cheio.

      Com desconto ativo, o carrinho mostra a linha "Pagando via Pix (-10%)" abaixo do total e o Pix é gerado já com o valor reduzido. O PayPal continua cobrando o total sem esse desconto — por isso os dois números ficam à vista. Qual deles aparece maior, e qual meio vem primeiro, é o meio prioritário da seção 1; o separador acompanha a escolha.

      Aviso de pagamento Pix via WhatsApp

      O número de destino saiu desta aba — é o WhatsApp do painel Identidade, o mesmo que a Captação de leads, o Link de cobrança e a Mini loja usam.

      Depois do pagamento aprovado: levar o cliente a outra página

      Com o endereço preenchido, as duas variáveis saem no código mesmo com a chave em "não levar". Elas ficam no topo do bloco, inertes, esperando um true: assim você liga e desliga o upsell direto na página publicada, trocando UPSELL_ATIVO, sem voltar aqui e sem recolar nada. Com o endereço vazio nada disso é escrito. Endereço vazio com a chave em "sim, levar" é recusado na hora de gerar — ligado sem destino não faz nada e parece que faz.

      São aceitos uma âncora (#oferta), um caminho do site (/oferta-especial) ou um endereço http(s) inteiro. É a mesma regra do botão de ação da Contagem regressiva.

      No PayPal o cliente é levado assim que o pagamento é aprovado — houve confirmação de verdade. No Pix não existe aviso nenhum para a página quando o dinheiro cai, então quem leva é o botão "Já paguei", e quem clica nele pode ainda não ter pago. Se a sua oferta depende do primeiro pagamento estar feito, isso é decisão da campanha, não do código.

      2 Produtos e itens opcionais
      Cadastrar produto

      Cadastre um ou vários produtos; cada um pode ter seus próprios itens opcionais. Com um único produto, o carrinho o exibe direto (sem seletor), como uma compra simples.

      O SKU é o seu código de produto, e ele vai na coluna “ID do produto” do relatório do PayPal — uma linha por produto e uma por opcional. Ele não é o código do pedido, que continua identificando o pedido inteiro no campo de conciliação — são dois campos com papéis diferentes. Em branco, a linha sai sem o campo — nunca com o código do pedido. Dois itens com o mesmo SKU são recusados na hora de gerar: repetido, ele não identifica nada. Aceita letras, números, hífen e ponto, até 127 caracteres.

        Nenhum opcional neste produto.

        A descrição de cada opcional é opcional e aparece só na hora de escolher, em cinza e menor, embaixo do nome — como a descrição curta do produto. No carrinho continuam só o nome e o valor, para o cliente conferir a conta sem texto repetido pelo meio. Texto longo quebra em mais linhas e nunca é cortado: quem controla o tamanho é você, escrevendo menos.

        Produtos do carrinho

          Nenhum produto cadastrado ainda. Use o formulário ao lado.

          Vale para todos os itens vendidos por quantidade. O seletor vai de 0 até esse número, e 0 equivale a não escolher o item: ele sai da conta, do resumo e da mensagem do WhatsApp. A quantidade do produto e a do opcional são independentes — dois ensaios com um álbum somam dois ensaios e um álbum, não dois álbuns.

          Cupons de desconto

          O segundo campo é a validade (opcional — vale até o fim do dia; vazio = sem validade). O terceiro é o valor mínimo do pedido para este cupom valer — vazio = sem mínimo. A comparação é com o subtotal, antes do desconto do próprio cupom e antes do desconto do Pix; e se o cliente tirar itens e o pedido descer abaixo do mínimo, o cupom sai sozinho, com aviso na tela.

            Nenhum cupom. O campo de cupom não aparecerá no carrinho.

            3 Textos e aparência
            Textos do carrinho
            Resumo copiável do pedido

            O Pix estático não confirma pagamento — a conferência é pelo extrato. O resumo sai no fim do carrinho, com um botão de copiar, e traz produtos, opcionais (com quantidade quando houver), cupom, subtotal, desconto, total e — com sinal ligado — sinal e saldo, tudo abaixo do código do pedido. O cliente cola no WhatsApp ou no e-mail e você concilia com o extrato sem redigitar nada.

            Aparência do carrinho

            Todos os campos desta seção já vêm com exatamente o texto que o carrinho usa hoje — mexer neles muda só o que o cliente lê, nunca uma conta. A seção nasce recolhida porque são dezenas de campos que quase nunca se mexe; o uso diário está nas seções acima.

            Cupom de desconto

            As duas frases acima só aparecem em cupom que tenha valor mínimo do pedido (seção 2). Onde você escrever {valor}, entra o mínimo daquele cupom, já na moeda do bloco. São duas porque são dois momentos: a primeira responde por que não aplicou; a segunda, por que o desconto que eu já tinha sumiu.

            Onde você escrever {codigo} na linha do desconto, entra o código do cupom aplicado. Sem {codigo}, o código não aparece — a frase sai como você escreveu.

            Itens e recusas do pedido

            As três últimas só aparecem com a cobrança de sinal ligada. Elas explicam por que o pagamento está travado: reescrevê-las é livre, mas quem as lê está sem conseguir pagar — diga o que fazer.

            Pagamento pelo Pix

            O separador de fábrica é neutro — o mesmo OU das outras três abas de pagamento —, então ele não muda quando você troca o meio prioritário (seção 1). Se você escrever uma frase que aponta para um lado (“ou pague com cartão”), confira-a ao trocar o meio prioritário: a ferramenta não reescreve texto seu. Onde houver {pct} no segundo campo entra o percentual do desconto.

            Este aviso aparece dentro da área do Pix, logo acima do botão “Já paguei” — que é onde o cliente está olhando na hora de pagar. O Pix estático não confirma nada sozinho: sem esta frase o cliente paga, a tela não muda, e ele pode sair achando que já está confirmado. Ele não é emitido quando o botão “Já paguei” está desligado, para não mandar tocar num botão que não existe.

            Onde você escrever {pct}, entra o percentual de desconto do Pix — nas duas frases acima que o usam. Sem {pct}, o número não aparece.

            Resumo copiável
            Aviso pelo WhatsApp (botão “Já paguei”)

            Marcadores: {cod} o código do pedido, {codigo} o código do cupom, {pct} o percentual do Pix e {valor} o valor já formatado. O *asterisco* é o negrito do WhatsApp.

            5 Biblioteca de presets
            6 Prévia e código gerado
            Ver como:
            Fundo da prévia (não entra no código gerado)

            Só da prévia: o código gerado sai exatamente igual com qualquer fundo escolhido aqui. Ele existe porque o mesmo bloco pode ir para uma landing page com esquema de cores próprio, e cor sobre fundo errado engana — o que parece legível sobre branco pode sumir sobre uma seção escura.

            A prévia roda o código gerado de verdade: é o mesmo bloco que sai na saída ao lado, executando dentro de um quadro isolado — dá para marcar produtos, mudar quantidade, aplicar cupom, gerar o Pix e ler o Copia e Cola. Ela também passa pelas mesmas recusas do botão "Gerar código": enquanto a configuração for recusada, o quadro mostra a recusa e o motivo, nunca um carrinho.

            O que a prévia prova sobre o PayPal: o botão é um desenho, mas logo abaixo dele a prévia mostra o valor que iria na ordem e a decisão do clique (segue para o PayPal ou recusa, com o motivo) — os dois medidos chamando o createOrder e o onClick do próprio bloco, a cada mudança do carrinho. É por isso que o valor do sinal e as recusas do lado PayPal são verificáveis aqui sem baixar o SDK e sem mandar seu Client ID para fora.

            O que ela ainda não prova: o que depende da resposta do PayPal — a janela de pagamento, a captura e as mensagens de sucesso e de erro que vêm dela; o QR Code é real, mas depende da biblioteca do cdnjs (sem internet ele some e só o Copia e Cola aparece); o quadro não carrega o CSS do tema do site; e o botão "Já paguei" não abre o WhatsApp aqui — o quadro desliga a abertura de abas, e avisa em vermelho se não conseguir desligar. Com o upsell ligado, porém, clicar em “Já paguei” leva a prévia para a sua página de upsell — exatamente como a página publicada faria. O quadro não consegue desligar isso: o endereço da página é imutável no navegador (medido em 13/09/2026 — trocar location, location.href ou location.assign lança erro, e a troca direta falha em silêncio), e desligar por conta própria só seria possível mudando o código gerado, que é justamente o que a prévia não pode fazer. Mexer em qualquer campo remonta a 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 de venda, substituindo o conteúdo do componente. Não cole dois carrinhos na mesma página.

            Pré-requisitos: para PayPal, o Client ID (público) da sua conta Business em developer.paypal.com — e, se quiser parcelamento, ative-o no painel do PayPal. Para Pix, conferir chave, nome (máx. 25) e cidade (máx. 15): são esses dados que aparecem no app do banco do cliente; acentos são removidos automaticamente no código Pix. O QR Code usa biblioteca do cdnjs; se ela falhar, o Copia e Cola continua funcionando.

            Cobrança de sinal: ligada, o PayPal e o Pix passam a cobrar só o sinal, e o carrinho mostra total, sinal agora e saldo na entrega. A ordem da conta é fixa: quantidade multiplica → cupom incide sobre o total → o sinal sai do total já com o cupom. O desconto do Pix não se aplica sobre o sinal (seria desconto dobrado) e por isso ele não é emitido enquanto o sinal estiver ligado — a aba avisa em âmbar. Um sinal maior que o total é recusado: o carrinho mostra a linha vermelha e nem o PayPal nem o Pix deixam pagar. Quem controla o saldo é você: o carrinho não cobra a segunda parcela nem lembra ninguém dela.

            Quantidade e resumo: um item vendido por quantidade ganha um seletor [− n +] e o preço da linha passa a mostrar o subtotal dele; quantidade zero equivale a não ter escolhido o item, e ele some da conta, do resumo, da descrição do PayPal e da mensagem do WhatsApp. O resumo copiável sai no fim do carrinho para o cliente colar no seu WhatsApp — é o que fecha a conciliação do Pix, que o QR estático não confirma sozinho.

            Como funciona cada pagamento: no PayPal, a cobrança é do total com cupom e a confirmação aparece na tela e no seu painel (com código do pedido e cupom). No 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: o botão "Já paguei" abre o WhatsApp do cliente com produtos, opcionais, cupom e valor, e você confere no extrato.

            Sobre os cupons: a validação (existência e validade) acontece no código da página e o desconto entra no valor cobrado. Como em todo carrinho desse tipo, os códigos ficam visíveis para quem inspecionar a página — use cupons que possam ser públicos, como os de campanha.

            Depois de colar: salve, publique e teste com valor baixo cada forma ativa: um pagamento PayPal (reembolsável pelo painel) e um Pix pago por você mesmo. Teste também trocar de produto/opcional depois de gerar o Pix e confira no celular.

            Bordas com efeito — gera o CSS para destacar um componente do Prosite com borda animada e fundo interno customizável (cor sólida ou degradê, para componentes que não oferecem degradê nativo). Seis efeitos à escolha: brilho giratório (o facho de luz que percorre a moldura), degradê contínuo, halo pulsante, listras em movimento, guirlanda de Natal (enfeites desenhados na moldura) e borda fixa (sem animação). Gera dois códigos: um para a Tag Head da própria página (o Prosite não tem cabeçalho global) e o CSS do componente. É 100% CSS, sem JavaScript, e já inclui a regra de acessibilidade que reduz o movimento para quem prefere.

            1 Efeito e fundo
            Efeito da borda

            Qual usar: o brilho giratório chama atenção sem cansar (ideal para bloco de oferta ou plano recomendado); o degradê contínuo é mais moderno e constante; o halo pulsante é o mais insistente (use com moderação, em um único elemento da página); as listras lembram fita/promoção; a guirlanda de Natal é sazonal e pede uma borda grossa, porque é ela que mostra o desenho; a borda fixa serve quando você quer só o fundo em degradê ou uma moldura discreta.

            Fundo interno do componente

            A técnica de borda animada precisa pintar o miolo do componente, então "manter o fundo atual" só funciona com os efeitos halo pulsante e borda fixa. Nos demais, informe a cor: se quiser preservar a aparência atual, capture a cor exata do componente com o conta-gotas (ou pelo inspetor do navegador) e use-a como cor sólida.

            2 Borda, cores e acabamento
            Borda e cores do efeito

            Na guirlanda de Natal este campo não vale. Ali a espessura da borda é o tamanho do enfeite — quem manda é o campo Tamanho do enfeite, na seção 1. O número acima fica guardado e volta a valer nos outros efeitos.

            Segredo do brilho: o efeito depende de contraste alto entre a cor de base (escura) e o facho (claro), com o facho estreito. Cores próximas em luminosidade produzem apenas uma ondulação sutil.

            Halo externo
            Conteúdo do componente (opcional)
            Selo de destaque (opcional)

            Marca este componente como a opção recomendada — o uso clássico é destacar o pacote do meio numa página de três. O selo é desenhado dentro do próprio CSS do componente: não há imagem para subir nem HTML para mexer.

            3 Biblioteca de presets
            4 Prévia e códigos gerados
            Fundo da prévia (não entra no código gerado)

            Por que isto existe: cor renderizada muda de percepção conforme o que está atrás dela — o halo é semitransparente e se mistura com o fundo, e um facho que brilha sobre papel claro pode sumir sobre uma seção escura. Sobre o fundo real da página, dá para ver isso antes de publicar. Esta escolha é só da prévia: os códigos 1 e 2 saem exatamente iguais com qualquer fundo aqui.

            Código 1 para dois efeitos no mesmo site

            Para que serve: o código 1 é colado na Tag Head da página onde o efeito aparece — o Prosite não tem cabeçalho global, cada página tem o seu. Uma página pode ter vários componentes com borda: marque aqui o preset de cada um dos outros, e o código 1 sai com todas as animações e todas as regras de movimento reduzido, num bloco só. Junto vem o CSS de cada um deles, numerado, para colar no campo de cada componente.

            O mesmo efeito, duas vezes, agora convive. O nome da animação sai do conteúdo dela, e não do tipo do efeito: fc-borda-brilho-a3f2. Dois componentes com o mesmo efeito e parâmetros diferentes — um com selo e outro sem, duas listras de espessuras diferentes — recebem nomes diferentes e cabem no mesmo campo. E quando os dois produzem a mesma animação, o código 1 sai com um bloco só, dizendo que ele serve aos dois.

            Ao regerar, recole os DOIS códigos deste componente. O nome da animação muda quando você muda o efeito, e o código 2 aponta para um nome que só existe no código 1 correspondente. Colar só um dos dois deixa o componente parado, sem nenhum erro na tela. O que já está publicado continua funcionando enquanto você não regerar.

            1) Tag Head desta página Copiado!

            2) CSS Customizado do componente Copiado!

            Instrução de uso do código gerado

            Onde colar o código 1: na Tag Head da própria página onde o componente está, com a tag style inclusa. O Prosite não tem cabeçalho global — cada página tem o seu —, então uma página nova que use borda animada precisa do código 1 no head dela: sem isso o CSS do componente fica lá, a animação não existe, e a borda simplesmente não se mexe, sem erro nenhum. Se a mesma página usar efeitos diferentes em componentes diferentes, salve o primeiro como preset e use a consolidação do código 1 (seção 4): sai um bloco só com as duas animações, em vez de dois blocos concorrentes no mesmo campo. Colar os dois blocos separados continua funcionando — cada efeito tem nome próprio e não conflita —, mas aí são dois trechos para manter.

            A regra de acessibilidade que vem junto: ela desliga apenas esta animação para quem escolheu "reduzir movimento" no sistema — redefinindo a própria animação com um único quadro. A borda para de se mexer e continua visível (o degradê fica parado, o halo vira um anel estático). Nada mais do site é afetado: a versão anterior deste código usava * e apagava a animação de todas as páginas, inclusive as do tema. Se o efeito escolhido for borda fixa, não há animação nenhuma e o código 1 não existe.

            Onde colar o código 2 (componente): no campo CSS Customizado do próprio componente, no editor. São propriedades soltas, sem seletor — o Prosite as aplica direto no elemento do componente, então não é preciso ID Html nem classe. Se em algum componente o campo não aceitar propriedades soltas, inspecione o elemento publicado, pegue a classe que a Alboom gera e envolva tudo em .classe { ... } — nesse caso, coloque a regra completa no head.

            Regra de ouro: at-rules (@keyframes, @media) só funcionam no head; o campo do componente aceita apenas propriedades. Se a borda aparecer parada, é quase sempre porque o código 1 não foi colado no head — ou porque o nome da animação foi alterado em um dos dois lugares.

            Depois de colar: salve, publique e confira em aba anônima (evita cache). Verifique se a borda aparece e se está se movendo, e teste no celular. Cores mudam de percepção conforme o contexto da página — antes de publicar, ponha a prévia sobre o fundo real da seção (seção 4); depois de publicar, confirme na página, que é onde entram também a tipografia e o que estiver em volta.

            Dica de conversão: use a borda animada em um único elemento por página — normalmente o card do plano recomendado ou o bloco da oferta principal. Ela também substitui bem um selo do tipo "O mais escolhido" quando a plataforma não permite badge flutuante (nesse caso, escreva o texto na primeira linha do card).

            Contagem regressiva — gera a barra de urgência para o topo de uma landing page, com mensagem, contador em dias/horas/minutos/segundos e efeitos. A contagem não reinicia quando o visitante recarrega a página: o momento da primeira visita fica guardado no navegador dele. Pode contar um prazo a partir da primeira abertura ou até uma data marcada. O código sai pronto para a Tag Body (barra fixa no topo) ou para um componente HTML (barra que rola com a página).

            1 Contagem e encerramento
            Como contar

            Cada visitante tem o próprio prazo, contado da primeira vez que abriu a página naquele navegador.

            O instante é gravado no código com o fuso de Brasília (−03:00) fixo, para que todo visitante conte até o mesmo momento, esteja onde estiver.

            Trocar este código zera a contagem de todos os visitantes. É o jeito de recomeçar uma campanha. Duas campanhas com códigos diferentes convivem no mesmo site sem se atrapalhar.

            O contador

            Desligar o contador não desliga a contagem. O prazo continua correndo do mesmo jeito: a urgência entra na hora marcada, a barra de progresso continua andando e, ao zerar, acontece o que você escolheu em “Quando a contagem zerar”. O que some é só o relógio na tela — útil quando você quer a pressão do prazo sem o número piscando na cara do visitante.

            Com o contador desligado, os campos abaixo não valem. Unidades, rótulos, formato, “esconder os dias zerados”, a animação dos dígitos e o efeito piscar (que pisca o separador do relógio) descrevem um relógio que não vai aparecer. Os valores ficam guardados e voltam a valer quando você religar o contador. Se alguma mensagem tiver o marcador {contador}, ele é removido do texto — deixá-lo apareceria a palavra literal na barra.

            Quando a contagem zerar

            Reiniciar o ciclo só funciona no modo "a partir da primeira abertura": ao zerar, começa outro prazo do mesmo tamanho. Cria urgência permanente que não corresponde a um prazo real — use com consciência.

            2 Mensagens
            Adicionar mensagem

            Dois marcadores. {contador} escreve o tempo que falta ("faltam 3 dias"); {prazo} escreve a data limite ("até 21/12"). Os dois saem com a mesma cor de destaque da seção 3 — é a mesma configuração, não uma cópia. Assim a mesma campanha pode ter, na mesma barra, uma mensagem com a contagem e outra com a data.

            Sem o marcador {contador}, o relógio aparece depois do texto. Com duas ou mais mensagens, o que acontece com elas depende do movimento escolhido na seção 4: a alternância mostra uma de cada vez, e a rolagem emenda todas numa faixa contínua, na ordem desta lista. O estático mostra só a primeira — e, quando isso passa a descartar mensagem cadastrada, quem avisa é a própria seção 4, em destaque, ali onde o movimento é escolhido.

            Mensagens da barra

            Nenhuma mensagem ainda. Sem nenhuma, o código usa "Oferta por tempo limitado {contador}".

              3 Aparência, posição e extras
              Cores e tipografia
              Formato e espaço

              Estes quatro valem só no formato Compacto — que é o escolhido aqui em cima por padrão. São as letrinhas coladas em cada número: 02d:14h:33m:12s. Por serem coladas, quase sempre uma letra só.

              Estes quatro valem só no formato Blocos com rótulo. São as palavras escritas embaixo de cada número, e por isso vêm por extenso. Mexer aqui não muda o relógio compacto — quem manda nele são os quatro campos acima.

              Posição

              A escolha define onde colar o código: fixa vai na Tag Body da página; rolando com a página vai num componente HTML posicionado no topo pelo editor. O título da saída na seção 7 avisa qual dos dois.

              Em landing page, que não tem menu, empurrar é o certo: a barra reserva o próprio espaço e nada do topo fica coberto. Use sobrepor só se quiser a barra flutuando por cima do hero. O z-index raramente precisa ser tocado — ele existe para o caso de a página ter algum outro elemento fixo disputando o topo.

              Faixa reservada pelos blocos desta ferramenta: barra de contagem 99980 (este campo), botão flutuante de WhatsApp 99990 e pop-up de captação 99991. Subir este número acima de 99989 põe a barra por cima do pop-up: ele deixa de ser modal e o visitante consegue clicar na página atrás dele. Se precisar subir mesmo assim, suba para ficar abaixo de 99990 — e teste com o pop-up aberto.

              Extras da barra

              Separa o conteúdo da coruja, do botão de ação e do botão de fechar. Só tem efeito visível quando algum desses estiver ligado. Não é este número que dá o espaço em volta do • que separa as mensagens na rolagem: aquele acompanha o tamanho da letra da barra, para não desaparecer quando este campo for zero.

              Se o link for uma âncora como #reserva, a coluna de destino precisa ter esse valor no campo ID Html (aba Avançado do componente).

              A coruja fica ancorada na ponta, fora da área que rola — ela emoldura a barra em vez de passar junto com o texto. A altura dela acompanha a da barra e para no teto acima: quando o texto quebra em duas linhas — o que é comum no celular — ela cresce e ocupa o espaço que antes sobrava. Numa barra mais baixa que o teto ela acompanha a linha e fica menor: o teto não estica a barra, só limita a coruja. Com o teto padrão de 26 isso só acontece em barra bem curta, mas acima de 30 vale também para barra com botão — e subir o teto alarga o espaço reservado nas pontas mesmo quando a coruja não cresce, o que estreita a coluna de texto. "Mostrar no celular?" é independente da posição: dá para ter as duas no computador e nenhuma no telefone.

              4 Efeitos e movimento
              Movimento do conteúdo

              Com “Estático”, só a primeira mensagem entra no código gerado. Uma barra parada não tem como mostrar mais de uma, então as outras não chegam ao visitante: continuam cadastradas e salvas na seção 2, sem sair de lá. Para mostrar todas, escolha rolagem, que emenda todas numa faixa contínua, ou alternância, que mostra uma de cada vez.

              Com duas ou mais mensagens, a faixa que rola é a emenda de todas, na ordem da seção 2, separadas por • — a rolagem mostra todas de uma vez, em vez de trocar de mensagem. Cada uma leva o próprio relógio, e todos andam juntos. Este campo é a duração de um ciclo, e não a velocidade de leitura — e os dois não andam juntos. Um ciclo é a faixa percorrer a própria metade, e essa metade é o conjunto de mensagens repetido até cobrir a barra: nas medições desta rodada ela deu de 2 a 4,5 vezes a largura da barra, conforme o texto. Por isso não vale a regra “mais mensagens, mais rápido”: medindo com 18 s numa barra de 873 px, uma mensagem curta andou a 99 px por segundo, duas a 124 e três a 138 — mas a quarta caiu para 123; e numa barra de 333 px, três mensagens (46 px/s) ficaram mais lentas do que uma só (49 px/s). O que mais mexe na velocidade nem é o número de mensagens: são as mesmas três mensagens, nos mesmos 18 s, andando a 46 px/s numa barra estreita de celular e a 138 px/s numa de computador — três vezes mais rápido, sem você trocar nada. Na prática: diminua a duração para acelerar, aumente para desacelerar e julgue pela prévia ao lado, nos dois modos (Computador e Celular), que é onde a velocidade real aparece.

              A alternância precisa de duas ou mais mensagens na seção 2. Com uma só, o código gerado cai para estático.

              Virada dos dígitos
              Entrada da barra
              Destaque contínuo (pode combinar)

              Com “Alternância deslizando” ligada, o efeito Pulsar não vale. Os dois animam o mesmo elemento pela mesma propriedade (o transform do miolo da barra), e animação em execução vence a transição do deslize: com os dois ligados, o deslize simplesmente não acontece e a troca de mensagem vira um fade. A marcação acima fica guardada, mas não entra no código gerado enquanto o movimento for “deslizando”. Para usar o pulsar, escolha outro movimento (estático, rolagem ou alternância com fade).

              O separador piscando só aparece no formato compacto (é o : entre os números). Efeitos contínuos chamam atenção o tempo todo e cansam — na dúvida, prefira a urgência progressiva ao lado, que só age quando o prazo aperta.

              Urgência progressiva

              Com “Alternância deslizando” ligada, este pulsar não vale. É o mesmo conflito do efeito Pulsar ao lado: durante a urgência, a animação tomaria o transform do miolo da barra e o deslize da troca de mensagem pararia de acontecer. A escolha fica guardada, mas não entra no código gerado enquanto o movimento for “deslizando”. A cor de urgência continua valendo normalmente.

              As mensagens da barra estão na seção 2, e os sufixos do relógio compacto e os rótulos dos blocos na seção 3. O que sobra aqui são as costuras: o que separa um número do outro no relógio, as palavrinhas da data do {prazo} e o que o leitor de tela anuncia no botão de fechar. Todos já vêm com exatamente o texto que a barra usa hoje. A seção nasce recolhida porque quase nunca se mexe nela.

              Relógio

              É o que fica entre as unidades: 02d:14h:33m:12s. As letrinhas coladas em cada número (o d, o h…) são outra coisa e ficam na seção 3, num grupo só delas — logo acima dos rótulos do formato “blocos”, que são um grupo à parte.

              Data do marcador {prazo} e leitor de tela

              Os dois conectores começam e terminam com espaço de propósito — é o espaço que separa as palavras na data pronta. O botão de fechar é só um ✕ na tela: sem o texto, quem usa leitor de tela ouve “botão” e nada mais.

              6 Biblioteca de presets
              7 Prévia e código gerado
              Ver como:
              Fundo da prévia (não entra no código gerado)

              Só da prévia: o código gerado sai exatamente igual com qualquer fundo escolhido aqui. Ele existe porque o mesmo bloco pode ir para uma landing page com esquema de cores próprio, e cor sobre fundo errado engana — o que parece legível sobre branco pode sumir sobre uma seção escura.

              A prévia roda o código gerado de verdade: é o mesmo bloco que sai na saída ao lado, executando dentro de um quadro isolado. O que ainda difere da página publicada: a barra fixa gruda no topo do quadro, não da janela; o relógio é o do seu computador; a contagem sempre começa agora, enquanto na página real ela conta a partir da primeira visita de cada visitante; o botão de fechar esquece o clique a cada atualização da prévia; o modo Computador é exibido reduzido para caber na coluna, então julgue o tamanho da fonte pelo modo Celular, que sai em tamanho real; e o quadro não carrega o CSS do tema do site.

              Código gerado Copiado!

              Instrução de uso do código gerado

              Onde colar: o título da saída avisa. Com fixa no topo, o código vai no campo Tag Body da página. Se já houver ali uma versão anterior deste bloco (ela começa com o comentário FOTO CERTA - BARRA DE CONTAGEM REGRESSIVA), substitua esse bloco inteiro. O que estiver no campo e for de outro construtor — o botão flutuante de WhatsApp, por exemplo — fica onde está: os blocos convivem no mesmo campo, um embaixo do outro. Nunca apague o campo inteiro. Com rola com a página, vai num componente HTML que você posiciona no topo da landing pelo editor. Não há nada para colar na Tag Head.

              Por que fixa exige a Tag Body: componentes HTML do Prosite vivem dentro de um iframe, e um elemento fixo dentro do iframe gruda no iframe, não na página. A Tag Body é o mesmo lugar onde mora o botão flutuante de WhatsApp, que já funciona fixo.

              A contagem não reinicia: na primeira visita o código grava o horário no navegador do visitante, na chave fcbar:SEU-CODIGO, e todas as visitas seguintes contam a partir dali. Trocar o código da campanha zera a contagem de todos — é assim que se recomeça uma promoção.

              Limites que nenhum código resolve: a contagem usa o relógio do aparelho do visitante, então quem estiver com a hora errada vê o tempo errado. O carimbo é por navegador: o mesmo visitante no celular e no computador começa duas contagens; aba anônima recomeça; limpar dados zera. O Safari pode descartar o registro depois de cerca de 7 dias sem visita — irrelevante para campanhas de dois ou três dias, relevante para campanhas de semanas.

              Fuso da data marcada: o instante é gravado com −03:00 fixo. Um visitante em outro fuso vê o tempo restante correto para o mesmo momento.

              Depois de publicar: confira em aba anônima (evita cache) que a barra aparece, que o topo da página não ficou coberto e que ao recarregar a contagem continua de onde estava. Teste também no celular, onde a barra costuma quebrar em duas linhas. Se a página tiver algum outro elemento fixo no topo disputando espaço com a barra, é aí que entram o z-index e o "sobrepor".

              Conversão: prefira a urgência progressiva aos efeitos contínuos. Uma barra que só muda quando o prazo aperta comunica algo; uma que pisca o tempo todo vira ruído e o visitante para de enxergar.

              Link de cobrança — para quando o serviço já foi combinado e falta receber. Você publica uma vez um componente HTML numa página fixa do site (por exemplo /pagar) e, a cada cobrança, gera aqui um link diferente para mandar ao cliente. A página abre com a descrição do serviço, o valor, o Pix (copia e cola mais QR Code) e, se você quiser, o PayPal — mais o botão “Já paguei”, que avisa você pelo WhatsApp. O valor mostrado na tela e o valor cobrado saem os dois de dentro do próprio código Pix que viaja no link: não existe um segundo lugar de onde eles possam divergir. Todo link leva um selo calculado sobre os seus parâmetros: mexer em qualquer um deles — descrição, data, código Pix, link do PayPal — ou apagar o selo faz a página recusar a cobrança (com a ressalva de tamanho do selo explicada na seção 3). Um código montado com a chave Pix de outra pessoa também é recusado: a página só exibe uma cobrança que ela consegue remontar a partir dos seus dados de recebedor. A cobrança pode ter uma data de validade, que é um recado ao cliente e não um cancelamento — o código Pix em si não vence. E pode ter desconto para quem pagar via Pix: aí a cobrança tem dois valores (o total, que o PayPal cobra, e o valor do Pix), e a página refaz a conta ao abrir o link — se o valor do Pix não for exatamente o total menos o desconto, ela recusa.

              1 Quem recebe
              Pix

              A chave Pix, o nome e a cidade do recebedor saíram desta aba e estão no painel Identidade, no topo da página — os mesmos do Checkout e da Mini loja.

              Estes três campos entram no bloco da página e também em cada link. A página só aceita um link cujo código Pix tenha sido montado com exatamente esta chave, este nome e esta cidade — é assim que ela sabe que aquela cobrança é sua. Se você trocar a chave e regerar o bloco, os links antigos ainda não pagos param de abrir: gere links novos para eles.

              PayPal

              Decide as duas coisas juntas: a ordem em que os meios aparecem no bloco e qual preço fica em destaque. É um campo só de propósito — separados, dava para publicar um Pix em cima com o preço do cartão grande. O outro preço continua à vista, na linha menor, para o cliente nunca ser surpreendido na hora de pagar.

              O Client ID saiu desta aba e está no painel Identidade, no topo da página.

              A moeda aqui é sempre o real (BRL), e não há campo para trocá-la — nem nesta aba nem no Agendamento por pacote. O Pix só existe em reais, e o cartão cobra o mesmo valor. O Checkout e a Mini loja têm o seletor porque ali é possível vender só com cartão, sem Pix nenhum na página.

              O botão do PayPal no site é adulterável de um jeito que o Pix não é. No Pix, o valor que a tela mostra é lido de dentro do mesmo código que o aplicativo do banco vai ler: os dois não têm como discordar. No botão do PayPal o valor é calculado no navegador do cliente e a tela pode dizer uma coisa enquanto a ordem leva outra. No botão do PayPal o valor é calculado no navegador do cliente: quem souber mexer paga o que quiser. Para valor alto, use o segundo modo — colar um link de cobrança criado no próprio PayPal, na seção 3: ali o valor fica guardado no PayPal e o cliente não alcança. A escolha é por cobrança.

              Comprovante pelo WhatsApp

              O número de destino saiu desta aba — é o WhatsApp do painel Identidade, no topo da página.

              O botão abre o WhatsApp com a descrição, o valor e o identificador da cobrança já escritos na mensagem — assim você sabe de qual cobrança o cliente está falando. O Pix estático não avisa ninguém quando cai: confira o extrato antes de entregar o trabalho.

              Onde você escrever {desc} entra a descrição da cobrança, e {valor} o valor pago. A mensagem ainda soma, se houver, o desconto do Pix e o identificador da cobrança — essas duas partes não são editáveis aqui.

              Depois do pagamento aprovado: levar o cliente a outra página

              O endereço é da página, não de cada cobrança. Todas as cobranças geradas por esta aba levam ao mesmo upsell, e ele entra no código 1 — o componente da página de pagamento. Ele não viaja no link: tudo que viaja no link entra no selo, e um parâmetro novo faria toda /pagar com o código 1 antigo recusar os links novos.

              Com o endereço preenchido, as duas variáveis saem no código mesmo com a chave em "não levar". Elas ficam no topo do bloco, inertes, esperando um true: assim você liga e desliga o upsell direto na página publicada, trocando UPSELL_ATIVO, sem voltar aqui e sem recolar nada. Com o endereço vazio nada disso é escrito. Endereço vazio com a chave em "sim, levar" é recusado na hora de gerar — ligado sem destino não faz nada e parece que faz.

              São aceitos uma âncora (#oferta), um caminho do site (/oferta-especial) ou um endereço http(s) inteiro. É a mesma regra do botão de ação da Contagem regressiva.

              No PayPal o cliente é levado assim que o pagamento é aprovado — houve confirmação de verdade. No Pix não existe aviso nenhum para a página quando o dinheiro cai, então quem leva é o botão "Já paguei", e quem clica nele pode ainda não ter pago. Se a sua oferta depende do primeiro pagamento estar feito, isso é decisão da campanha, não do código.

              2 A página de pagamento
              Endereço da página

              Tem de ser o endereço inteiro. O link desta cobrança vai colado numa conversa de WhatsApp, fora do site: um caminho como /pagar funciona dentro do site e não abre nada numa conversa. Escrever só o caminho obrigava você a completar o endereço à mão a cada cobrança — que é justamente o trabalho que esta aba existe para eliminar —, então a ferramenta agora recusa o caminho solto em vez de aceitá-lo em silêncio.

              Serve só para montar o link. A página em si não precisa saber o próprio endereço, e mexer aqui não muda o código 1.

              Textos

              Aparece dentro do bloco do Pix, logo acima do botão “Já paguei” — que é onde o cliente está olhando na hora de pagar. O Pix estático não confirma nada sozinho: sem esta frase o cliente paga, a página não muda, e ele pode sair achando que já está confirmado. Ele não é emitido quando o botão “Já paguei” está desligado, para não mandar tocar num botão que não existe.

              Onde você escrever {data}, entra a data do prazo (dia/mês/ano) — em todas as vezes que ela aparecer na frase. Sem {data}, a data não aparece.

              Com o cartão como meio prioritário, esta é a linha menor abaixo do total. Com o Pix como prioritário, ela vira o rótulo do valor em destaque — e o total aparece na linha de baixo, pelo campo seguinte.

              Só aparece quando o Pix é o meio prioritário e a cobrança tem desconto. É ela que mantém o valor cheio à vista — que é o que o PayPal cobra.

              Onde você escrever {valor} entra o número já formatado em reais. As duas linhas ficam logo abaixo do valor em destaque — que continua sendo o total da cobrança, porque é ele que diz quanto o trabalho custa. O que o cliente paga agora é o sinal, e é ele que está dentro do código Pix e é ele que o PayPal cobra.

              As três respostas aparecem na tela do cliente, logo abaixo das linhas de sinal e saldo e antes dos botões de pagamento — é ali que ele decide. Cada uma só aparece se estiver preenchida: as três em branco não desenham nada. Elas não entram na mensagem do WhatsApp, que é confirmação do que já foi pago.

              As três são da página, e não de cada cobrança. Diferente do valor e do próprio sinal, que viajam no link, elas ficam dentro do código 1: são política do seu negócio, não desta venda. Mudar uma delas pede gerar o código 1 de novo e colar no site — e não mexe em nenhum link já enviado, porque o selo do link não conta texto nenhum.

              Entra no fim da mensagem do botão “Já paguei”, e só nas cobranças com sinal. {sinal} é o que ele acabou de pagar e {saldo} é o que ficou para depois — sem este trecho a mensagem citaria só o total, e você leria “paguei R$ 1.200,00” de quem pagou o sinal.

              Aparência
              Coruja da identidade
              Quando a página não mostra o pagamento

              Aqui também: onde você escrever {data} entra a data do prazo (dia/mês/ano), em todas as vezes que ela aparecer na frase.

              A página fica publicamente alcançável: quem abrir o endereço sem link algum precisa encontrar uma mensagem cordial, nunca uma página quebrada.

              Na tela de fora do prazo a página ainda mostra a descrição e o botão “Já paguei”, e nada mais: o cliente pode ter pago dentro do prazo e só agora estar avisando.

              3 Esta cobrança
              O que está sendo cobrado

              Com o sinal ligado nesta cobrança, este campo não vale. O Pix passa a cobrar o sinal, e o desconto do Pix não se aplica sobre o sinal — seria desconto dobrado, porque o sinal já sai do valor cheio. O número acima fica guardado, mas não entra no link enquanto o sinal estiver ligado. Para usar o desconto do Pix, volte a cobrar o valor cheio nesta cobrança.

              O sinal é desta cobrança, e não da página. Cada link carrega o seu, como já acontece com o desconto no Pix: você pode mandar hoje um link com 30% de sinal e amanhã um link do valor cheio, sem colar nada de novo no site. Com o sinal ligado, o código Pix cobra o sinal e o PayPal cobra o sinal — e o cartão mostra o total, o sinal e o saldo. O desconto no Pix é desligado automaticamente, porque descontar sobre o sinal seria desconto dobrado.

              No modo “link criado no PayPal”, o valor fica guardado lá dentro: crie o link do PayPal com o valor do sinal, não com o total. A página não tem como conferir o valor de um link do PayPal — ele é do PayPal, não daqui.

              Falta um passo, e uma vez só. O selo do link passou a contar também o sinal, então um código 1 gerado antes desta versão recusa links com sinal — ele não conhece o parâmetro. Gere o código 1 de novo e cole no site; daí em diante o sinal funciona em qualquer aparelho, sem colar nada. Todos os links que você já enviou continuam funcionando, nos dois códigos: eles não têm o parâmetro do sinal, e a conta deles não mudou.

              Com desconto, a cobrança passa a ter dois valores: o total — que é o valor digitado acima, e é o que o PayPal cobra — e o valor do Pix, que é o total menos o desconto. O cartão mostra os dois. A conta do desconto é a mesma do Checkout e da Mini loja, escrita uma vez só, e a página de pagamento refaz essa conta ao abrir o link: se o valor do Pix não for exatamente o total menos o desconto, ela recusa a cobrança.

              O desconto não mexe mais no código 1. Todo código 1 gerado por esta versão já leva a conta do desconto dentro dele, com ou sem desconto configurado aqui — então ligar, desligar ou trocar o percentual muda só o link, nunca o código da página. Falta um passo, e uma vez só: se a página ainda estiver com um código 1 gerado antes desta versão, ele não sabe conferir a conta e vai recusar links com desconto. Gere o código 1 de novo e cole no site; daí em diante o desconto funciona em qualquer aparelho, sem colar nada. Links sem desconto continuam funcionando nos dois códigos.

              O prazo é um recado, não uma tranca. Até o fim do dia escolhido (23:59:59 no horário de Brasília) o cliente vê o prazo escrito no cartão; passando disso, a página para de mostrar o pagamento e manda falar com você. O que ele não faz: o código Pix não tem validade — quem copiou o “copia e cola” antes do prazo consegue pagar depois, e o mesmo vale para quem atrasar o relógio do próprio aparelho. Quem fecha a conta continua sendo você, conferindo valor e data no extrato.

              Alterar o link quase sempre não funciona. Todo link gerado leva um selo: uma conta feita sobre a descrição, a data, o código Pix, o link do PayPal e — quando a cobrança tem desconto — o total e o percentual. Mexer em qualquer um deles — ou apagar o selo — faz a conta não fechar, e a página recusa a cobrança. “Quase sempre”, e não “sempre”: o selo tem 16 bits, então uma alteração feita ao acaso tem uma chance em 65 mil de a conta fechar assim mesmo e a página exibir a cobrança alterada. Na prática ninguém edita um link ao acaso — e quem edita de propósito não precisa dessa chance, porque o selo não é segredo nem é segurança: quem abrir o código da página lê a regra e sabe refazer a conta. O que o selo impede é a edição de um link que você mandou, que é o que acontece na prática. O que impede o dinheiro de ir para outra conta não é ele, e sim a página só exibir cobrança que ela consegue remontar com a sua chave Pix.

              A descrição é cosmética no sentido do dinheiro: o valor cobrado está dentro do código Pix, e é de lá que a tela o lê. O selo existe para que ela também não possa ser trocada no caminho — descrição adulterada não muda um centavo, mas mente para o cliente.

              PayPal desta cobrança

              À prova de adulteração: no modo “link criado no PayPal” o valor fica guardado lá, e o cliente não tem como mexer. Custa um passo manual por cobrança e é o modo recomendado para valor alto.

              O endereço é conferido pela mesma regra que a página publicada usa: só https:// de um domínio do próprio PayPal, e sem espaço, quebra de linha, tabulação ou barra invertida no meio — que costumam vir invisíveis ao colar de um PDF ou de um e-mail. Se a ferramenta recusar um endereço que parece certo, apague o campo e digite de novo.

              Detalhar em itens (opcional)

              Uma linha por item, no formato nome | SKU | preço. O SKU é opcional: nome | preço também vale — o último pedaço é sempre o preço. Opcionais entram como itens, uma linha cada. Até 20 itens.

              Isto não muda um centavo do que é cobrado. O valor continua sendo o do campo acima, e o Pix continua carregando um número só. Os itens servem à tela (o cliente lê de que o valor é feito) e ao seu relatório do PayPal, que passa a mostrar uma linha por item com o SKU na coluna "ID do produto" — em vez de uma linha única. Por isso a soma dos itens tem de bater, ao centavo, com o valor: se não bater, a ferramenta recusa e diz os dois números.

              O SKU não aparece na página que o cliente vê: ele é o seu código de referência, e vai só para o relatório.

              Itens e sinal não convivem, e a ferramenta recusa os dois juntos. Com sinal o PayPal cobra só o sinal, e detalhar em itens faria o recibo chamar de desconto o saldo que o cliente ainda deve — no documento que ele guarda.

              A barra vertical separa os pedaços, então ela não pode fazer parte do nome nem do SKU. Qualquer outro caractere pode, inclusive acento e símbolo.

              Upsell só desta cobrança (opcional)

              O específico vence o geral. Preenchendo aqui, esta cobrança leva o cliente para este endereço depois do pagamento; deixando vazio, vale o endereço fixo da página, configurado na seção 1. Assim dá para ter uma oferta diferente por campanha sem recolar nada no site.

              O interruptor mestre continua mandando. Se "Levar o cliente para essa página?" estiver em não levar (seção 1), o endereço daqui não leva a lugar nenhum — nem este, nem o da página. O interruptor é a variável UPSELL_ATIVO no topo do código 1, e você pode ligá-la direto no site, sem regerar nada.

              São aceitos uma âncora (#oferta), um caminho do site (/oferta-especial) ou um endereço http(s) inteiro — a mesma regra do campo da seção 1.

              Gerar o link

              Mande o link individualmente, nunca em grupo: a pré-visualização de link mostra a descrição e o valor para todo mundo que estiver na conversa.

              4 Biblioteca de presets
              5 Prévia e código gerado
              Ver a página:
              Fundo da prévia (não entra no código gerado)

              Só da prévia: o código gerado sai exatamente igual com qualquer fundo escolhido aqui. Ele existe porque o mesmo bloco pode ir para uma landing page com esquema de cores próprio, e cor sobre fundo errado engana — o que parece legível sobre branco pode sumir sobre uma seção escura.

              A prévia roda o código gerado de verdade: é o mesmo bloco que sai na saída ao lado, executando dentro de um quadro isolado que recebe um endereço simulado com os parâmetros da cobrança da seção 3 — com o mesmo selo que sai no link, calculado pela mesma conta. Os quatro botões acima trocam esse endereço: em Link editado um dígito do código Pix é trocado depois de o link ser selado, exatamente como aconteceria se alguém mexesse no link enviado; em Prazo vencido o link é íntegro, mas com validade de ontem no horário de Brasília — o mesmo fuso em que o prazo termina, e é o único estado que você não conseguiria provocar sem esperar a data chegar. O que ainda difere da página publicada: o QR Code é desenhado por uma biblioteca baixada da internet, então no quadro ele só aparece depois que ela carrega; o botão do PayPal não é o botão de verdade (o SDK não roda na prévia) e sai como desenho; o botão “Já paguei” não abre o WhatsApp aqui (o quadro desliga a abertura de abas, e avisa em vermelho se não conseguir desligar); e o quadro não carrega o CSS do tema do site. Com o upsell ligado, porém, clicar em “Já paguei” leva a prévia para a sua página de upsell — exatamente como a página publicada faria. O quadro não consegue desligar isso: o endereço da página é imutável no navegador (medido em 13/09/2026 — trocar location, location.href ou location.assign lança erro, e a troca direta falha em silêncio), e desligar por conta própria só seria possível mudando o código gerado, que é justamente o que a prévia não pode fazer. Mexer em qualquer campo remonta a prévia.

              Código 1 — a página de pagamento (componente HTML, cola-se uma vez só) Copiado!

              Colar este código de novo NÃO derruba os links que você já mandou. A conta do selo só cresce: um link sem desconto e sem sinal é selado exatamente como sempre foi, e o código novo aceita todos os links que esta ferramenta já gerou — isso é medido link a link a cada versão. O contrário é que não vale, e é por isso que este passo existe: o código que está no seu site hoje foi gerado antes de o sinal existir, então ele recusa os links novos que cobram sinal. Gere o código 1 aqui e cole no site uma vez; depois disso o sinal funciona de qualquer aparelho, sem colar mais nada.

              A única exceção são os links de antes de o selo existir (agosto de 2026): esses não têm selo nenhum e são recusados pelos dois códigos, o velho e o novo. Se ainda houver alguma cobrança daquela época aberta, gere um link novo para ela. Fora isso, os links continuam valendo enquanto a chave Pix, o nome e a cidade do recebedor não mudarem.

              Código 2 — o link desta cobrança (muda a cada cobrança) Copiado!

              As duas saídas têm vidas diferentes: o código 1 vai uma vez só para o componente HTML da página fixa; o código 2 é gerado a cada cobrança e vai para o cliente. Mudar a descrição ou o valor não exige colar o código 1 de novo.

              Mexeu na cobrança, a caixa do link esvazia. Trocar a descrição, o valor, o identificador, o desconto no Pix, o endereço da página, o modo de PayPal ou os dados do recebedor apaga o link que estava aqui — para não existir a chance de copiar um link com o valor da cobrança anterior. Clique em Gerar link desta cobrança de novo. Mexer só na aparência ou nos textos do cartão não apaga nada: isso muda o código 1, e aí quem avisa é o painel consolidado.

              Instrução de uso do código gerado

              Uma vez só: crie no Prosite uma página fixa (sugestão: /pagar), ponha nela um componente HTML e cole ali o código 1. Publique. Não há nada para colar na Tag Head nem na Tag Body.

              O endereço da página, inteiro. Na seção 2, escreva o endereço completo onde você colou o código 1 — com https:// e o domínio. O link vai colado numa conversa de WhatsApp, fora do site, e ali um caminho como /pagar não abre nada. A ferramenta recusa o caminho solto; e se você já tinha /pagar guardado, ela avisa e não troca sozinha — ela não tem como saber qual é o seu domínio.

              Desconto no Pix, quando você quiser dar um. Com desconto a cobrança passa a ter dois valores: o total (que é o que o PayPal cobra) e o valor do Pix (total menos o desconto, e é ele que está dentro do código copia e cola). O link carrega o total num parâmetro próprio, coberto pelo selo, e a página refaz a conta: se o valor do Pix não for exatamente o total menos o desconto — pela mesma regra de arredondamento da ferramenta —, ela recusa a cobrança. São duas redes, não uma: o selo pega o parâmetro editado, e a conferência da conta pega o que passar pelo selo. Antes do primeiro link com desconto, cole o código 1 novo: um código 1 gerado antes desta versão não sabe conferir essa conta e vai recusar. É uma vez só — o código 1 desta versão já leva a conta dentro dele, tenha ou não desconto configurado, então depois disso trocar o percentual não pede nada de você. Links sem desconto continuam funcionando nos dois.

              A cada cobrança: preencha a seção 3 (descrição, valor e, se quiser, um identificador, uma data de validade e um desconto no Pix), clique em Gerar link desta cobrança e mande o código 2 ao cliente. Você pode ter quantas cobranças quiser abertas ao mesmo tempo: a página não guarda nada, lê tudo do endereço.

              O que a página garante, dito sem exagero. O link carrega o código Pix já pronto, com o valor dentro dele, e um selo calculado sobre todos os parâmetros do endereço. A página confere o selo, confere a verificação interna do código, remonta o código a partir dos seus dados de recebedor e só exibe a cobrança se tudo fechar. Aí ela lê o valor de dentro do código e usa esse mesmo valor na tela e no botão do PayPal. Disso saem quatro garantias e um limite:

              1. Tela, Pix e PayPal não podem divergir, porque leem o mesmo lugar — não existe um segundo parâmetro de valor para ficar desatualizado.
              2. Link editado é recusado: mudar um caractere da descrição, um dígito da data, o código Pix ou o link do PayPal quebra o selo. Apagar qualquer um deles, ou apagar o próprio selo, também.
              3. Link com a chave de outra pessoa é recusado: a remontagem não fecha, então ninguém usa a sua página de pagamento para receber na conta dele.
              4. O link do PayPal não pode ser trocado no caminho. Antes do selo, esse parâmetro só precisava continuar sendo um endereço do PayPal — o que aceitava a cobrança de outra conta. Era a única porta do link que levava dinheiro para fora, e o selo a fechou.

              O selo não é segredo, e isso importa. Ele é uma conta escrita dentro do código da própria página: quem abrir o código-fonte lê a regra e sabe refazer a conta. Ele impede a edição de um link que você mandou — que é o que acontece na vida real, com quem recebeu o link. Ele não é uma senha, não é criptografia e não é segurança; chamá-lo assim seria prometer o que a página não entrega.

              E o selo tem tamanho, então a garantia 2 tem uma ressalva. Ele é um número de 16 bits: uma alteração feita ao acaso no link tem cerca de uma chance em 65 mil de a conta fechar assim mesmo, e nesse caso a página exibiria a cobrança alterada. Alteração ao acaso é justamente o que não acontece — link não se edita sozinho —, e quem edita de propósito não depende dessa chance, porque a regra do selo está escrita no código da página. Dizer “recusa sempre” seria mais curto e seria falso.

              O limite, que nenhum código sem servidor resolve. Sua chave Pix é pública — é o que você dá a quem vai te pagar. Quem souber recalcular a verificação interna e o selo monta um link seu, que a sua página aceita, com o valor (para menos ou para mais) e o identificador trocados. O dinheiro continua indo para a sua conta — isso a página garante —, e a tela, o Pix e o PayPal continuam dizendo o mesmo número. O que ela não garante é que esse número, e esse identificador, sejam os que você escreveu aqui.

              O prazo, dito com a mesma precisão. A data que você põe em “Válido até” faz a página mostrar o prazo ao cliente e, depois dele, parar de exibir o pagamento. Ela não cancela nada: o código Pix não tem validade, então quem copiou o “copia e cola” antes continua conseguindo pagar, e quem atrasar o relógio do aparelho vê a página como se estivesse no prazo — sem servidor, a hora vem sempre do aparelho do cliente. O prazo muda o comportamento de quem lê; a conferência do que caiu continua sendo sua, no extrato.

              Na prática, os dois jeitos de isso incomodar: um cliente que tenta pagar menos do que foi combinado; e alguém que manda ao seu cliente um link forjado com valor maior — o cliente paga a mais, para você, achando que é o preço. Nos dois casos o que resta é detectar: confira no extrato o valor recebido e a qual cobrança ele se refere, antes de entregar o trabalho. Impedir exigiria um segredo que o cliente não pudesse ler, ou seja, um servidor — e este projeto não tem um, por decisão.

              O que continua sendo por sua conta: o Pix estático não confirma pagamento sozinho — ninguém avisa a página quando o dinheiro cai. O botão “Já paguei” serve para o cliente te chamar; a conferência é sua, no extrato.

              Depois de publicar: abra o endereço da página sem nenhum parâmetro e confirme que aparece a mensagem cordial. Depois abra um link de cobrança de verdade em aba anônima e confira que o valor da tela é o mesmo do aplicativo do banco ao ler o QR Code.

              Mini loja — gera o código de uma vitrine com carrinho para colar num componente HTML de uma página do site. O visitante vê os produtos em grade com foto, filtra por categoria, clica num item para abrir o cartão de detalhe na mesma página (com a foto grande, a descrição e os opcionais), monta o carrinho ao lado e paga por Pix, PayPal ou os dois. Cupom, cobrança de sinal, quantidade por item e desconto no Pix são as mesmas contas do Checkout — a conta do dinheiro é escrita uma vez só e usada pelas duas abas. É um catálogo com carrinho, não uma loja completa: não há registro de pedidos, confirmação automática de pagamento nem estoque. Esses limites estão escritos na seção 6 e também dentro da página gerada, no rodapé do carrinho.

              1 Como você recebe
              Formas de pagamento

              Decide as duas coisas juntas: a ordem em que os meios aparecem no bloco e qual preço fica em destaque. É um campo só de propósito — separados, dava para publicar um Pix em cima com o preço do cartão grande. O outro preço continua à vista, na linha menor, para o cliente nunca ser surpreendido na hora de pagar.

              Ele identifica o carrinho no navegador do cliente (é a chave do armazenamento) e abre o identificador de cada pedido, que é o que aparece no seu extrato. Duas lojas no mesmo site precisam de códigos diferentes, senão dividem o mesmo carrinho.

              Conta PayPal

              O Client ID saiu desta aba e está no painel Identidade, no topo da página.

              O preço tem aqui o mesmo limite do link de cobrança. No Pix o valor viaja dentro do código que o aplicativo do banco lê, e o banco trava nele. No botão do PayPal o valor é calculado no navegador do cliente: tela, Pix e PayPal desta página nunca divergem entre si, mas alguém determinado monta um pagamento com outro valor. Não há como impedir sem um servidor, e este projeto não tem um. Confira o valor recebido antes de produzir.

              Dados do recebedor (Pix)

              A chave Pix, o nome e a cidade do recebedor saíram desta aba e estão no painel Identidade, no topo da página — os mesmos do Checkout e do Link de cobrança.

              Desconto para pagamento via Pix

              Com a cobrança de sinal ligada este campo não vale. O Pix passa a cobrar o sinal, e o desconto do Pix não se aplica sobre o sinal — seria desconto dobrado, porque o sinal já sai de um total que pode ter cupom. O número acima fica guardado, mas não entra no código gerado nem aparece na cesta enquanto o sinal estiver ligado. Para usar o desconto do Pix, volte a cobrar o valor cheio.

              Aviso de pagamento Pix via WhatsApp

              O número de destino saiu desta aba — é o WhatsApp do painel Identidade, no topo da página.

              A mensagem já vai com o identificador do pedido, os itens, o cupom e o valor. Ao clicar nele o carrinho do cliente é esvaziado — é o único momento em que a página sabe que a compra terminou. O Pix estático não avisa ninguém quando o dinheiro cai: a conferência é sua, no extrato.

              Depois do pagamento aprovado: levar o cliente a outra página

              Com o endereço preenchido, as duas variáveis saem no código mesmo com a chave em "não levar". Elas ficam no topo do bloco, inertes, esperando um true: assim você liga e desliga o upsell direto na página publicada, trocando UPSELL_ATIVO, sem voltar aqui e sem recolar nada. Com o endereço vazio nada disso é escrito. Endereço vazio com a chave em "sim, levar" é recusado na hora de gerar — ligado sem destino não faz nada e parece que faz.

              São aceitos uma âncora (#oferta), um caminho do site (/oferta-especial) ou um endereço http(s) inteiro. É a mesma regra do botão de ação da Contagem regressiva.

              No PayPal o cliente é levado assim que o pagamento é aprovado — houve confirmação de verdade. No Pix não existe aviso nenhum para a página quando o dinheiro cai, então quem leva é o botão "Já paguei", e quem clica nele pode ainda não ter pago. Se a sua oferta depende do primeiro pagamento estar feito, isso é decisão da campanha, não do código.

              2 Produtos do catálogo
              Importar as fotos de uma galeria inteira

                Isto é a mesma leitura que a aba Slideshow faz, com outro destino: em vez de virar uma lista de fotos, os endereços ficam aqui para você associar ao produto que estiver cadastrando. Nada do que você cola nestes dois campos é salvo.

                Cadastrar produto

                De 15 a 50 produtos é o tamanho para o qual esta vitrine foi desenhada. Cada produto pode ter os seus próprios itens opcionais, como no Checkout.

                O SKU é o seu código de produto, e ele vai na coluna “ID do produto” do relatório do PayPal — uma linha por produto e uma por opcional. Ele não é o código do pedido, que continua identificando o pedido inteiro no campo de conciliação — são dois campos com papéis diferentes. Em branco, a linha sai sem o campo — nunca com o código do pedido. Dois itens com o mesmo SKU são recusados na hora de gerar: repetido, ele não identifica nada. Aceita letras, números, hífen e ponto, até 127 caracteres.

                  Nenhum opcional neste produto.

                  A descrição de cada opcional é opcional e aparece só na hora de escolher, em cinza e menor, embaixo do nome — como a descrição curta do produto. No carrinho continuam só o nome e o valor, para o cliente conferir a conta sem texto repetido pelo meio. Texto longo quebra em mais linhas e nunca é cortado: quem controla o tamanho é você, escrevendo menos.

                  Catálogo

                    Nenhum produto cadastrado ainda. Use o formulário ao lado.

                    Vale para todos os itens vendidos por quantidade. O seletor vai de 0 até esse número, e no carrinho 0 tira a linha.

                    Cupons de desconto

                    O segundo campo é a validade (opcional — vale até o fim do dia; vazio = sem validade). O terceiro é o valor mínimo do pedido para este cupom valer — vazio = sem mínimo. A comparação é com o subtotal, antes do desconto do próprio cupom e antes do desconto do Pix; e se o cliente tirar itens e o pedido descer abaixo do mínimo, o cupom sai sozinho, com aviso na tela.

                      Nenhum cupom. O campo de cupom não aparecerá no carrinho.

                      Cupom não é secreto. Ele fica escrito dentro do código desta página, e qualquer visitante que abrir o código-fonte consegue lê-lo. Serve para divulgar um desconto, não para dar desconto a uma pessoa só. Isto já vale hoje no Checkout.

                      Cobrança de sinal

                      Ligado, o PayPal cobra o sinal, o Pix gera o QR do sinal, a mensagem do WhatsApp declara sinal pago e saldo devido, e a cesta passa a mostrar três linhas: total, sinal agora e saldo na entrega. A ordem da conta é quantidade multiplica → cupom incide sobre o total → o sinal sai do total já com o cupom. Um sinal maior que o total é recusado: a cesta avisa e não deixa pagar.

                      Os textos do sinal ficam na seção , e não aqui: o rótulo do sinal, o rótulo do saldo e as três respostas que o cliente lê antes de pagar (o que o sinal garante, o que acontece se ele desistir, o que fazer com o saldo). No Checkout e no Agendamento por pacote esses mesmos cinco campos ficam dentro deste quadro, ao lado do interruptor. São os mesmos campos nas quatro abas — o que muda é onde eles estão na tela, e esta linha existe para você não procurá-los aqui.

                      3 Vitrine, categorias e peso das fotos
                      Grade da vitrine

                      Abaixo dessa largura o carrinho deixa de ficar ao lado e vai para baixo da vitrine, e a grade cai para no máximo 2 colunas. Os dois botões da prévia atravessam esse corte, então dá para conferir os dois layouts.

                      Os botões só aparecem se houver ao menos um produto com categoria. Produto sem categoria aparece em "Todos" e em mais nada.

                      Tamanho das fotos pedidas

                      Por que isto é um campo e não um detalhe. As fotos do storage da Alboom saem todas com 1200 px de largura e de 157 a 868 KB cada (medido). Cinquenta delas numa grade seriam dezenas de megabytes. A página pede cada foto ao redimensionador da Alboom na largura escolhida aqui, e só pede a foto grande quando alguém abre o cartão de detalhe.

                      Estas larguras são um teto, não uma promessa. Foto pedida acima da largura que ela tem de verdade sai esticada: mais bytes, nenhum detalhe a mais — medido, uma foto de 735 px pedida a 1000 px devolve 297 KB no lugar de 220 KB. Por isso a ferramenta mede a largura de cada foto do catálogo (uma vez por foto, ao abrir esta aba ou ao cadastrar, e o número fica salvo) e a loja publicada nunca pede mais do que a foto tem. A linha acima diz quantas ficaram abaixo das larguras escolhidas. Foto que não passa pelo redimensionador não é medida: ela vai inteira de qualquer jeito.

                      Foto que não passa pelo redimensionador não encolhe. O redimensionador é um serviço da Alboom sobre o storage dela, e só alcança endereços completos em storage.alboom.ninja, alfred.alboompro.com ou cdn.alboompro.com (este último é o servidor das páginas comuns do site). Qualquer outra — outro servidor, ou um caminho do próprio site como /fotos/promo.jpg — vai inteira para a vitrine. O cadastro avisa quando isso acontece, e na lista do catálogo essas linhas aparecem com a origem em destaque. Quem decide é a mesma função que roda dentro do código gerado, então o aviso não tem como discordar da página publicada.

                      4 Textos e aparência
                      Textos

                      As três respostas aparecem na tela do cliente, logo abaixo das linhas de sinal e saldo e antes dos botões de pagamento — é ali que ele decide. Cada uma só aparece se estiver preenchida: as três em branco não desenham nada. Elas não entram na mensagem do WhatsApp, que é confirmação do que já foi pago.

                      Aparência
                      Resumo copiável

                      O resumo lista os itens, o cupom, o total e o sinal, com um botão de copiar — é o que o cliente manda para você quando quiser combinar alguma coisa antes de pagar.

                      Todos os campos desta seção já vêm com exatamente o texto que a loja usa hoje — mexer neles muda só o que o cliente lê, nunca uma conta. A seção nasce recolhida porque são dezenas de campos que quase nunca se mexe; o uso diário está nas seções acima.

                      Vitrine e cartão do item

                      O aviso de foto que não carregou é lido pelo cliente, não por você — é por isso que ele tem campo. Se acontecer, o endereço da foto está errado no cadastro.

                      Carrinho

                      O ✕ do botão de tirar não é campo, de propósito: campo vazio faria o botão sumir da tela sem erro nenhum. O que se configura é o que o leitor de tela anuncia — onde você escrever {nome}, entra o nome do produto.

                      Avisos do carrinho guardado

                      Onde você escrever {n}, entra quantos itens saíram — e por isso o número pode ficar onde você quiser na frase, inclusive no meio (“Removemos {n} itens…”). Sem {n}, o número não aparece.

                      Cupom de desconto

                      As duas frases acima só aparecem em cupom que tenha valor mínimo do pedido (seção 2). Onde você escrever {valor}, entra o mínimo daquele cupom, já na moeda do bloco. São duas porque são dois momentos: a primeira responde por que não aplicou; a segunda, por que o desconto que eu já tinha sumiu.

                      Onde você escrever {codigo} na linha do desconto, entra o código do cupom aplicado.

                      Pagamento pelo Pix

                      O separador de fábrica é neutro — o mesmo OU das outras três abas de pagamento —, então ele não muda quando você troca o meio prioritário (seção 1). Se você escrever uma frase que aponta para um lado (“ou pague com cartão”), confira-a ao trocar o meio prioritário: a ferramenta não reescreve texto seu. Onde houver {pct} no segundo campo entra o percentual do desconto.

                      Este aviso aparece dentro da área do Pix, logo acima do botão “Já paguei”. Ele não substitui a linha do rodapé de limites (“O Pix estático não avisa ninguém…”), que continua onde estava: uma é instrução na hora de pagar, a outra é a lista do que esta loja não faz — e a linha do PayPal, logo abaixo dela, começa com “também”.

                      Onde você escrever {pct}, entra o percentual de desconto do Pix.

                      Resumo copiável
                      Aviso pelo WhatsApp (botão “Já paguei”)

                      Marcadores: {cod} o código do pedido, {codigo} o código do cupom, {pct} o percentual do Pix e {valor} o valor já formatado. O *asterisco* é o negrito do WhatsApp.

                      Rodapé de limites

                      As seis frases saem emendadas em um parágrafo só no rodapé do carrinho, e só entra a que corresponde a um limite real daquela loja. Elas prometem menos de propósito: cada uma descreve algo que este bloco realmente não faz. Reescrevê-las para prometer mais é escrever uma frase que a loja não cumpre.

                      6 Biblioteca de presets
                      7 Prévia e código gerado
                      Ver a loja em:
                      Fundo da prévia (não entra no código gerado)

                      Só da prévia: o código gerado sai exatamente igual com qualquer fundo escolhido aqui. Ele existe porque o mesmo bloco pode ir para uma landing page com esquema de cores próprio, e cor sobre fundo errado engana — o que parece legível sobre branco pode sumir sobre uma seção escura.

                      A prévia executa o código gerado de verdade: é o mesmo bloco que sai na caixa ao lado, rodando dentro de um quadro isolado. Filtro, cartão de detalhe, carrinho, cupom e o Pix funcionam aqui como funcionarão na página. O que ainda difere da página publicada: o carrinho do quadro é guardado numa memória de mentira (o quadro não suja o carrinho do seu navegador, e por isso ele volta vazio a cada atualização da prévia); o QR Code é desenhado por uma biblioteca baixada da internet, então só aparece depois que ela carrega; o botão do PayPal não é o botão de verdade — o SDK não roda aqui e ele sai como desenho, com o valor que iria na ordem medido dentro do próprio bloco; o botão "Já paguei" não abre o WhatsApp — o quadro desliga a abertura de abas, e avisa em vermelho se não conseguir desligar; e o quadro não carrega o CSS do tema do site. Com o upsell ligado, porém, clicar em “Já paguei” leva a prévia para a sua página de upsell — exatamente como a página publicada faria. O quadro não consegue desligar isso: o endereço da página é imutável no navegador (medido em 13/09/2026 — trocar location, location.href ou location.assign lança erro, e a troca direta falha em silêncio), e desligar por conta própria só seria possível mudando o código gerado, que é justamente o que a prévia não pode fazer. Mexer em qualquer campo remonta a prévia.

                      Código da loja (componente HTML) Copiado!

                      Mudar produto, preço, cupom ou aparência não apaga o que está nesta caixa: quem avisa que o código ficou velho é o painel consolidado, ao lado das abas. Clique em Gerar código de novo antes de colar.

                      Instrução de uso do código gerado

                      Onde colar: crie no Prosite a página da loja, ponha nela um componente HTML e cole ali o código acima. Publique — e teste na página publicada, não no editor: o Prosite processa o código na publicação.

                      Como o cliente usa: ele vê a grade, filtra por categoria se você tiver criado categorias, clica num item para abrir o cartão de detalhe na mesma página, escolhe os opcionais e a quantidade, adiciona ao carrinho e paga. Não há navegação entre páginas: tudo acontece nesta.

                      Para atualizar o catálogo: mude aqui, clique em Gerar código e cole por cima. É o mesmo fluxo de todas as outras abas — o catálogo vive dentro do código da página.

                      O que esta loja não faz — leia antes de publicar

                      Não há registro de pedidos. Um pedido existe como três rastros: a mensagem que chega no seu WhatsApp, a transação no PayPal e o Pix na sua conta. Não existe uma lista de pedidos em lugar nenhum, e nenhuma tela para consultá-los.

                      Não há confirmação automática. Nem o Pix estático nem o PayPal têm para onde avisar esta página quando o dinheiro cai. Você confere e libera à mão, pelo extrato.

                      Não há estoque. Todos os itens são tratados como sob encomenda: o mesmo item pode ser comprado quantas vezes for. Se um dia você vender uma peça única, saiba que não há como esta página impedir que duas pessoas a comprem — impedir exigiria um servidor guardando o que já foi vendido, e este projeto não tem um.

                      O cupom não é secreto — está dentro do código desta página, à vista de quem abrir o código-fonte.

                      O carrinho não atravessa aparelhos. Ele fica no armazenamento do navegador: montado no celular, no computador aparece vazio. O carrinho sobrevive a recarregar a página; o cupom não — o cliente digita de novo (medido). E se você regerar o bloco com o catálogo mudado, as linhas que não existem mais são descartadas com aviso no carrinho do cliente, em vez de virarem uma compra de outro item.

                      O preço tem o mesmo limite do link de cobrança. Tela, Pix e PayPal desta página não divergem entre si — eles leem a mesma conta. Mas o valor do PayPal é montado no navegador do cliente, e alguém determinado monta um pagamento com outro valor. A garantia é de coerência, não de valor: confira o extrato antes de produzir.

                      Uma Mini loja por página. Dois blocos desta aba na mesma página do Prosite não funcionam: os dois procuram a mesma caixa (id="fcmloja"), então o primeiro bloco desenha o catálogo do segundo e o segundo não desenha nada. É a mesma limitação do Checkout (id="fcuni"), e ela é conhecida e não corrigida — corrigir mudaria o identificador dos dois blocos e de todo código já colado no site. Duas lojas, duas páginas.

                      Códigos de loja diferentes, mesmo em páginas diferentes. O código da loja é a chave do carrinho no navegador do cliente. Se duas lojas usarem o mesmo código, o carrinho montado numa é lido pela outra — e agora ele é descartado com aviso na tela do cliente (cada bloco carrega a assinatura do próprio catálogo, e recusa carrinho que não seja dele). O aviso conserta o sintoma, não a causa: use códigos diferentes.

                      Depois de publicar: abra a página em aba anônima, monte um carrinho, gere o Pix e confira no aplicativo do banco que o valor lido do QR Code é o mesmo que a página mostra. Depois recarregue a página e confirme que o carrinho continua lá.

                      Efeitos que valem para a página inteira, e não para um componente. O código sai em duas partes — um bloco para a Tag Head da página e um componente HTML com os elementos que o efeito anima. Nada aqui usa JavaScript.

                      1 Efeito e alcance
                      Qual efeito

                      Dois efeitos podem conviver na mesma página: cada um usa classes e nomes de animação próprios. Gere um, cole, e volte aqui para gerar o outro.

                      Página inteira cobre a janela e acompanha a rolagem. Dentro de um bloco prende o efeito ao componente, com a altura que você definir.

                      Se o efeito não cobrir a tela toda, é porque algum bloco do tema tem transform, e isso quebra a camada fixa — ela passa a se prender àquele bloco. Não dá para saber isso daqui: só a página publicada responde. Nesse caso, troque para dentro de um bloco.

                      Na página inteira este campo não vale. Ali a camada cobre a janela, e a altura é a da janela do visitante. O número acima fica guardado e volta a valer no alcance "dentro de um bloco".

                      Vale para todos os efeitos

                      Por que este campo existe: um floco de 24 px ocupa 2 % da largura num computador e 6 % num celular — ele parece muito maior lá, mesmo tendo o mesmo tamanho. Aqui o tamanho passa a ser proporcional à largura da tela: exato num computador, e reduzido até esta porcentagem num celular. Com 100 % o tamanho fica fixo, como era antes.

                      2 Aparência do efeito
                      Partículas que caem (neve e confete)

                      O floco é desenhado com o caractere de neve. Sobre fundo claro, branco some — nesse caso escolha um tom mais escuro.

                      O que este efeito não faz

                      3 Biblioteca de presets
                      4 Prévia e códigos gerados
                      Fundo da prévia

                      Por que isto existe: o floco é branco por padrão, e branco sobre fundo claro é invisível. Aqui dá para ver isso antes de publicar. Esta escolha é só da prévia: os dois códigos saem exatamente iguais com qualquer fundo aqui.

                      Ver como:

                      A prévia executa o mesmo código que sai abaixo, dentro de um quadro isolado com a largura real de cada aparelho — é por isso que o modo Celular mostra o tamanho proporcional de verdade. O que ela não mostra: a tipografia e os blocos da sua página, e se o tema quebra a camada fixa.

                      1) Tag Head desta página Copiado!

                      2) Componente HTML desta página Copiado!

                      Coloque este componente no fim da página. A camada é fixa, então a posição dele no fluxo não muda onde o efeito aparece — mas um componente no fim não empurra nada do que já está montado.

                      Como usar

                      1. Escolha o efeito e o alcance. 2. Ajuste a aparência e confira na prévia, nos dois modos. 3. Clique em Gerar código. 4. Cole o código 1 na Tag Head daquela página — o Prosite não tem cabeçalho global. 5. Crie um componente HTML no fim da página e cole o código 2.

                      Confira o número de elementos depois de colar. O código 2 traz exatamente a quantidade que você pediu. Se o editor comer algum, os últimos ficam sem regra e não aparecem — sem erro nenhum na tela.

                      Depois de publicar, confira três coisas: o efeito aparece onde você esperava; os botões da página continuam clicáveis (a camada não bloqueia cliques, mas vale testar); e o efeito aparece sobre o fundo real da sua página, no celular também.

                      Agendamento por pacote — agrupa vários tipos de agendamento do TidyCal numa página só. O cliente escolhe o pacote pelo preço e vê apenas o calendário daquela duração. Gera também a página de obrigado, que cobra o pacote agendado — com itens opcionais e cupom de desconto — por Pix ou cartão.

                      1 Formas de pagamento e identificação
                      Como o cliente vai pagar

                      O código gerado carrega apenas o necessário para a forma escolhida: com "somente Pix" o bloco não pede Client ID nem carrega o SDK do cartão; com "somente PayPal" ele não pede chave Pix nem carrega a maquinaria do Pix.

                      Decide as duas coisas juntas: a ordem em que os meios aparecem no bloco e qual preço fica em destaque. É um campo só de propósito — separados, dava para publicar um Pix em cima com o preço do cartão grande. O outro preço continua à vista, na linha menor, para o cliente nunca ser surpreendido na hora de pagar.

                      Pagamento

                      Com a cobrança de sinal ligada este campo não vale. O Pix passa a cobrar o sinal, e o desconto do Pix não se aplica sobre o sinal — seria desconto dobrado, porque o sinal já sai de um total que pode ter cupom. O número acima fica guardado, mas não entra no código gerado — nem na página de obrigado, nem na vitrine, que deixa de anunciar o selo para não prometer um desconto que a página de pagamento não dá mais. Para usar o desconto do Pix, volte a cobrar o valor cheio.

                      Só faz sentido havendo as duas formas: sem uma delas não existe outro preço para descontar contra, então este campo some com "somente Pix" ou "somente PayPal".

                      Este número é uma promessa sobre o que o cliente vai encontrar no cartão, e quem decide isso é a operadora — a ferramenta não tem como conferir. Deixe em 1 até confirmar no PayPal quantas parcelas a sua conta oferece. O valor da parcela é calculado dividindo o preço, e afirma parcelamento sem juros.

                      Os dois botões de cartão são desenhados pelo PayPal, e o texto e a marca deles são do PayPal — isso não dá para mudar. Em todo o resto da página, o cliente lê apenas "no cartão".

                      Cobrança de sinal

                      As três respostas aparecem na tela do cliente, logo abaixo das linhas de sinal e saldo e antes dos botões de pagamento — é ali que ele decide. Cada uma só aparece se estiver preenchida: as três em branco não desenham nada. Elas não entram na mensagem do WhatsApp, que é confirmação do que já foi pago.

                      Ligado, o Pix gera o QR do sinal, o cartão cobra o sinal e o parcelamento passa a ser sobre o sinal — é o valor que a operadora cobra naquele momento, e parcelar um número que ninguém está cobrando confunde. A página de obrigado passa a mostrar três linhas: total, sinal agora e saldo. A ordem da conta é opcionais somam → cupom incide sobre o total → o sinal sai do total já com o cupom. Um sinal maior que o total é recusado: a página avisa e não deixa pagar.

                      A vitrine continua anunciando o preço cheio de cada pacote — é o que o cliente vai pagar ao todo. O que ela perde é o selo e a segunda linha de preço, porque com sinal não existe mais desconto no Pix: os dois meios cobram o mesmo sinal.

                      Identificação do agendamento
                      Dados do recebedor (Pix)

                      A chave Pix, o nome e a cidade do recebedor saíram desta aba. Eles são os mesmos aqui, no Checkout, no Link de cobrança e na Mini loja, e por isso ficam num lugar só: o painel Identidade, no topo da página.

                      Conta PayPal

                      O Client ID saiu desta aba e está no painel Identidade, no topo da página, com a chave Pix, o recebedor e o WhatsApp. É a mesma conta nas quatro abas de pagamento.

                      A moeda aqui é sempre o real (BRL), e não há campo para trocá-la — nem nesta aba nem no Link de cobrança. O Pix só existe em reais, e o cartão cobra o mesmo pedido: um seletor de moeda faria o QR Code e o cartão pedirem valores diferentes. O Checkout e a Mini loja têm o seletor porque ali é possível vender só com cartão, sem Pix nenhum na página.

                      2 Famílias de pacotes
                      Cadastrar família

                      A família é o passo 1 da vitrine: o cliente escolhe o tipo de ensaio e só então vê os pacotes daquela família. Com uma família só a vitrine volta a dois passos e a família não aparece para ninguém — nem no código gerado.

                      O segundo campo é a descrição curta (opcional), que aparece embaixo do nome no cartão da família.

                      Famílias cadastradas

                        Uma família só — a vitrine mostra dois passos, sem perguntar o tipo. Crie a segunda para a vitrine passar a perguntar.

                        3 Pacotes e itens opcionais
                        Cadastrar pacote

                        Os opcionais deste pacote só aparecem para o cliente na página de obrigado — o TidyCal não sabe o que é um opcional, então a vitrine mostra só o preço do pacote.

                        Preenchido, este campo manda — a Duração ao lado deixa de ser lida para o cálculo e serve só de texto na tela. Vazio, vale a leitura da Duração, como sempre. Use-o quando quiser escrever a duração do seu jeito (Meia diária, 2 horas + intervalo) e ainda assim ter o valor médio da hora. Aceita fração: 1.5 para uma hora e meia.

                        O texto aparece no cartão do pacote exatamente como você escrever. Ele é também de onde sai a duração usada no valor médio da hora — e para isso a ferramenta precisa entender um número. Ela entende 2 horas, 2h, 2, 1h30, 90 min e 1,5 h. Quando não entende, ela não chuta: o valor por hora simplesmente não sai naquele pacote, e a lista abaixo avisa com "duração não entendida". O valor por hora só aparece acima de uma hora.

                        O SKU não é o código acima, e isso é de propósito: o código identifica o agendamento no TidyCal e na URL; o SKU identifica o produto vendido, na coluna “ID do produto” do relatório do PayPal. Hoje eles podem coincidir — mas quem preenche é você, e olhando o relatório dá para saber que aquele valor foi escolhido, e não herdado.

                        Cole o endereço completo deste pacote, do jeito que o TidyCal mostra — inclusive em domínio próprio (ex.: https://agendamento.seudominio.com.br/mini-1-hora). Cada pacote pode ter o seu, até em domínios diferentes. Digitar só o caminho também vale: vira um endereço em https://tidycal.com/, e o campo se corrige sozinho ao sair dele. O botão abre numa aba nova exatamente o endereço digitado — confira antes de gerar, porque o domínio deixou de ser fixo e só você sabe qual é o seu.

                        O SKU é o seu código de produto, e ele vai na coluna “ID do produto” do relatório do PayPal — uma linha por produto e uma por opcional. Ele não é o código do pedido, que continua identificando o pedido inteiro no campo de conciliação — são dois campos com papéis diferentes. Em branco, a linha sai sem o campo — nunca com o código do pedido. Dois itens com o mesmo SKU são recusados na hora de gerar: repetido, ele não identifica nada. Aceita letras, números, hífen e ponto, até 127 caracteres.

                          Nenhum opcional neste pacote.

                          A descrição de cada opcional é opcional e aparece só na página de obrigado, na hora de escolher, em cinza e menor, embaixo do nome — como a descrição curta de um produto. Ela não entra no resumo do pagamento, que fica só com nome e valor. Texto longo quebra em mais linhas e nunca é cortado: quem controla o tamanho é você, escrevendo menos.

                          Pacotes cadastrados

                            Nenhum pacote cadastrado ainda. Use o formulário ao lado.

                            Vale para os opcionais marcados como "vende por quantidade". O seletor vai de 0 até esse número, e 0 equivale a não marcar o opcional.

                            Cupons de desconto

                            O segundo campo é a validade (opcional — vale até o fim do dia; vazio = sem validade). O terceiro é o valor mínimo do pedido para este cupom valer — vazio = sem mínimo. A comparação é com o subtotal, antes do desconto do próprio cupom e antes do desconto do Pix; e se o cliente tirar itens e o pedido descer abaixo do mínimo, o cupom sai sozinho, com aviso na tela.

                              Nenhum cupom. O campo de cupom não aparecerá na página de obrigado.

                              4 Página de obrigado e marcadores
                              Página de obrigado

                              Se você mudar o preço de um pacote, quem agendou antes e pagar depois verá o preço novo. O preço mora no código da página, não no endereço — foi assim que se evitou que o cliente pudesse editá-lo na barra de endereço.

                              Depois do pagamento aprovado: levar o cliente a outra página

                              Com o endereço preenchido, as duas variáveis saem no código mesmo com a chave em "não levar". Elas ficam no topo do bloco, inertes, esperando um true: assim você liga e desliga o upsell direto na página publicada, trocando UPSELL_ATIVO, sem voltar aqui e sem recolar nada. Com o endereço vazio nada disso é escrito. Endereço vazio com a chave em "sim, levar" é recusado na hora de gerar — ligado sem destino não faz nada e parece que faz.

                              São aceitos uma âncora (#oferta), um caminho do site (/oferta-especial) ou um endereço http(s) inteiro. É a mesma regra do botão de ação da Contagem regressiva.

                              No cartão o cliente é levado assim que o pagamento é aprovado — houve confirmação de verdade. No Pix não existe aviso nenhum para a página quando o dinheiro cai, então quem leva é o botão “Já paguei”, e quem clica nele pode ainda não ter pago. Se a sua oferta depende do primeiro pagamento estar feito, isso é decisão da campanha, não do código.

                              Marcadores da página de obrigado

                              O TidyCal manda estes dados no endereço de redirecionamento (saída 2, abaixo). Escolha quais viajam e o texto que aparece quando alguém abre a página sem passar pelo agendamento.

                              No texto da sua página, escreva {{nome}}, {{data}}, {{hora}} e {{quando}} onde o dado deve entrar — mais {{pacote}}, {{duracao}} e {{valor}}, que vêm do catálogo cadastrado ao lado e viajam sempre, sem interruptor.

                              5 Textos e aparência
                              Textos

                              Entra logo abaixo do título, antes do passo 1. Onde você escrever {pct}, entra o desconto do Pix configurado na seção — assim ele acompanha sozinho quando você mudar o desconto. Escrever o número à mão faz o subtítulo mentir no dia em que o desconto mudar, sem erro e sem aviso.

                              O {valor} é o menor valor médio da hora daquela família, no Pix — o bloco divide o preço de cada pacote pela duração dele e pega o menor resultado. A duração sai do campo Duração de cada pacote (ou do campo Horas, quando preenchido).

                              Os quatro campos acima só entram no código quando existem duas ou mais famílias.

                              Vitrine — preço do pacote

                              O mesmo texto aparece nos cartões da vitrine e no carrinho da página de obrigado — é um campo só para os dois lugares.

                              Sai ao lado do preço, pequeno e sem destaque, dividindo o preço que está ali pela duração do pacote. Vazio não aparece. A duração é lida do campo Duração de cada pacote — a lista de pacotes mostra quantas horas a ferramenta entendeu, e quando ela não entende, a linha simplesmente não sai para aquele pacote.

                              Onde você escrever {pct} entra o percentual de desconto, {n} o número de parcelas, e {valor} o preço já formatado — no mesmo padrão {data} que a aba Link de cobrança usa para o prazo.

                              Aparência

                              As duas valem para os dois valores médios — o da linha do Pix e o da linha do cartão. Eles nascem com um âmbar claro, um degrau abaixo do selo verde do desconto: a etiqueta existe para separar o número da frase ao lado, não para competir com o preço. Para tirar o fundo e deixar só o texto, ponha o mesmo tom do fundo do cartão.

                              Calendário: quando começar a carregar

                              Os números abaixo foram medidos na página publicada, com o calendário real, em 04/09/2026. A primeira carga de um calendário custa 9115 ms — é o download dos arquivos do TidyCal, e esse custo existe uma vez só. Depois que qualquer calendário carregou, cada carga seguinte custa 600 a 800 ms e cerca de 13 KB (22 requisições, quase todas vindas do cache). Os oito calendários de um catálogo carregando juntos: 2034 ms e cerca de 65 MB de memória.

                              Só ao escolher: nada é carregado antes do clique. Quem entra e sai sem escolher nada não paga nada — e quem escolhe paga os 9115 ms inteiros, esperando na frente do quadro vazio. Um na abertura (padrão): um calendário começa a carregar assim que a página abre, para o custo de primeira vez ser pago enquanto o cliente ainda está lendo a lista de pacotes; depois disso qualquer pacote custa os 600 a 800 ms. Todos na abertura: todos os calendários do catálogo carregam juntos, e aí qualquer pacote já está pronto quando o cliente clica — ao preço medido de 65 MB com oito pacotes.

                              Nas três escolhas, calendário que já carregou continua vivo: cada pacote visitado fica com o quadro dele na página, e trocar de família, voltar e escolher de novo não recarrega nada. Antes disso havia um quadro só, reapontado — trocar de família jogava fora o que já tinha baixado, e a volta custava uma carga nova (medido: 670 ms).

                              Medidas: calendário e cartões

                              É uma troca, e os dois lados foram medidos em 03/09/2026 contra o TidyCal de verdade. Medindo o formulário: o quadro fica com 764 px em repouso e vai para 1662 px quando o formulário abre — exatamente o que ele precisa. O preço é um vão vazio de cerca de 205 px embaixo do calendário em repouso, no computador: a lista de horários do TidyCal rola por dentro, e esta medição conta o conteúdo inteiro dela — então o vão cresce junto com o número de horários. No celular esse preço é de 1 px. Abrindo espaço pela altura calibrada: o quadro fica com 559 px em repouso, sem vão nenhum, mas o formulário é invisível para a medição — quem abre espaço são as duas alturas abaixo, e são elas que precisam caber nele. Se ficarem curtas, aparece barra de rolagem dentro do calendário; se sobrarem, é vão vazio. A altura calibrada é o padrão, e a razão é medida — não cautela. Medir deveria ser melhor, porque dispensa o número escrito à mão e acompanha o formulário se ele crescer. Mas em 03/09/2026 a mesma página foi carregada quatro vezes seguidas e a altura medida foi aplicada em uma delas: nas outras três o quadro ficou nos 700 px iniciais. A biblioteca do próprio TidyCal estava no comando nas quatro, e recebeu as mesmas duas mensagens em todas — ou seja, não é o nosso código competindo com o deles, é a medição por este método que não é confiável. Defeito que aparece em uma carga de quatro é pior que uma altura fixa: funciona quando você testa e falha quando o cliente usa. O campo fica aqui para você experimentar na sua página — se na sua conta ele se mostrar estável, é a escolha melhor.

                              O que vale para as duas escolhas, e é bom saber antes: depois que o cliente abre o formulário de reserva, o quadro não encolhe sozinho — o TidyCal não avisa quando o formulário fecha, então nem a medição nem o recolhimento da altura calibrada chegam a acontecer, e o espaço fica até a página ser recarregada. Isso não é desta escolha: já era assim, e é igual nos dois lados. O que muda é quanto fica sobrando — cerca de 1662 px medindo, contra 2350 px pela altura calibrada de fábrica.

                              Medidas calibradas em produção, com o formulário do TidyCal aberto. São o mesmo par usado na aba Agendamento TidyCal — não precisam mudar a não ser que o seu formulário seja diferente do padrão.

                              O normal é o calendário ocupar a altura natural dele (cerca de 559 px no computador) e crescer só no instante em que o formulário abre. Sempre deixa o quadro na altura calibrada acima o tempo todo: com os 2350 px de fábrica, são quase 1800 px de vão vazio embaixo do calendário em toda visita, mesmo em quem nunca clicar num horário. Ligue apenas se, na sua página publicada, o modal de confirmação do TidyCal aparecer cortado — é o sinal de que o aviso de abertura não está chegando ao bloco. Com o calendário medindo o formulário esta escolha não faz nada, e por isso ela nem aparece: a altura vem medida, e não há espaço calibrado para abrir.

                              Abaixo desta largura os cartões da vitrine viram linhas compactas (nome e duração à esquerda, preço à direita, sem a linha do que inclui). São duas medidas diferentes: a de cima decide a altura do calendário e é lida em JavaScript; esta decide o formato dos cartões e é lida em CSS. Amarrar as duas ao mesmo número faria uma calibragem de altura reformatar a vitrine inteira, sem aviso. É por isso que esta continua aparecendo quando o calendário mede o formulário: ela é da vitrine, não do calendário.

                              6 Textos da página de obrigado
                              Quando o agendamento não é encontrado

                              Aparece se alguém abrir a página de obrigado sem ?pac= reconhecido — link copiado errado, por exemplo.

                              Itens opcionais e cupom de desconto

                              As duas frases acima só aparecem com a cobrança de sinal ligada (seção ). Elas explicam por que o pagamento está travado: reescrevê-las é livre, mas quem as lê está sem conseguir pagar — diga o que fazer. O pacote aqui é fixo, então a saída é o cupom ou os opcionais, e não "escolher mais itens".

                              As duas frases acima só aparecem em cupom que tenha valor mínimo do pedido (seção ). Onde você escrever {valor}, entra o mínimo daquele cupom, já na moeda do bloco. São duas porque são dois momentos: a primeira responde por que não aplicou; a segunda, por que o desconto que eu já tinha sumiu.

                              Onde você escrever {codigo} na linha do desconto, entra o código do cupom aplicado. Sem {codigo}, o código não aparece — a frase sai como você escreveu. Até 03/09/2026 este campo valia só a palavra e o código vinha colado por fora, num parêntese que você não controlava.

                              Prazo da reserva

                              Estas três frases explicam que a liberação do horário é feita à mão, por você. Se reescrevê-las, mantenha isso claro — prometer confirmação automática é prometer o que o sistema não faz.

                              Onde você escrever {data} na barra do prazo, entra o dia e a hora em que a reserva vence.

                              Quando o pagamento pelo cartão é aprovado ou falha
                              Seção de pagamento — Pix e cartão

                              Aparece dentro da área do Pix, logo acima do botão “Já paguei” — que é onde o cliente está olhando na hora de pagar. Sem ele, o cliente paga, a tela não muda, e ele pode sair achando que a reserva já está confirmada. Até 13/09/2026 esta aba não tinha o botão, e por isso o texto dela mandava “me avise” em vez de mandar tocar nele; agora o botão existe e a frase é a mesma das outras três abas de pagamento.

                              Botão e mensagens do WhatsApp
                              Botão “Já paguei” e a mensagem dele

                              Aparece dentro da área do Pix, logo abaixo do aviso de que o Pix não confirma sozinho — e só depois que o cliente gera o código. É o mesmo botão que o Checkout, a Mini loja e o Link de cobrança têm. A mensagem cita o identificador da reserva e o valor, que é o que você usa para achar a cobrança no extrato.

                              Marcadores: {cod} o identificador da reserva, {codigo} o código do cupom, {pct} o percentual do Pix e {valor} o valor já formatado. O *asterisco* é o negrito do WhatsApp.

                              7 Biblioteca de presets
                              8 Prévia e códigos gerados
                              Ver como:
                              Fundo da prévia (não entra no código gerado)

                              Só da prévia: o código gerado sai exatamente igual com qualquer fundo escolhido aqui. Ele existe porque o mesmo bloco pode ir para uma landing page com esquema de cores próprio, e cor sobre fundo errado engana — o que parece legível sobre branco pode sumir sobre uma seção escura.

                              A prévia roda o código gerado de verdade: escolher uma família mostra só os pacotes dela, escolher um pacote acende o passo do calendário, e o preço troca ao vivo. O modo Celular usa 380 pixels de largura lógica — abaixo dos dois cortes configurados na seção no padrão de fábrica, então os cartões aparecem como linhas compactas. Se você baixar a "Largura de corte das linhas compactas" para menos de 380, a prévia passa a mostrar cartões altos num quadro estreito: é o que a página publicada faria nessa largura, não um defeito da prévia. O que ainda difere da página publicada: o calendário do TidyCal não carrega aqui (é outro domínio, e a prévia não deve depender de rede) — no lugar dele aparece um retângulo cinza avisando "Aqui entra o calendário do TidyCal deste pacote."; e o quadro não carrega o CSS do tema do site.

                              Esta prévia navega de verdade para um endereço próprio da ferramenta com ?pac= do pacote escolhido, e executa o componente 3 de verdade ali dentro — inclusive o identificador de conciliação e o prazo da reserva. O que ainda difere da página publicada: o SDK do PayPal não carrega aqui (outro domínio) — no lugar do botão real aparece um desenho, com o valor que iria na ordem medido no próprio bloco; e o botão "Falar no WhatsApp" tem o mesmo endereço do bloco de verdade, então evite clicar nele dentro da prévia.

                              1. Componente HTML da vitrine Copiado!

                              2. Endereços de redirecionamento (cole no TidyCal) Copiado!

                              3. Componente HTML da página de obrigado Copiado!

                              Calculadora de álbum — o cliente escolhe o tamanho do álbum, quantas fotos quer e os acabamentos, e a página mostra na hora quantas lâminas dá, o desconto por quantidade e o valor a pagar, por Pix ou cartão. Substitui a calculadora antiga, que vivia travada num quadro estreito e ficava de fora do painel consolidado.

                              1 Como o álbum é orçado
                              O preço

                              É deste número que sai o valor base do álbum: quantidade de fotos × preço por foto. O desconto por quantidade incide só sobre essa base; os acabamentos entram depois dela.

                              Os dois limites valem para todos os tamanhos, e é a média de fotos por lâmina de cada tamanho que os transforma em mínimo e máximo de fotos. É por isso que o mesmo par de números dá faixas diferentes em cada tamanho.

                              Tamanhos do álbum

                              É a média do seu projeto, não uma regra: num álbum grande cabem mais fotos por lâmina, e é esse número que converte fotos em lâminas na tela do cliente.

                              Em branco, o mínimo sai do mínimo de lâminas ao lado. Preencha só quando este tamanho precisar de um piso próprio.

                              O SKU é o seu código de produto, e ele vai na coluna “ID do produto” do relatório do PayPal. Ele não é o código do pedido, que identifica o pedido inteiro no campo de conciliação — são dois campos com papéis diferentes.

                              Tamanhos cadastrados

                                Nenhum tamanho cadastrado ainda. Sem ao menos um, a calculadora não tem o que oferecer ao cliente.

                                2 Desconto por quantidade
                                Cadastrar faixa de desconto

                                O desconto incide só sobre o valor base do álbum — os acabamentos ficam de fora dele. Vale a faixa de maior número de lâminas que o álbum alcançar.

                                Faixas cadastradas

                                  Nenhuma faixa. O álbum sai sempre pelo preço cheio, e a frase de incentivo não aparece para o cliente.

                                  3 Acabamentos opcionais
                                  Cadastrar acabamento

                                  Os acabamentos entram depois do desconto por quantidade: eles somam ao valor já descontado, e não recebem o desconto das lâminas.

                                  Acabamentos cadastrados

                                    Nenhum acabamento. A seção de acabamentos não aparece na página do cliente.

                                    4 Pagamento
                                    Como o cliente vai pagar

                                    O código gerado carrega apenas o necessário para a forma escolhida: com "somente Pix" o bloco não pede Client ID nem carrega o SDK do cartão; com "somente PayPal" ele não pede chave Pix nem carrega a maquinaria do Pix.

                                    Decide as duas coisas juntas: a ordem em que os meios aparecem no bloco e qual preço fica em destaque. É um campo só de propósito — separados, dava para publicar um Pix em cima com o preço do cartão grande. O outro preço continua à vista, na linha menor, para o cliente nunca ser surpreendido na hora de pagar.

                                    Pagamento

                                    Só faz sentido havendo as duas formas: sem uma delas não existe outro preço para descontar contra, então este campo some com "somente Pix" ou "somente PayPal".

                                    Este número é uma promessa sobre o que o cliente vai encontrar no cartão, e quem decide isso é a operadora — a ferramenta não tem como conferir. Confira no PayPal quantas parcelas a sua conta oferece. O valor da parcela é calculado dividindo o preço, e afirma parcelamento sem juros.

                                    Cobrança de sinal

                                    As três respostas aparecem na tela do cliente, logo abaixo das linhas de sinal e saldo e antes dos botões de pagamento — é ali que ele decide. Cada uma só aparece se estiver preenchida. Elas não entram na mensagem do WhatsApp, que é confirmação do que já foi pago.

                                    Nesta aba os três já nascem preenchidos, e só nesta: a política deles já está publicada na sua página de álbuns, então o padrão não inventa nada — repete o que você já diz. Reescreva à vontade.

                                    Ligado, o Pix gera o QR do sinal, o cartão cobra o sinal e o parcelamento passa a ser sobre o sinal — é o valor que a operadora cobra naquele momento. A ordem da conta é desconto por lâminas sobre a base → acabamentos somam → o sinal sai do total. Um sinal maior que o total é recusado: a página avisa e não deixa pagar.

                                    Dados do recebedor (Pix)

                                    A chave Pix, o nome e a cidade do recebedor não ficam nesta aba. Eles são os mesmos aqui, no Checkout, no Link de cobrança, na Mini loja e no Agendamento por pacote, e por isso ficam num lugar só: o painel Identidade, no topo da página.

                                    Conta PayPal

                                    O Client ID não fica nesta aba e está no painel Identidade, no topo da página, com a chave Pix, o recebedor e o WhatsApp. É a mesma conta em todas as abas de pagamento.

                                    A moeda aqui é sempre o real (BRL), e não há campo para trocá-la. O Pix só existe em reais, e o cartão cobra o mesmo pedido: um seletor de moeda faria o QR Code e o cartão pedirem valores diferentes.

                                    Depois do pagamento aprovado: levar o cliente a outra página

                                    Com o endereço preenchido, as duas variáveis saem no código mesmo com a chave em "não levar". Elas ficam no topo do bloco, inertes, esperando um true: assim você liga e desliga o upsell direto na página publicada, sem voltar aqui e sem recolar nada. Com o endereço vazio nada disso é escrito. Endereço vazio com a chave em "sim, levar" é recusado na hora de gerar — ligado sem destino não faz nada e parece que faz.

                                    No cartão o cliente é levado assim que o pagamento é aprovado — houve confirmação de verdade. No Pix não existe aviso nenhum para a página quando o dinheiro cai, então quem leva é o botão “Já paguei”, e quem clica nele pode ainda não ter pago.

                                    WhatsApp e resumo do pedido

                                    O botão abre o WhatsApp com o resumo do álbum já escrito — tamanho, fotos, lâminas e valor. O número sai do painel Identidade.

                                    O resumo lista o tamanho, a quantidade de fotos, as lâminas, os acabamentos, o desconto e o total, com um botão de copiar — é o que o cliente manda para você quando quiser combinar alguma coisa antes de pagar.

                                    5 Aparência
                                    Cores
                                    Medidas do bloco

                                    A segunda medida é lida no espaço que o bloco ocupa, e não na janela do navegador: num componente estreito dentro de uma página larga, o bloco continua numa coluna só — que é o que o cliente vê. Acima dela, o orçamento vai para o lado do seletor.

                                    Todos os campos desta seção já vêm com exatamente o texto que a calculadora usa — mexer neles muda só o que o cliente lê, nunca uma conta. A seção nasce recolhida porque são dezenas de campos que quase nunca se mexe; o uso diário está nas seções acima.

                                    Os marcadores entre chaves são trocados pelo bloco na hora: {n} um número (fotos, lâminas ou parcelas, conforme a frase), {valor} um valor já formatado em reais, {pct} um percentual, {min} e {max} os extremos da faixa, {cm} o maior lado do tamanho escolhido, {lam} um número de lâminas, {faltam} quantas fotos faltam para a próxima faixa, {prox} o percentual dessa próxima faixa, {cod} o código do pedido e {codigo} o código do cupom. Marcador que você apagar simplesmente não aparece — a frase sai como você escreveu.

                                    Cabeçalho
                                    Seletor de tamanho e de quantidade

                                    Os três campos acima não aparecem na tela: eles são lidos em voz alta por quem usa leitor de tela. Deixá-los em branco tira o nome do controle, e o cliente ouve só "botão".

                                    Incentivo para a próxima faixa

                                    Os dois campos acima montam o trecho que entra no {faltam} das três frases abaixo — é o que faz a frase dizer "1 foto" em vez de "1 fotos".

                                    O orçamento
                                    Pagamento

                                    As frases acima só aparecem com a cobrança de sinal ligada (seção ). Elas explicam por que o pagamento está travado: reescrevê-las é livre, mas quem as lê está sem conseguir pagar — diga o que fazer.

                                    Resumo do pedido
                                    WhatsApp

                                    Marcadores: {cod} o identificador do pedido, {codigo} o código do cupom, {pct} o percentual do Pix e {valor} o valor já formatado. O *asterisco* é o negrito do WhatsApp.

                                    Os três textos que explicam o sinal não estão aqui: eles ficam na seção , junto da chave que os liga.

                                    7 Biblioteca de presets
                                    8 Prévia e código gerado
                                    Ver como:
                                    Fundo da prévia (não entra no código gerado)

                                    Só da prévia: o código gerado sai exatamente igual com qualquer fundo escolhido aqui. Ele existe porque o mesmo bloco pode ir para uma landing page com esquema de cores próprio, e cor sobre fundo errado engana — o que parece legível sobre branco pode sumir sobre uma seção escura.

                                    A prévia executa o código gerado de verdade: é o mesmo bloco que sai na caixa ao lado, rodando dentro de um quadro isolado. Trocar o tamanho, arrastar a quantidade, marcar acabamentos e gerar o Pix funcionam aqui como funcionarão na página. O modo Celular usa 380 pixels de largura lógica — abaixo do corte configurado na seção no padrão de fábrica, então o bloco aparece numa coluna só. O que ainda difere da página publicada: o QR Code é desenhado por uma biblioteca baixada da internet, então só aparece depois que ela carrega; o botão do PayPal não é o botão de verdade — o SDK não roda aqui e ele sai como desenho, com o valor que iria na ordem medido dentro do próprio bloco; o botão "Já paguei" não abre o WhatsApp — o quadro desliga a abertura de abas, e avisa em vermelho se não conseguir desligar; e o quadro não carrega o CSS do tema do site. Mexer em qualquer campo remonta a prévia.

                                    Código da calculadora (componente HTML) Copiado!

                                    Mudar tamanho, preço, faixa, acabamento ou aparência não apaga o que está nesta caixa: quem avisa que o código ficou velho é o painel consolidado, ao lado das abas. Clique em Gerar código de novo antes de colar.

                                    Instrução de uso do código gerado

                                    Onde colar: na página de álbuns do Prosite, ponha um componente HTML e cole ali o código acima. Publique — e teste na página publicada, não no editor: o Prosite processa o código na publicação.

                                    Como o cliente usa: ele escolhe o tamanho, arrasta a quantidade de fotos, marca os acabamentos que quiser e vê o valor mudar na hora, com o número de lâminas e o desconto que já alcançou. Depois paga por Pix ou cartão, ou leva o orçamento para o WhatsApp. Tudo acontece nesta página, sem navegação.

                                    Para atualizar preços, tamanhos ou faixas: mude aqui, clique em Gerar código e cole por cima. É o mesmo fluxo de todas as outras abas — a tabela de preços vive dentro do código da página.

                                    O que esta calculadora não faz — leia antes de publicar

                                    Não há registro de pedidos. Um pedido existe como três rastros: a mensagem que chega no seu WhatsApp, a transação no PayPal e o Pix na sua conta. Não existe uma lista de pedidos em lugar nenhum, e nenhuma tela para consultá-los.

                                    Não há confirmação automática. Nem o Pix estático nem o PayPal têm para onde avisar esta página quando o dinheiro cai. Você confere e libera à mão, pelo extrato.

                                    Ela não envia as fotos nem monta o álbum. O que a página faz é orçar e cobrar; a escolha das fotos, o design e a produção continuam acontecendo fora dela, como já acontecem hoje.

                                    A média de fotos por lâmina é uma média. O álbum que você diagramar pode fechar com uma lâmina a mais ou a menos que a conta desta página mostrou ao cliente. Se isso mudar o valor, é conversa a ter com ele — a página não tem como prever o seu projeto.

                                    A tabela de preços não é secreta — preço por foto, faixas de desconto e acabamentos estão dentro do código desta página, à vista de quem abrir o código-fonte.

                                    O preço tem o mesmo limite das outras abas de pagamento. Tela, Pix e PayPal desta página não divergem entre si — eles leem a mesma conta. Mas o valor do PayPal é montado no navegador do cliente, e alguém determinado monta um pagamento com outro valor. A garantia é de coerência, não de valor: confira o extrato antes de produzir.

                                    Uma calculadora por página. Dois blocos desta aba na mesma página do Prosite não funcionam: os dois procuram a mesma caixa, então o primeiro desenha o que é do segundo e o segundo não desenha nada. É a mesma limitação do Checkout e da Mini loja. Duas calculadoras, duas páginas.

                                    Depois de publicar: abra a página em aba anônima, monte um álbum, gere o Pix e confira no aplicativo do banco que o valor lido do QR Code é o mesmo que a página mostra.

                                    Painel consolidado

                                    Ferramenta interna Foto Certa. Novos construtores podem ser adicionados como novas abas.