23 AMP Components You May Not Know You Could Add to AMP Pages

Last updated on by Stephanie Mialki in AMP, Advertising

That which glitters is not always gold…or is it?

AMP was created to make the mobile web faster, but to do that, restrictions were enforced —like the limitations regarding custom code, HTML/CSS, and JavaScript. The 75kb CSS stylesheet limit is evidence of that because any web page that exceeds that will fail AMP validation.

Even with its limitations, digital marketers can customize pages with many AMP components. These specialized HTML tags act similarly to traditional HTML tags (with opening and closing tags, attributes, and some CSS styling capabilities) and are easily identifiable, always starting with the amp- prefix.

The complete list will likely be added to on an ongoing basis, but the following 23 AMP components give you a good idea how customized AMP pages can be.

(Instapage now offers AMP custom code to enable a wide variety of components. Go here for full details.)

23 AMP components to customize your pages

1. Accordion

Adding amp-accordion to your page provides an outline of the content and allows visitors to jump to a certain section of the page. Each of the AMP accordion’s immediate “children” is considered a section in the accordion (each section must contain only two direct “children”), and the first child of the section is considered the section heading. Clicking the heading will expand or collapse the section:

Two additional options for the AMP accordion component are nested accordions (to nest or stack multiple accordions within each other) and auto-collapsing accordions (which only allows one expanded section at a time).

2. Audio

Instead of the traditional HTML5 audio tag, AMP uses its own version: amp-audio. The AMP audio component can only be used for direct HTML5 audio file embeds, appearing on the page like this:

Although the audio controls shown above (play/pause, sound/mute, and download) are added by default, the download button on the right can be disabled:

3. Call tracking

AMP-call-tracking simply replaces static phone numbers with phone numbers designed for call tracking analytics.

4. Carousel

The AMP carousel component displays multiple images along a horizontal axis, with several different amp-carousel formats to choose from.

You can use type=”carousel” to display a list of images as a continuous strip:

Or type=”slides” to display a list of images as slides:

You can also opt for the autoplay attribute (type=slides only) which automatically scrolls through the slides in 5 second intervals without user interaction.

5. Facebook

The AMP Facebook component embeds Facebook posts, images, and videos into AMP pages, only requiring the Facebook URL.

6. Facebook comments

AMP-facebook-comments allows embedding Facebook comments into AMP pages.

7. Facebook like

AMP-facebook-like allows embedding the Facebook like button into AMP pages.

8. Facebook page

AMP-facebook-page embeds a Facebook Page into AMP files, only requiring the href of the Facebook Page. The AMP Facebook Page component even allows you to show different tabs on the Facebook Page. For example, you can display the timeline and events tab by specifying data-tabs=”timeline, events:”

9. Font

The AMP font component allows you to design your pages with custom fonts in the body or header of the document:

It the chosen font isn’t supported, it displays as plain, red text:

10. Form

The AMP form component enables you to design AMP pages with detailed lead capture forms. The extension also allows you to provide success and error responses with special attributes, submit-success and submit-error:

11. Geo

The AMP geo extension allows small sections of content based on an approximation of a user’s location (country-level only, similar to the level of an ISO Country Code). It also offers the option to group different locations together, making it easier to apply attributes to several geographies at once.

12. iFrame

AMP-iframe embeds content into AMP pages via iFrame, which is ideal for displaying content otherwise not yet supported by AMP (Vimeo, Giphy, Google Maps, etc.).

AMP-iframe allows resizing the iFrame at runtime — either on page load (the embedded iFrame will resize itself to 200x200px) or on user interaction (pressing the button will resize the iFrame to 300x300px). The only restriction with this AMP component is that it must be either 600px away from the top, or not within the first 75% of the viewport when scrolled to the top — whichever is smaller.

13. Image lightbox

The AMP image lightbox component allows the user to expand AMP images to fill the viewport. You can also optionally display an image caption at the bottom of the viewport like this:

14. Instagram

Instagram videos and photos can be embedded into your AMP pages with amp-instagram, using the data-shortcode found in every photo/video URL. You can also include captions with the data-captioned attribute:

15. Lightbox gallery

AMP-lightbox-gallery provides a “lightbox” experience for other AMP components, such as amp-img and amp-carousel (only images are currently supported). When the visitor interacts with the AMP element, a UI component expands to fill the viewport until they close it again. If your page contains multiple elements, simply add the lightbox attribute to each image you want users to view in a lightbox.

16. Pinterest

Using amp-pinterest, adding a “Pin it” button to your page allows visitors to pin various content from your site:

To add a “Pin it” button, you’ll need these attributes:

Or you can embed a complete Pin widget:

In this case, the data-url attribute must contain the fully-qualified URL of the Pinterest resource.

17. Pixel

The AMP pixel component is a fast way to track pageviews. AMP-pixel is a built-in component that doesn’t require loading an extension.

18. Reddit

Reddit posts and comments can both be included on AMP pages with amp-reddit. The AMP Reddit component requires you to specify between post or comment, and the source of the embed. When embedding comments, include the parent comment by specifying data-embedparent=”true”, and include updated comments by specifying data-embedlive=”true.”

19. SoundCloud

Visitors can play SoundCloud tracks on your AMP pages when you use the AMP SoundCloud component (all you need for amp-soundcloud is the trackid found in the SoundCloud embed code):

You can even embed a full SoundCloud playlist with the playlistid (also found in the SoundCloud embed code), by substituting data-trackid with data-playlistid:

20. Twitter

Similar to the other social media AMP components, amp-twitter embeds Tweets into your AMP pages:

If no image is necessary, or you’re trying to save space on your page, you can choose to deactivate Twitter cards using data-cards=”hidden:”

21. Favorite button

The AMP framework allows marketers to add a favorite/like/bookmark button. It also offers a more sophisticated version that includes a favorite count, and updates this number when the button is clicked:

22. Payments in AMP

AMP pages can support requesting payment information directly from the browser. To request payments in AMP, you’ll also need amp-iframe. Here’s an embedded iFrame with a “Buy Now” button, with all of the actual payment logic contained within the iframe src itself:

However, since AMP restricts JavaScript, the iFrame source must also handle instances where PaymentRequest isn’t available. Other options include:

23. Star rating

Star-rating capabilities may be added to your AMP pages, with features including touch, mouse, and keyboard accessibility, and color-changing stars when the user hovers over them:

Which AMP components will you add to your page?

Even with AMP’s limitations, designing a beautiful, customizable page is completely possible. The 23 components above are only some of the additions you can make to your AMP pages to maximize conversions.

With the AMP feature in Instapage, marketers can create optimized landing pages with a user-friendly builder, advanced analytics, a built-in validator tool, and more. Start creating faster landing pages today. Book an Instapage demo to see how.

Turn More Ad Clicks into Conversions

Try the world's first Post-Click Automation™ solution today. Start a trial or schedule a demo to learn more about the Enterprise plan.