Customizing the preview page for your exported HTML banners

Bannerify includes an HTML preview page inside of your banner .zip file exports, which is great for Sharing a preview of all your banners to a client or stakeholder on your team.

When you export any HTML banners, Bannerify will automatically include an HTML preview page. This file loads in all of your exported banners on the same page, and lays them out in a grid where you can see them all at the same time.

By default, the Generate Preview Page toggle is enabled in your HTML export settings panel, but if you'd prefer to exclude a preview page from being generated and added to your .zip package, you can optionally turn off this toggle, if needed.

Preview Page Title ​

The name of your Figma document will be used as the <title></title> tag for the exported HTML preview page from Bannerify.

Preview Page Banner Order ​

The order of your banner frames in the Figma layers panel will be used to order your banners on the preview page.

Selecting a layout for your preview page ​

Updating the preview page layout select box option will set the grid style used to position your banners in the generated index.html preview page. You can change this by selecting a different option in the select box.

Masonry Layout Grid ​

The masonry layout mode option will automatically figure out the best layout to fit all of your banners. This can be a good option for a large banner set.

Centered Layout Grid ​

The centered layout mode option will vertically align and horitzontally center all of the banners. This can be a good option for smaller banner sets.

Enabling "Dark Mode" on your preview page ​

Enabling the Dark Mode setting will set a dark theme/background to your generated index.html preview page. You can enable this setting if your banner designs work better against a darker background.

Adding a branded header to your preview page ​

If you're showing your index.html preview page to clients or third party stakeholders, you can add some custom HTML and CSS to apply your own branding or custom header to the page. Any HTML you add will be

Custom HTML ​

Any code added to the Custom HTML field will be injected directly after the <body></body> tag in the generated index.html page. You can add anything here, like a custom header, or something as simple as an <img> tag linking to your company logo.

Custom CSS ​

Any code added to the Custom CSS field will be injected into a custom style tag (so you don't need to add your own style tag in your input) in the index.html page. This can be used to style the Custom HTML you've added.

Sharing your preview page online ​

The exported Bannerify .zip includes a root index.html file that displays all of the exported banners. You can either upload this package from Bannerify using one of the built-in integrations, or upload it manually to a static hosting service.

Quick manual upload with Tiiny Host ​

For a quick drag-and-drop option, you can manually upload the exported Bannerify .zip to Tiiny Host. The package already contains the required root index.html, so you do not need to rearrange the exported files first.

Built-in direct uploads ​

Enable Upload Preview Page in the Bannerify HTML export panel, then select one of these hosting providers:

  • Netlify uploads the preview package to a Netlify site.
  • Cloudflare Pages uses a Cloudflare API token, account ID and Pages project name. Bannerify creates the Pages project automatically if it does not already exist.
  • Vercel uses a Vercel access token and project name, with an optional Team ID. Each export creates a new preview deployment URL.

Cloudflare Pages has a free plan for static sites, subject to its current Pages limits. Vercel also has a free Hobby plan, but Vercel restricts Hobby accounts to personal, non-commercial use; business and team work requires an eligible paid plan.

Zapier and Make remain available for custom automation. Those integrations send the exported .zip to your webhook, so your Zap or Make scenario still needs a downstream static host if you want it to return a public preview URL.

Using the preview with Commentful ​

Commentful review links currently display Figma frames rather than embedding an external live HTML preview. For QA, share the hosted Bannerify preview URL for animation and interaction checks alongside a Commentful review link for frame-based comments and approvals.