How to Add a Countdown Timer in Brevo

Brevo’s Drag & Drop editor gives you a generous set of blocks: Title, Text, Image, Video, Button, Dynamic content, Logo, Social, HTML, Divider, Product, Navigation and Spacer. Nothing in that list counts down. Brevo knows it, too. Its own description of the HTML block names countdown timers as one of the things you paste into it, and its help centre’s route to a timer is a third-party embed.

So a Brevo countdown timer is a paste job, and a short one. This guide does it with an Alterable countdown timer, then spends its time on the parts that are specific to Brevo: the attribute syntax that makes a deadline personal, and the preview route that actually fills attributes in, because the test send doesn’t.

Step 1: Create the timer in Alterable

1. Open the Alterable countdown timer page.

2. Pick a type. Standard counts to one date for everyone. Evergreen starts each contact’s own window on their first open. Query Parameter reads the deadline from a contact attribute in the image URL.

3. Set the deadline and its timezone, then match the fonts and colours to your template.

   

4. Click Create and copy the embed: a link wrapped around an image. Before you copy it, choose Brevo under Email Marketing Software, and Alterable writes Brevo’s merge tags into it for you.

   <a href="https://next.alterable.com/countdown-timers/click/YOUR-TIMER-ID">
       <img src="https://next.alterable.com/countdown-timers/YOUR-TIMER-ID.png" />
   </a>

Step 2: Add the countdown timer to your Brevo email

1. In Brevo, open the campaign or go to Campaigns > Templates and open the template.

2. Drag the HTML block from the content panel into the layout where the timer should sit.

   

3. Click the placeholder and paste the Alterable embed into the HTML editor.

   

4. Save and preview.

   

Brevo asks that HTML block content be email-compliant, and rules out JavaScript, iframes, forms and embedded media. An image inside a link is as compliant as it gets. Templates built this way are selectable in the Send an email step of an automation, so the same block works in a workflow. The newer editor is rolling out progressively, so your account may show the older one; the block is the same.

Per-contact deadlines with Brevo attributes

An evergreen timer needs to know who’s opening so it can start and keep that contact’s clock. Brevo’s contact attributes can be typed straight into HTML, and Brevo’s contact ID does the job:

<img src="https://next.alterable.com/countdown-timers/YOUR-TIMER-ID.png?uid={{ contact.CONTACT_ID }}" />

Choosing Brevo under Email Marketing Software in Alterable’s embed dialog adds this for you.

A query parameter timer takes the deadline itself, as an ISO date such as 2026-10-01T18:00:00Z. Brevo’s date attributes are imported as a date with no time, so the simplest reliable route is a text attribute holding the full ISO string. Name it OFFER_END, keep the name exactly as it appears on the Contact attributes page, and pass it:

<img src="https://next.alterable.com/countdown-timers/YOUR-TIMER-ID.png?date={{ contact.OFFER_END }}" />

date is the timer’s Parameter Name in Alterable, which is the default. If you rename it, use your name in place of date.

Brevo does ship date filters in its template language if you’d rather format a real date attribute, but they use Go’s reference-time layout and are easy to get subtly wrong. Text in, text out is the safer route.

Previewing a Brevo countdown timer

Here’s the Brevo-specific catch. Send test email doesn’t let you choose a contact, so any attribute in the timer URL stays as {{ contact.CONTACT_ID }} and the image fails. Nothing is wrong with the timer. Click Preview, choose Preview as a customer, pick a real contact, and the URL resolves. A standard timer has no attribute in it and shows correctly in a plain test send.

If you’re on Brevo’s free plan, the “Sent with Brevo” footer is the only thing that changes; the HTML block itself isn’t gated. And once the deadline passes, the timer holds at zero, or shows the text or image you set as its expiry placeholder in Alterable.