---
url: "/bannerify/tutorials/add-custom-html-css-and-javascript-to-figma-banner-exports.md"
description: "This tutorial shows how to use the Bannerify Figma plugin to export HTML banners with optional custom HTML, CSS, and Javascript injected into the output. It also demonstrates how to turn the feature on or off and how custom code appears in the exported preview page."
---

# Add custom HTML, CSS, and Javascript to Figma banner exports

> This tutorial shows how to use the Bannerify Figma plugin to export HTML banners with optional custom HTML, CSS, and Javascript injected into the output. It also demonstrates how to turn the feature on or off and how custom code appears in the exported preview page.

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

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

**What this video covers**

This tutorial shows how to use the Bannerify Figma plugin to export HTML banners with optional custom HTML, CSS, and Javascript injected into the output. It also demonstrates how to turn the feature on or off and how custom code appears in the exported preview page.

**Things you'll need**

- Bannerify should already be installed or saved as a Figma plugin.
- The banners should already be designed and ready to export.

**Steps**

1. Open Figma, use the Resources icon to search for Bannerify, and save or run the plugin from Plugins > Saved Plugins.
2. In Bannerify, open Export to HTML and turn on Inject Custom Code.
3. Paste custom HTML into the body tag field for banner content.
4. Paste custom CSS into the CSS styles field and Javascript into the Javascript code field.
5. Export Banners, download the zip file, and open the HTML preview page to test the injected code.
6. Turn off Inject Custom Code and export again to remove the custom code from the output.
7. Optionally add code to the HTML to head tag field for items like meta tags or script tags that belong in the document head.

**Useful links**

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=Uwe6PLmErRU)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-add-custom-html-css-and-javascript-to-figma-banner-exports-using-bannerify)
- [Browse Bannerify tutorial docs](https://docs.hypermatic.com/bannerify/tutorials)