---
url: "/bannerify/tutorials/add-rich-text-popup-overlays-to-html-figma-banners.md"
description: "This video shows how to use the Bannerify Figma plugin to add interactive popup overlay disclaimers to HTML banner exports. It covers selecting CTA trigger layers, generating and customizing the overlay component, exporting to HTML, and testing the result in the browser."
---

# Add rich text popup overlays to HTML Figma banners

> This video shows how to use the Bannerify Figma plugin to add interactive popup overlay disclaimers to HTML banner exports. It covers selecting CTA trigger layers, generating and customizing the overlay component, exporting to HTML, and testing the result in the browser.

[← Back to Bannerify Video Tutorials](/bannerify/tutorials)

[Embedded media](https://www.youtube.com/embed/fOlw2ghGcIc)

**What this video covers**

This video shows how to use the Bannerify Figma plugin to add interactive popup overlay disclaimers to HTML banner exports. It covers selecting CTA trigger layers, generating and customizing the overlay component, exporting to HTML, and testing the result in the browser.

**Things you'll need**

- A Figma file with banner frames already created
- The Bannerify Figma plugin

**Steps**

1. Open the Figma file, find Bannerify from Resources or Saved Plugins, and run the plugin.
2. Load the checked banner frames into Bannerify so their layers are imported into the plugin timeline.
3. Use Quick Select Layers to select the trigger layers, such as all layers named "CTA Button."
4. In Generate Popup Overlay Disclaimers, choose the transition, speed, easing, and direction, then click "Create Popup Links."
5. Edit the generated popup overlay component in Figma by changing the content, colors, and padding as needed.
6. Export the banners to HTML, download the zip file, unzip it, and open the index.html preview page in a browser.
7. Click the CTA buttons in the exported banners to verify the rich text overlay opens and closes as expected.

**Useful links**

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=fOlw2ghGcIc)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-add-rich-text-popup-overlays-to-html-figma-banners-using-bannerify)
- [Browse Bannerify tutorial docs](https://docs.hypermatic.com/bannerify/tutorials)