Lovable App

Preview ao vivoatualiza a cada segundo

Dias

Horas

Min

Seg

Anti-cache (recalcula a cada abertura)

desativado

Gmail, Outlook e Shopify cacheiam imagens em proxies — sem isso, todo destinatário vê o mesmo frame. Escolha sua plataforma de envio para adicionar uma merge tag única por destinatário que força o cliente de email a baixar o timer atualizado a cada open.

Sua plataforma de email

HTML para Email — Imagem hospedada (recomendado)

<!-- Email Countdown Timer · imagem hospedada (recalcula a cada open) -->
<div style="text-align:center;background:#ffffff;">
  <img src="https://timer.usebip.com/api/public/timer/svg?end=172800000&weight=350&showDays=1&showHours=1&showMinutes=1&showSeconds=1&showLabels=1&uppercase=1&showSep=0&sep=%3A&lDays=Dias&lHours=Horas&lMin=Min&lSec=Seg&digitSize=48&labelSize=11&gap=12&padding=24&boxPad=16&boxRadius=8&boxBorderW=0&digitColor=111111&labelColor=666666&bgColor=ffffff&boxBg=f4f4f4&boxBorderColor=e5e5e5&transparent=0&useBoxes=1&align=center" alt="Countdown timer" style="display:inline-block;border:0;outline:none;text-decoration:none;max-width:100%;height:auto;" />
</div>

https://timer.usebip.com/api/public/timer/svg?end=172800000&weight=350&showDays=1&showHours=1&showMinutes=1&showSeconds=1&showLabels=1&uppercase=1&showSep=0&sep=%3A&lDays=Dias&lHours=Horas&lMin=Min&lSec=Seg&digitSize=48&labelSize=11&gap=12&padding=24&boxPad=16&boxRadius=8&boxBorderW=0&digitColor=111111&labelColor=666666&bgColor=ffffff&boxBg=f4f4f4&boxBorderColor=e5e5e5&transparent=0&useBoxes=1&align=center

HTML para Email — Snapshot inline (sem hospedagem)

<!-- Email Countdown Timer · TWK Lausanne · expires 1970-01-03T00:00:00.000Z -->
<style>
@font-face{font-family:'TWK Lausanne';font-weight:350;src:url('https://timer.usebip.com/__l5e/assets-v1/a9fe410b-b18d-4278-8a25-7a39767bbee5/TWKLausannePan-350.otf') format('opentype');}</style>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#ffffff;">
  <tr>
    <td align="center" style="padding:24px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0">
        <tr>
      <td style="background:#f4f4f4;padding:16px;border-radius:8px;min-width:77px;text-align:center;" align="center">
        <div style="font-family:'TWK Lausanne',Arial,sans-serif;font-size:48px;font-weight:350;color:#111111;line-height:1;">00</div>
        <div style="font-family:'TWK Lausanne',Arial,sans-serif;font-size:11px;font-weight:250;color:#666666;letter-spacing:1.2px;text-transform:uppercase;padding-top:6px;">Dias</div>
      </td><td style="width:12px;font-size:0;line-height:0;">&nbsp;</td>
      <td style="background:#f4f4f4;padding:16px;border-radius:8px;min-width:77px;text-align:center;" align="center">
        <div style="font-family:'TWK Lausanne',Arial,sans-serif;font-size:48px;font-weight:350;color:#111111;line-height:1;">00</div>
        <div style="font-family:'TWK Lausanne',Arial,sans-serif;font-size:11px;font-weight:250;color:#666666;letter-spacing:1.2px;text-transform:uppercase;padding-top:6px;">Horas</div>
      </td><td style="width:12px;font-size:0;line-height:0;">&nbsp;</td>
      <td style="background:#f4f4f4;padding:16px;border-radius:8px;min-width:77px;text-align:center;" align="center">
        <div style="font-family:'TWK Lausanne',Arial,sans-serif;font-size:48px;font-weight:350;color:#111111;line-height:1;">00</div>
        <div style="font-family:'TWK Lausanne',Arial,sans-serif;font-size:11px;font-weight:250;color:#666666;letter-spacing:1.2px;text-transform:uppercase;padding-top:6px;">Min</div>
      </td><td style="width:12px;font-size:0;line-height:0;">&nbsp;</td>
      <td style="background:#f4f4f4;padding:16px;border-radius:8px;min-width:77px;text-align:center;" align="center">
        <div style="font-family:'TWK Lausanne',Arial,sans-serif;font-size:48px;font-weight:350;color:#111111;line-height:1;">00</div>
        <div style="font-family:'TWK Lausanne',Arial,sans-serif;font-size:11px;font-weight:250;color:#666666;letter-spacing:1.2px;text-transform:uppercase;padding-top:6px;">Seg</div>
      </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Como funciona o contador "ao vivo" por destinatário: a imagem aponta para timer.usebip.com. Toda vez que alguém abre o email, o servidor recalcula o tempo restante naquele instante e devolve um SVG novo — então cada pessoa vê o tempo correto baseado em quando ela abriu, não em quando você enviou.

Por que o anti-cache importa: Gmail/Outlook/Shopify cacheiam imagens. Sem a merge tag única por destinatário, todos veem o mesmo frame congelado. Com ela, a URL fica diferente pra cada um (?cb=cliente123-1718...) e o proxy é obrigado a buscar de novo.

Limitação real: nenhum email "tica" segundo a segundo (clientes de email não rodam JavaScript). O contador atualiza a cada abertura do email, não em tempo real dentro dele — esse é o padrão de toda ferramenta de timer pra email no mercado.