# How to Use amp-lightbox in Your AMP Emails

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "Amp-lightbox: Features, Application, and Examples",
  "description": "Features and applications of amp-lightbox, one of the AMP email components. With amp-lightbox, you can show email elements in a glowing lightbox effect.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870720/strapi/Featured_image_amp_lightbox_b69fd105dd.png",
  "datePublished": "2022-02-16T18:57:47.824Z",
  "dateModified": "2025-01-08T06:28:30.025Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Amp-lightbox: Features, Application, and Examples",
  "description": "Features and applications of amp-lightbox, one of the AMP email components. With amp-lightbox, you can show email elements in a glowing lightbox effect.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870720/strapi/Featured_image_amp_lightbox_b69fd105dd.png",
  "datePublished": "2022-02-16T18:57:47.824Z",
  "dateModified": "2025-01-08T06:28:30.025Z",
  "author": {
    "@type": "Person",
    "name": "Suryanarayan Pal",
    "url": "https://www.mailmodo.com/guides/author/suryanarayan-pal/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/amp-lightbox/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "amp lightbox",
      "item": "https://www.mailmodo.com/guides/amp-lightbox/"
    }
  ]
}
</script>

## Table of contents

- What is an amp-lightbox?
- Applications of amp-lightbox
- Features of amp-lightbox
- Wrapping up

Have you seen an effect where an element comes to the screen center when you click on it while putting a dark shade on everything else?

It is known as the lightbox effect and is generally done to highlight an element and get a better view of it. With the **amp-lightbox** component’s help, you can now create lightbox effects right inside your [AMP emails](https://www.mailmodo.com/guides/amp-for-email/).

 This guide will discuss what amp-lightbox is and how to use it in your AMP emails.



-   What is an amp-lightbox?

- Applications of amp-lightbox

-   Features of amp-lightbox
    
-   Wrapping up

## What is an amp-lightbox?

**The amp-lightbox is an [AMP email component](https://www.mailmodo.com/guides/amp-email-component/) that shows elements in a lightbox effect. It is when the elements come to the screen center and generally, an overlay of transparent black shade covers everything else. There may be any elements inside a lightbox such as buttons, images, and containers.**

![amp lightbox in action](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1651817221/strapi/amp_lightbox_in_action_3fbaf05abd.png)

## Applications of amp-lightbox

Here are some ways in which you can use the amp-lightbox:

### 1. Reveal discount offers
    

We all have seen pop-ups on eCommerce websites where after we spend some time, it shows a pop-up with a discount offer. They do it for a reason, as [discounts trigger buying decisions](https://www.statista.com/statistics/824001/users-importance-discounts-coupons-digital-purchasing-decisions/). So it may be beneficial to use that in your AMP emails by adding your discount pop up inside the amp-lightbox.

### 2.  Give feedback
    

You shouldn’t leave your clueless and give them feedback if something is important. Pop-ups are one of the ways in which you can give feedback. Create a pop-up with amp-lightbox that’ll notify the users. 

For example, you are probably aware of the [iPhone’s storage](https://photos5.appleinsider.com/gallery/32342-55304-000-lead-iPhone-Storage-xl.jpg) full pop-up. With the help of that pop-up, Apple gives feedback to its users that their storage is full.





### 3.  Make your emails appealing

The lightbox effect makes your emails stand out because it is rare for people to see a lightbox effect in their emails. So if you include one, users will find your emails appealing and they will remember you. So it is totally fine to use this effect just to make your emails look appealing.


**Related guide:** [How to Use amp-image-lightbox in Your AMP Emails](https://www.mailmodo.com/guides/amp-image-lightbox/)


## Features of amp-lightbox

With the amp-lightbox component you can create the following lightbox effects:

### ✅ Mention the animation type

You can set how the lightbox will animate with these animation attributes: **fade-in**, **fly-in-bottom**, and **fly-in-top**. The default value is set to fade-in, making the lightbox slowly appear in view.

### ✅ Style your lightbox with standard CSS

The standard CSS allows high customizability, and you can use this functionality to customize your AMP lightbox effect as well. You can customize both the lightbox effect and the elements inside it to make it look exactly the way you want.

Other attributes of amp-lightbox include: **id, layout, autofocus, data-close-button-aria-label,** etc. Visit [amp.dev](https://amp.dev/documentation/components/amp-lightbox/?format=email) for more information.

## Wrapping up

The lightbox effect has many applications, and we have discussed some of them in this guide. Similar to the amp-lightbox, we have also covered other AMP email components like the [amp-accordion](https://www.mailmodo.com/guides/amp-accordion/), [amp-sidebar](https://www.mailmodo.com/guides/amp-sidebar/), amp-image-lightbox. These also provide some cool effects to use and make your emails more appealing.

---

**Author: Suryanarayan Pal**

Suryanarayan has 7 years of experience in email marketing for B2B, SaaS, and e-commerce, specializing in email deliverability and project management.

