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.
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).
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.
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 e recolhimento automáticos quando o formulário de reserva abre e fecha (sem barra de rolagem interna no modal), com alturas calibráveis separadamente para computador e celular. Suporta as duas arquiteturas: componente direto na página final, ou página intermediária embutida por iframe na hospedeira — neste caso gera as três peças necessárias (componente do TidyCal, Tag Body da intermediária e iframe da hospedeira).
Modo "Componente direto na página final": cole o código 1 em um componente HTML da própria página onde o calendário deve aparecer. Nada mais é necessário.
Modo "Página intermediária embutida por iframe" (3 códigos): 1) código 1 → componente HTML da página intermediária; 2) código 2 → campo Tag Body da página intermediária; 3) código 3 → componente HTML da página hospedeira (é o iframe que embute a intermediária).
Pré-requisitos no Prosite: o caminho do booking type deve existir no TidyCal; se for usar âncora de botão até o calendário (gerada na aba Captação de leads), a coluna do componente do código 3 deve ter o ID Html da âncora sem o # (ex.: reserva) na aba Avançado.
Calibragem das alturas: 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 montado com o que está nos campos — tidycal.com/ + caminho, e a 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.
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.
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). Cinco efeitos à escolha: brilho giratório (o facho de luz que percorre a moldura), degradê contínuo, halo pulsante, listras em movimento e borda fixa (sem animação). Gera dois códigos: um global para a Tag Head do site (uma vez só) 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 (global): em Configurações → Códigos personalizados → campo do cabeçalho (head) do site, com a tag style inclusa. Cola-se uma única vez: ele define a animação e vale para o site inteiro. Se 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).
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. Um código mexido no caminho é recusado pela página, e um código montado com a chave Pix de outra pessoa também — a página só exibe uma cobrança que ela consegue remontar a partir dos seus dados de recebedor.
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. Os três botões acima trocam esse endereço — em Código adulterado um dígito do código Pix é trocado, exatamente como aconteceria se alguém mexesse no link. 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.
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 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.
A cada cobrança: preencha a seção 3 (descrição, valor e, se quiser, um identificador), 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. A página 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 o resultado for idêntico ao que chegou. 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 três 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 mexido na mão é recusado: trocar um dígito quebra a verificação interna do código.
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.
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 monta um link seu, que a sua página aceita, com dois campos trocados: o valor (para menos ou para mais) e o identificador. 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.
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.
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.
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á.
Ferramenta interna Foto Certa. Novos construtores podem ser adicionados como novas abas.