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.
Table of contents
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.
