Como enviar preview de site para seu cliente

Você é freelancer, acabou de finalizar (ou está quase finalizando) o site do cliente, e precisa mandar para aprovação. Como você faz isso hoje?

Grava um vídeo da tela? O cliente não consegue clicar nos links.
Manda screenshot? Não mostra interatividade nem responsividade.
Coloca num servidor de teste? Precisa configurar, e se o cliente vazar o link?
Faz deploy no domínio final? Arriscado antes da aprovação.

Nenhuma dessas opções é ideal. O que você precisa é de um link funcional, temporário e protegido para o cliente navegar no site como se estivesse no ar.

A solução: preview publicado no Htmly

O Htmly resolve isso em 3 passos:

1. Exporte os arquivos do projeto

Se você trabalha com HTML/CSS/JS puro, já tem os arquivos prontos. Se usa um framework (Next.js, Astro, etc.), faça o build e pegue a pasta de output estático.

Compacte tudo num ZIP — garanta que o index.html está na raiz.

2. Publique no Htmly

Suba o ZIP em htmly.com.br. Em segundos, você tem um link como preview-cliente.htmly.com.br.

3. Proteja com senha (opcional)

Nos planos Pro e Agency, você pode adicionar proteção por senha ao site. Assim, só quem tem a senha acessa o preview. Perfeito para:

Evitar que o cliente compartilhe antes da hora
Proteger propriedade intelectual do design
Manter o preview privado durante a fase de aprovação

Mande o link + senha para o cliente por WhatsApp ou e-mail.

Workflow completo para freelancers

Aqui vai um fluxo que funciona bem no dia a dia:

Primeira versão

Desenvolva o site
Publique preview no Htmly
Mande o link pro cliente: "Dá uma olhada e me diz o que acha"

Rodada de feedback

Cliente acessa e anota o que quer mudar
Você ajusta o código
Sobe nova versão no mesmo slug — o link não muda

Aprovação final

Cliente aprova
Você faz o deploy definitivo no servidor/hospedagem final
Remove o preview do Htmly (ou deixa expirar)

Vantagem: o link não muda

Quando você atualiza os arquivos de um site no Htmly, o link permanece o mesmo. Isso significa que o cliente não precisa receber um link novo a cada iteração. Você atualiza, avisa, ele atualiza a página.

Usando templates para acelerar entregas

Nem todo projeto precisa começar do zero. O Htmly oferece templates prontos para os tipos mais comuns de sites que freelancers criam:

Landing pages

O pedido mais frequente de clientes: "quero uma página para meu negócio". Em vez de começar com um HTML em branco, clone um template de landing page, personalize com as informações do cliente, e publique o preview em minutos.

Portfólios e sites institucionais

Templates com seções prontas (sobre, serviços, contato, galeria) que você adapta rapidamente. O cliente vê uma primeira versão profissional em horas, não dias.

Como funciona

Acesse a galeria de templates
Escolha um que se encaixe no projeto
Clone e edite direto no editor visual do Htmly
Publique como preview para o cliente

Essa abordagem economiza tempo no começo do projeto e impressiona o cliente com velocidade de entrega. Depois, você personaliza até chegar no resultado final.

Confira também nossas ferramentas gratuitas para testar e validar código antes de publicar.

Analytics: saiba quando o cliente acessou

Um dos maiores incômodos de freelancers: mandar o preview e ficar sem saber se o cliente viu ou não. "Você já olhou?" vira uma mensagem constrangedora no WhatsApp.

Visualizações server-side

O Htmly registra visualizações de forma server-side, sem cookies nem scripts externos. No painel do seu site, você vê:

Total de visualizações desde a publicação
Visualizações por dia em gráfico simples
Quando foi o último acesso

Isso significa que, ao mandar o preview na segunda-feira, você pode conferir na terça se o cliente acessou, sem precisar perguntar.

Como usar na prática

Se passou uma semana e o analytics mostra zero visualizações, o cliente não abriu o link. Mande um lembrete gentil. Se o analytics mostra 15 visualizações em 2 dias, o cliente está revisando com atenção — provavelmente vai ter feedback detalhado.

Essas informações ajudam a calibrar o follow-up e evitar cobranças desnecessárias ou atrasos por falta de comunicação.

Dicas para uma boa experiência de preview

Use meta tags

Inclua Open Graph tags no HTML para que o link tenha preview bonito no WhatsApp:

<meta property="og:title" content="Preview - Site Empresa X">
<meta property="og:description" content="Versão para aprovação">
<meta property="og:image" content="screenshot.png">

O Htmly injeta meta tags automaticamente se você configurar título e descrição no painel.

Teste no mobile

Antes de mandar pro cliente, abra o link no celular. Muitos clientes vão acessar pelo WhatsApp no telefone — se o site não estiver responsivo, vai ser a primeira coisa que eles vão reclamar.

Escolha um slug claro

Em vez de um hash aleatório, use algo como preview-empresax ou proposta-landing. Fica mais profissional quando o cliente vê a URL.

Adicione uma página de instruções

Para projetos mais complexos, crie uma página simples com instruções para o cliente: "clique aqui para ver a versão mobile", "os formulários ainda não estão funcionais", "as imagens são placeholder". Isso evita feedback desnecessário sobre coisas que você já sabe que faltam.

Use o HTML Preview para testes rápidos

Se você só quer checar algo rápido antes de publicar, a ferramenta HTML Preview permite visualizar HTML no navegador sem publicar. Cole o código, veja o resultado, ajuste e depois suba.

Quanto custa?

Para previews simples sem senha, o plano gratuito resolve:

1 site ativo
Subdomínio .htmly.com.br
SSL e CDN inclusos
Sem limite de visualizações

Se você precisa de múltiplos previews simultâneos (vários clientes ao mesmo tempo) e proteção por senha, os planos pagos começam em R$ 12/mês. Confira as opções na página de preços.

Para freelancers que fazem isso regularmente, o plano Pro (R$ 29/mês) oferece 20 sites, domínio personalizado e editor inline — tudo que você precisa para um workflow profissional de aprovação.

Perguntas frequentes

O cliente precisa criar conta no Htmly para ver o preview?

Não. O cliente recebe apenas um link (com senha opcional) e acessa o site normalmente pelo navegador. Sem cadastro, sem login, sem complicação.

Posso ter vários previews de clientes diferentes ao mesmo tempo?

Sim. No plano gratuito você tem 1 site ativo. Com o Starter (R$ 12/mês) são 5 sites, e o Pro (R$ 29/mês) permite até 20 sites simultâneos — ideal para freelancers com múltiplos projetos em andamento.

O preview funciona com sites feitos em frameworks?

Sim, desde que você faça o build estático (next export, astro build) e suba a pasta de output. O Htmly hospeda qualquer site estático — HTML, CSS, JS, imagens e fontes.

Consigo saber se o cliente acessou o preview?

Sim. O Htmly oferece analytics server-side que mostra total de visualizações e acessos por dia, sem depender de cookies ou scripts externos. Você sabe exatamente quando e quantas vezes o cliente acessou.

Posso usar meu próprio domínio no preview?

Sim. Nos planos Pro e Agency, você pode conectar um domínio personalizado com SSL automático. Fica ainda mais profissional para o cliente — por exemplo, preview.seudominio.com.

Resumo

Enviar preview de site para cliente não precisa ser complicado:

Exporte e compacte seus arquivos
Suba no Htmly
Mande o link (com senha, se necessário)
Acompanhe os acessos pelo analytics
Atualize no mesmo link conforme o feedback

Sem servidor de teste, sem risco de vazar o link, sem complicação.

Teste o fluxo agora: publique um preview na hospedagem de sites do Htmly em htmly.com.br e veja como é simples.

Leia também: