Site público: páginas livres para qualquer visitante

Um app de gestão costuma ter uma porta só: a tela de login. Quem ainda não é cliente chega nela, não entende o que o sistema faz e vai embora. O site público resolve isso colocando a sua vitrine na frente da porta, no mesmo endereço do app.

Na prática, o visitante passa a ter endereços que abrem sem senha:

• / — a página inicial, com a explicação do que o seu sistema faz.
• /planos — os planos que você vende, com preço e botão de contratar.
• /contato — o formulário para quem quer falar com você.
• /blog — os artigos que você escreve para aparecer no Google.
• /cadastro — o visitante cria a conta dele e entra no app.

O site é feito de páginas comuns do editor, de um tipo novo chamado Site público. Você monta, edita e publica essas páginas no mesmo lugar em que monta o resto do app. Nada de contratar um site à parte e ficar com dois endereços para manter.

Quem faz o quê

Uma página por vez, com nome e endereço

1. Em Nova página, escolha Site público.
2. Informe o nome da página e o endereço público, como sobre ou ajuda/contato. Use / para a página inicial.
3. Clique em Criar página. Não é preciso escolher módulo, classe ou tabela.
4. Edite o conteúdo no visual, no Blade ou com a IA. Se o site já tem cabeçalho e rodapé compartilhados, a página nova os reutiliza automaticamente.
5. Nas propriedades da página, ajuste o endereço e, opcionalmente, o título, descrição e imagem para busca e compartilhamento.
6. Salve e publique o projeto. Confira o resultado como visitante, sem login.

O esqueleto é HTML simples e aceita CSS, JavaScript e Blade personalizados. No visual, você insere e move seções e edita textos, links, imagens e estilos básicos. Lógica Blade e JavaScript são editados no código; scripts executam no Teste Online e no app publicado.

Recursos opcionais com a IA

Peça à IA para criar uma página, acrescentar páginas ao site existente ou montar um site completo. Blog, planos, contato e cadastro SaaS são opcionais: o agente adiciona apenas o que você solicitar. Os endereços blog, blog/{slug} e cadastro são reservados para esses recursos e não os ativam automaticamente.

Recursos que você pode pedir à IA

Aparecer no Google

Cada página do site tem título e descrição próprios e um endereço amigável — três coisas que os buscadores leem primeiro. Além disso, o app publicado entrega sozinho o mapa do site (a lista de todos os endereços públicos) e o arquivo de robôs, que diz aos buscadores o que podem visitar. A área logada fica de fora dos dois: ninguém vai encontrar a sua tela de contratos numa busca.

Cabeçalho, menu e rodapé compartilhados

Ao criar um site pela IA, cabeçalho, navegação, rodapé e estilos ficam em arquivos comuns. Cada página guarda seu conteúdo e usa @include do Blade para carregar esses arquivos. Alterar o cabeçalho uma vez atualiza todas as páginas que o usam.

No visual, clique no cabeçalho ou rodapé e escolha Editar arquivo compartilhado. O arquivo abre no editor de código. O conteúdo exclusivo da página continua editável no canvas. A IA consulta os arquivos existentes antes de criar novas páginas e pode editar o menu nesse mesmo arquivo.

Exemplo de pedido: “Crie início, sobre e contato com cabeçalho, menu mobile e rodapé compartilhados. Use uma identidade visual consistente e mantenha o conteúdo de cada página separado”. Para acrescentar outra: “Crie a página de ajuda usando a estrutura do site e adicione seu link no menu”.

Sites antigos mantêm sua organização até você pedir a conversão. Nas propriedades, a opção de estrutura permite vincular uma página simples ou torná-la independente, preservando seu conteúdo e os estilos comuns. Se a página já tem cabeçalho próprio, peça à IA para fazer a extração preservando suas personalizações.

A prévia mostra includes estáticos. Lógica PHP e JavaScript, como a abertura do menu mobile, devem ser conferidos no Teste Online e no app publicado.

Uma página do site aceita HTML, CSS e JavaScript livres. O que você escreve é exatamente o que vai para o ar — sem nada no meio do caminho mudando o seu layout. Se você (ou o assistente de IA do editor) escrever uma seção do zero, ela sobe do jeito que ficou.

Se você não escreve código, não tem problema: use os blocos prontos. São peças de site já montadas, que você arrasta para a página e depois só troca o texto e as imagens:

• Menu e Rodapé — o começo e o fim de toda página.
• Topo — a chamada principal, com o botão de ação.
• Recursos — o que o seu sistema faz, em cartões.
• Planos — a tabela de preços (veja a seção 04).
• Depoimentos e Logos — prova de que outras empresas já usam.
• Perguntas frequentes — as dúvidas que travam a venda.
• Chamada — o convite final para testar.
• Contato — o formulário (veja a seção 05).

Os dois caminhos convivem: comece pelos blocos, e escreva à mão só a parte que precisa ser diferente.

A etiqueta cinza do JavaScript

A página de planos não é um texto escrito à mão. Ela mostra os planos que você cadastrou no app, com o preço mensal e o preço anual de cada um, e o botão de contratar já apontando para o plano certo.

Isso muda a rotina de um jeito importante: quando você reajusta um preço ou lança um plano novo, a vitrine acompanha. Você não corre o risco de anunciar R$ 79 no site e cobrar R$ 99 na hora do pagamento, que é o tipo de erro que queima cliente logo no primeiro contato.

1. Cadastre os planos em Administração › SaaS › Planos, com nome, preço mensal, preço anual e dias de teste (Licenciamento, seção 03).
2. Coloque o bloco Planos na sua página de /planos — ou deixe o que veio no kit completo.
3. Publique o projeto e abra /planos no navegador para conferir.

O botão de cada plano leva o visitante para /cadastro com aquele plano já escolhido. Ele não precisa lembrar qual clicou, nem escolher de novo.

A página /contato traz um formulário simples: nome, e-mail, telefone e mensagem. Quando alguém envia, acontecem duas coisas ao mesmo tempo:

• o contato é gravado em Administração › Site › Contatos, dentro do seu app;
• um aviso por e-mail sai na hora, para você não depender de abrir a tela para descobrir que chegou alguém.

Nada se perde: mesmo que o e-mail de aviso caia no spam, a mensagem continua lá na lista. Abrindo um contato você vê o que a pessoa escreveu, quando escreveu e por qual endereço ela chegou — dá para responder direto do e-mail dela, por exemplo contato@exemplo.com.br.

Proteção contra robô e contra enxurrada

Formulário aberto na internet atrai robô. Dois mecanismos cuidam disso sozinhos:

• Proteção contra robô. O formulário tem uma armadilha invisível para quem não é gente. Quem cai nela é descartado em silêncio: o robô acha que enviou, e nada aparece na sua lista.
• Limite de envios. Quem tenta mandar muitas mensagens seguidas é barrado por um tempo. Um visitante normal, que envia uma mensagem e espera resposta, nunca esbarra nisso.

O blog é a forma mais barata de aparecer no Google. Quem procura "como organizar contratos de manutenção" não está procurando o nome do seu sistema — mas pode achar o seu artigo, e daí conhecer o seu sistema.

Você escreve os posts em Administração › Site › Blog, dentro do próprio app. Cada post tem:

• Título e endereço — o caminho do artigo, como /blog/como-organizar-seus-contratos.
• Resumo — o texto curto que aparece na lista e no resultado do Google.
• Capa — a imagem que ilustra o artigo na lista e nas redes sociais.
• Conteúdo — o texto do artigo, num editor com negrito, títulos, listas, links e imagens.
• Situação — Rascunho ou Publicado.

Do lado do visitante, /blog lista os artigos publicados, do mais novo para o mais antigo, e cada um abre no próprio endereço. Você monta essas duas páginas uma vez só (tipos Blog — lista e Blog — post) e nunca mais mexe nelas: daí em diante o trabalho é só escrever.

Esta é a parte que transforma o site numa máquina de vendas. Com o cadastro self-service ligado, o visitante escolhe um plano, preenche quatro campos e já está dentro do app, com a área dele criada — sem esperar você, sem e-mail de ida e volta, às onze da noite de um domingo se for o caso.

1. O visitante clica no botão de um plano em /planos.
2. Em /cadastro, informa empresa, nome, e-mail e senha. Por exemplo: Contábil Aurora, Marina Braga, marina@exemplo.com.br.
3. Ele entra no app, na própria área, com o plano escolhido e como administrador da conta dele.
4. O cadastro aparece para você em Administração › Unidades, como qualquer outro cliente.

Como ligar

Abra as Propriedades do projeto, vá ao bloco Contas e ligue Cadastro self-service no site. Publique o projeto depois.

O que acontece em cada tipo de plano

O fim do cadastro muda conforme o plano escolhido e conforme a cobrança do app estar ligada ou não:

Como o cliente paga, acompanha a fatura e troca de plano depois está em Minha conta: assinatura, faturas e pagamento.