How to Use amp-timeago in Your AMP Emails

Suryanarayan Pal
BySuryanarayan Pal

3 mins read

If you open one of your emails in Gmail, you can see the sent time of that email on the right-hand side. The time is displayed in the format "X time ago."

Similarly, you can create such timestamps inside your AMP emails with amp-timeago.

This guide will discuss amp-timeago and how you can use it in your AMP emails.

  • What is amp-timeago?

  • Applications of amp-timeago

  • Features of amp-timeago

  • Wrapping up

What is amp-timeago?

The amp-timeago is an AMP email component that counts up to or away from a specified date and time. It displays the modified timestamp in the form of “X years/months/weeks/days/hours ago” or “in Y years/months/weeks/days/hours”.

Applications of amp-timeago

Following are the different ways in which you can use the amp-timeago:

1. Show the published date

It's good to add the published date if you're sending blog posts or other documentation inside your AMP emails. You can use the amp-timeago to configure the data, and as a result, it will display when it was originally published. This helps your users to determine the relevancy and recency of your content.

2. Show remaining time for something

If you have an event or a Product Hunt launch planned ahead of time, you can use the amp-timeago to show users when your event will be happening. For example, if you configure it right, it will show something like " in 2 months". This creates a desire in your users and makes them excited for the event or the product launch.

Features of amp-timeago

Here are some of the highlighting features of amp-timeago:

✅ Display the time in the user's local language

If you have an audience that doesn't speak English, don't worry. With the help of the locale attribute, you can set the language in which the time should be displayed. Currently, it supports 44 languages including English, Hindi, Chinese, Spanish, Greek, German, etc.

✅ Display the date instead of “X time ago”

You can use the cutoff attribute when you want to display the date instead of X time ago after a threshold (i.e., predetermined time) has passed.

For example, you want to display the text as X time ago for a week and after that threshold, you want it to display in the date format like "date day month year." So to achieve that, you need to use the cutoff attribute and specify the cutoff in seconds, i.e., 604800 seconds in this scenario. Here's how your code will look.

<amp-timeago layout="fixed-height" height="20" datetime="2017-04-11T00:37:33.809Z" locale="en" cutoff="604800">Saturday 11 April 2017 00.37</amp-timeago>

Visit amp.dev to learn more about the amp-timeago component.

Conclusions

As you've learned in this guide, the amp-timeago is a useful component and has great applications. If you’re curious to know more about other AMP email components, we have also covered amp-accordion, amp-sidebar, amp-img, and more. Check them out to familiarise yourself with the world of AMP email components.

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

chevron-down
What is amp-timeago?
Applications of amp-timeago
Features of amp-timeago
Conclusions

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X email conversion
with Mailmodo

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

Experience world’s only interactive email marketing platform

Trusted by 10000+ brands

Group_1110166020_1_6fb9f2bd9a
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_GradientLeft_Top
gradient_Right