Bloco Contagem regressiva
Um cronômetro de prazo em tempo real para lançamentos, promoções e datas de encerramento — renderizado no servidor como um GIF animado, a única técnica que de fato continua contando regressivamente em todo grande cliente de e-mail, incluindo o Outlook.
Como funciona
Nenhum cliente de e-mail executa animações CSS ou JavaScript de forma confiável o suficiente para animar um relógio do zero, então o bloco de contagem regressiva nem tenta; em vez disso, ele incorpora uma simples tag <img> apontando para um GIF animado renderizado pelo servidor. A cada busca, o MailInApp calcula o tempo restante até o prazo configurado e codifica do zero uma nova imagem de relógio digital no estilo "DD:HH:MM:SS" (um codificador GIF89a construído do zero, não uma biblioteca encapsulada). Ele desenha um segundo por quadro durante sessenta quadros, depois congela no último quadro, então a imagem conta visivelmente por um minuto inteiro assim que é aberta, e depois se mantém parada. Como a imagem é regenerada a partir do prazo real no momento da busca, em vez de pré-renderizada uma única vez no momento do envio, ela é precisa não importa quando ou quantas vezes um destinatário abrir o e-mail. O endpoint também envia cabeçalhos no-cache, então proxies de imagem como o do Gmail buscam novamente a cada abertura, em vez de reutilizar um quadro em cache desatualizado.
A própria URL da imagem é assinada com HMAC (o carimbo de data/hora do prazo e a cor são incorporados à assinatura), então ela não pode ser usada como um renderizador autônomo de GIF de contagem regressiva por ninguém que não seja o MailInApp. O endpoint é público, como os endpoints de interações e rastreamento de abertura, mas só serve o que foi solicitado a assinar.
Não há divergência entre e-mail e visualização ao vivo como acontece com o carrossel ou o acordeão — ambos os contextos incorporam o mesmo endpoint de imagem. O e-mail usa uma URL absoluta (um e-mail não tem uma origem de página contra a qual resolver um caminho relativo), enquanto a visualização ao vivo usa uma relativa à origem.
Também não há um "nível de fallback" separado além da própria imagem. Um cliente que não consegue animar GIFs ainda mostra o primeiro quadro — um retrato significativo e preciso do tempo restante, não um espaço reservado. O texto alternativo do bloco e a parte em texto simples do e-mail carregam ambos o mesmo tempo restante em palavras (por exemplo, "A oferta termina em 2d 4h"), então o prazo ainda é legível mesmo com as imagens totalmente desativadas.
Assim que o prazo passa, o bloco para de renderizar o GIF e passa para um texto simples de estado encerrado — sem mais requisições de imagem, sem um "00:00:00:00" desatualizado pairando por aí.
Campos configuráveis:
- Rótulo — texto exibido acima da imagem em contagem, por exemplo "A oferta termina em".
- Termina em — o prazo, escolhido como data e hora.
- Cor — a cor dos dígitos/texto, usada tanto no GIF renderizado quanto no texto de estado encerrado.
- Tamanho da fonte (px) — o tamanho da fonte do rótulo durante a contagem regressiva.
- Tamanho da fonte após o término (px) — o tamanho da fonte da mensagem "Esta oferta terminou" exibida após o prazo passar.
Uma contagem regressiva é conteúdo puro, como um bloco de imagem ou texto — não há nada para tocar ou enviar, então ela nunca gera um evento de interação e nunca aparece no painel de respostas, na exportação CSV ou em um webhook de projeto.
Exemplos
Subject
Our biggest sale of the year starts now
Um e-mail de venda relâmpago com um prazo de 24 horas é o uso canônico: a contagem regressiva visivelmente diminuindo é o que torna a urgência legível de imediato. Ela continua precisa se o destinatário abrir o e-mail no minuto em que ele chega ou dois dias depois, quando a venda já acabou — nesse ponto, mostra corretamente o estado encerrado em vez de uma mentira congelada. Um lançamento de produto com estoque limitado pode combinar uma contagem regressiva com um bloco de produto, para que tanto o relógio quanto a contagem de estoque comuniquem urgência juntos. Veja Ecommerce e lançamentos de produtos para o padrão completo. Um lembrete de inscrição para evento pode fazer a contagem regressiva até o prazo de inscrição (não até o evento em si; para isso existe o adicionar ao calendário) para incentivar os indecisos a agir antes que a janela se feche.
Como é o fallback estático
<div style="margin:12px 0">
<p style="margin:0 0 6px;font-size:16px;font-weight:700;color:#111827">Offer ends in</p>
<img
src="https://mailinapp.com/api/countdown?t=1753401600000&c=111827&s=9f2a...&"
width="207" height="34"
alt="Offer ends in 2d 4h"
style="display:block;max-width:100%;height:auto"
>
</div>
Não há uma "marcação de fallback" separada além disso: todo cliente renderiza a mesma tag <img>. O que difere é apenas se aquele cliente anima GIFs (a maioria anima) ou congela no primeiro quadro (alguns poucos clientes legados) — em ambos os casos, o tempo restante mostrado ainda é preciso.