Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Inject custom HTML/CSS/Javascript code into all of your HTML banner exports - You can (optionally) inject any custom HTML, CSS and Javscript into all of your banners from the HTML export settings panel.. Machine-readable page: /bannerify/export/inject-custom-code.md.

Inject custom HTML/CSS/Javascript code into all of your HTML banner exports

You can (optionally) inject any custom HTML, CSS and Javscript into all of your banners from the HTML export settings panel.

Video Tutorial: Add custom HTML, CSS, and Javascript to Figma banner exports

This video tutorial is a complete step-by-step guide showing you how to add custom HTML, CSS, and Javascript to Figma banner exports using the Bannerify plugin.

If you need to add your own custom HTML/CSS/Javascript to all of your HTML banner exports, you can enable the Inject Custom Code toggle in the export settings, which will allow you to add custom HTML before the closing </body> (for adding content) or </head> (for adding meta tags or asset links) tags, or adding custom CSS to a new style tag, or adding custom Javascript code inside new a <script></script> tag.

Custom disclaimer overlay toggle example. You can reference this CodePen HTML/CSS/JS code example as a basic example for a common use case for this feature, which will inject a toggleable disclaimer pop-up over your banners. Feel free to copy and modify the styles and content as needed.

Saved Custom Code Presets (Optional) ​

The Saved Custom Code Presets feature allows you to save and reuse different configurations of custom HTML, CSS, and JavaScript code when exporting banners. To use it, you can populate your custom code in the four available areas (Head HTML, Body HTML, CSS, and JavaScript), enter a descriptive name, and click Save as New Preset to store that configuration for future use.

Once saved, you can quickly load any preset from the Load Saved Preset (Optional) dropdown menu to instantly populate all custom code areas with your saved configuration. This eliminates the need to manually copy and paste code snippets each time you export banners with different requirements. You can manage your presets by deleting ones you no longer need or updating existing ones by loading them, making changes, and saving with the same name. All presets are stored locally within your current Figma app (using the clientStorage API from Figma) and persist whenever you reopen the Bannerify code panel across different Figma files, making it easy to maintain consistent code across multiple export sessions.