Gere o código dos componentes do Prosite preenchendo os parâmetros. Os valores ficam salvos neste navegador.
Slideshow de fotos — gera o código de uma apresentação de imagens para colar em um componente HTML de qualquer página. Aceita fotos horizontais e verticais juntas (a foto inteira aparece sobre um fundo desfocado dela mesma), com setas de navegação 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.
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.
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.
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.
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).
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.
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.
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).
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.
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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Ferramenta interna Foto Certa. Novos construtores podem ser adicionados como novas abas.