Adding clickable rich text popup overlay links to your banners

You can use Bannerify to add a simple overlay popup to display rich text text (for example, disclaimers or terms and conditions) that shows up when you click on a certain layer in your banner.

Video Tutorial: Add rich text popup overlays to HTML Figma banners

This video walks through how to add rich text popup overlays to HTML Figma banners using the Bannerify plugin.

If you need to have a popup overlay with scrollable (and dismissible) rich text included in your banner, which can be opened by clicking a certain layer in your banner timeline, you can do this by selecting those desired trigger layers in each of your banners, then choosing any animation options under the Generate Popup Overlay Disclaimers section in the bulk actions window at the bottom of the plugin (which appears when multiple layers are checked in your timeline).

Once your happy with the popup animation settings, clicking the Create Popup Links button will automatically create a "Popup" component (containing a text layer and a close button) on your Figma page and automatically linking each of your selected layers as a trigger to point to that new Popup component via the native Figma Prototype link feature.

You're welcome to modify the content of the text layer, adjust the font size and change the solid color fills of the popup background, close icon and the text layer.

When you export your HTML banners, the plugin will automatically look for those Figma Prototype links and the Popup component that they're pointing to, and generate the clickable triggers and popup overlay code in your final exported banner set.

Customizing scrollbar styles ​

If you want to customize the scrollbar styling for scrollable truncated text layers or popup overlay text, enable Inject Custom Code in your HTML export settings, then paste this into the Custom CSS field.

css
:root {
  --bannerify-scrollbar-color: #ff6600;
  --bannerify-scrollbar-track-color: rgba(0, 0, 0, 0.12);
  --bannerify-scrollbar-width: 8px;
  --bannerify-scrollbar-height: 8px;
  --bannerify-scrollbar-radius: 8px;
}

/* Scrollable truncated text + popup overlay text */
[data-bnfy-scroll="1"],
dialog[id^="o_"] [class$="_text"] {
  scrollbar-color: var(--bannerify-scrollbar-color)
    var(--bannerify-scrollbar-track-color);
  scrollbar-width: thin;
}

/* Chrome, Edge, Safari */
[data-bnfy-scroll="1"]::-webkit-scrollbar,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar {
  width: var(--bannerify-scrollbar-width);
  height: var(--bannerify-scrollbar-height);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-thumb,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-thumb {
  background-color: var(--bannerify-scrollbar-color);
  border-radius: var(--bannerify-scrollbar-radius);
}

[data-bnfy-scroll="1"]::-webkit-scrollbar-track,
dialog[id^="o_"] [class$="_text"]::-webkit-scrollbar-track {
  background-color: var(--bannerify-scrollbar-track-color);
}

You can change the values at the top to update the scrollbar color, track color, width, height, and corner radius. Some browsers and mobile devices may still render scrollbars using their native system style, but the CSS will be applied wherever the client allows custom scrollbar styling.

Note, this component is designed to be extremely simple, with just the single text layer (for disclaimer text) and the close button. Feel free to customize the text content, font styles and colors, but any other customizations or additional layers added may break the exported HTML as a result.