SendGrid Integration

Adding a Countdown Timer in SendGrid

Step-by-step guide to embedding an animated countdown timer in SendGrid email campaigns using the Design Editor or dynamic templates.

4 min readUpdated March 1, 2026
1

Create your timer in GifyLabs

Sign in to GifyLabs and create a new countdown timer. Customize the appearance to match your SendGrid template.

2

Copy the embed code

From your GifyLabs dashboard, click the copy icon to copy the embed code.

3

Open the SendGrid Design Editor

In SendGrid, open your email template in the Design Editor. This works with both Marketing Campaigns and Transactional templates.

4

Add an HTML module

Drag an "HTML" module into your email layout where you want the timer.

5

Paste the embed code

Double-click the HTML module and paste your GifyLabs embed code. The timer will render in the preview panel.

6

Test your email

Use SendGrid's "Preview & Test" feature to send a test email. Verify the animated countdown displays correctly.

Tips

  • For SendGrid dynamic templates, add the embed code directly in the HTML source using the Code Editor.

  • SendGrid supports animated GIFs in both the Design Editor and Code Editor.

  • Use a 600px-wide timer to match SendGrid's default email content width.

  • You can also use SendGrid's Image module and paste just the timer URL.

Frequently Asked Questions

Ready to Create Your Countdown Timer?

Get started for free — no credit card required. Create your first timer in under 2 minutes.