Documentation

Getting Started

What you need

Before you start, you need three things:

• A Webflow account with the ability to export your project as code (paid Webflow plan)
• A Web to Banner subscription (7-day free trial available, $29/month after)
• A banner design — or you can clone the starter template

The five-minute path to your first banner

The fastest way to understand Web to Banner is to ship one banner end to end.

1. Sign up. Go to webtobanner.com and create an account.
2. Open the dashboard. The setup guide walks you through everything the first time.
3. Create a Webflow page. Name it anything — the page name doesn't matter. Web to Banner detects size from the design, not the file name.
4. Add a Div Block. Set its Width and Height in pixels (e.g. 300px × 250px). This div is your banner canvas.
5. Add the data-banner-root attribute. With the div selected, go to the Settings tab → Custom Attributes → +. Name data-banner-root, leave value empty.
6. Design your banner. Add logo, headline, image, button — like any Webflow design.
7. Add animations through GSAP custom code if you want them. Don't use Webflow's native Interactions — they rely on a script that's stripped from output.
8. Export the Webflow ZIP. Site Settings → Export Code → Prepare ZIP → Download.
9. Upload to Web to Banner. Click upload, select your ZIP, click Upload & Process. Under 30 seconds.
10. Download the output. Each inner ZIP is GDN-ready. Upload directly to Google Ads.

Core Concepts

Three concepts unlock everything Web to Banner does.

data-banner-root

This is the only required Webflow attribute. It marks the outer container of your banner. Everything inside this div becomes the finished banner. Anything outside it is ignored.

You add it as a Custom Attribute in Webflow's Settings panel. Name: data-banner-root. Value: empty.

A banner page must have exactly one data-banner-root element. You can have multiple banner pages in one Webflow project — each with its own data-banner-root — and Web to Banner processes all of them in a single upload.

data-banner-name (optional)

By default, output ZIPs are named by their dimensions (300x250.zip). For meaningful filenames, add data-banner-name to your data-banner-root element. The value becomes the output ZIP's filename.

Names are sanitized: "Summer Sale!" becomes Summer-Sale.zip. data-banner-name becomes essential when using CSV versioning with multiple same-size templates — it tells Web to Banner which template a CSV row should target.

data-slot (optional)

This is the foundation of versioning. Tag any element you want to swap per version. The slot name becomes the column header in your CSV.

For example, on your headline element: data-slot="headline". On your image: data-slot="image". On your button: data-slot="cta".

The slot system has three behaviors built in:

Content swap. When the cell value is text or HTML, the element's content is replaced.

Image swap. When the slot is on an <img> element and the cell is a URL, the image's src is replaced. URLs must be publicly accessible — Webflow CDN URLs work great.

Color swap. When the cell value is a color (hex, rgb, hsl, or named), Web to Banner applies it as inline CSS. Text elements get color, containers like <button> and <div> get background-color.

Multiple slots per element. Comma-separate to swap two things on one element: data-slot="cta,cta_bg". To swap a button's background color and its text color independently, wrap the text in a span:

<button data-slot="cta_bg">
  <span data-slot="cta_color">Shop Now</span>
</button>

Then your CSV has both cta_bg and cta_color columns with hex values per row.

How-To Guides

Create a versioned banner workflow

When you need many ad variants from one design, CSV versioning produces all of them in a single upload.

Step one: Design your banner template in Webflow. Tag swappable parts with data-slot attributes.

Step two: Build your CSV. Required columns: version_id, size, campaign. Add columns matching your slot names. Save as .csv.

For example, if your Webflow design has slots named headline, image, and cta, your CSV would look like this:

Step three: Upload both the Webflow ZIP and the CSV. Click Upload & Process. The Preview Versions button opens an interactive lightbox showing every generated banner. Output is organized as Campaign/version_id.zip.

Use color theming across versions

Tag elements whose colors you want to swap, then provide hex values in the CSV:

Web to Banner detects each cell as a color and applies it as inline CSS, picking the right property automatically based on the element type.

Handle multiple banner sizes

Create one Webflow page per size. Each page has its own data-banner-root. Export the entire project as one ZIP — Web to Banner finds and processes every banner page.

Upload to Google Ads

For HTML5 display ads:

1. In Google Ads, go to your campaign
2. Ads & Assets → Ads → Plus button → Upload display ad
3. Click Upload an HTML5 ad and select the inner ZIP file
4. Set your destination URL — Google Ads replaces Web to Banner's placeholder click tag automatically
5. Add to ad groups and publish

The 150KB per-banner limit is enforced by Google. Web to Banner shows a red icon if any banner exceeds it.

Use multiple templates of the same size

Give each same-size banner a unique data-banner-name. In your CSV, add a template column matching one of these names. Each row now uniquely identifies one Webflow template.

Update a banner after publishing

Edit the design in Webflow → export new ZIP → upload as a new project → download new output → re-upload to Google Ads. Old projects are kept as history; delete with the X button.

Test banners before publishing

The Preview button opens a browser-based preview with animations playing. For rigorous validation, the AdValify HTML5 validator is linked from the setup guide. A few warnings are safe to ignore: jQuery (Google accepts it), Backup image (legacy Flash compatibility), Exit API (only for app install ads).

Keep banners under 150KB

Most of your size budget is consumed by images. Tactics:

• Use JPEG instead of PNG for photos
• Compress images in TinyPNG or similar before adding to Webflow
• Avoid embedded fonts — use Google Fonts via CDN
• Avoid Webflow Interactions (use GSAP custom code instead)
• Turn off Include jQuery if you're not using it

Reference

Webflow attributes

CSV columns

Required system columns

Optional columns

Slot value behavior

Color formats accepted

• Hex: #ff0000, #fff, #ff0000aa
• RGB / RGBA: rgb(255,0,0), rgba(255,0,0,0.5)
• HSL / HSLA: hsl(0,100%,50%)
• Named colors: red, blue, transparent, currentcolor, etc.

Output ZIP structure

Non-versioned uploads:

ProjectName.zip
├── 300x250.zip
├── 728x90.zip
└── 160x600.zip

Versioned uploads (with CSV):

ProjectName.zip
├── Spring-Sale/
│   ├── spring-hero-v1.zip
│   └── spring-hero-v2.zip
├── Summer-Promo/
│   └── summer-hero-v1.zip
└── Black-Friday/
    ├── bf-v1.zip
    ├── bf-v2.zip
    └── bf-v3.zip

Troubleshooting

"An error occurred. How to fix: Add a data-banner-root attribute..."

Web to Banner couldn't find the data-banner-root attribute. Check that you added the custom attribute in Webflow's Settings panel, that it's on the outermost wrapper of your banner content, and that you exported the right project.

"Banner page found, but size could not be detected"

Your data-banner-root container needs explicit pixel width and height. In Webflow's Styles panel, set W and H in PX (not Auto, %, or VW).

"CSV is missing required column(s)"

Add version_id, size, and campaign as the first three columns of your CSV.

"No CSV row matches any size in the Webflow upload"

Your CSV size column must exactly match the dimensions of your Webflow banner. Format is 300x250 with a lowercase x and no spaces.

Preview shows the banner but my CSV values aren't applied

Most often this is a name mismatch between your data-slot attributes in Webflow and your CSV column headers (case-sensitive). Also confirm the file is saved as .csv not .xlsx.

A banner is over 150KB

Open the Webflow project, find the largest images in your banner, and replace them with smaller versions. JPEG instead of PNG for photos. TinyPNG for further compression. Re-export and re-upload.

I uploaded a CSV but only got non-versioned banners

The CSV file wasn't received by the build. Re-do the upload, making sure both file inputs (Webflow ZIP and Versions CSV) show green checkmarks before clicking Upload & Process.

My Webflow Interactions don't work in the output banner

Web to Banner intentionally strips webflow.js because it exceeds Google's 150KB limit. Use GSAP via custom code instead — it's well-documented at gsap.com/docs/v3 and Google-hosted CDN versions don't count against your size.

I deleted a project. Can I get it back?

No — project deletion is permanent. Re-upload the original Webflow ZIP to rebuild.

FAQ

How is this different from Google Web Designer?

Google Web Designer is a separate desktop tool with a steep learning curve. Web to Banner lets you keep using the design tools your team already knows.

How is it different from doing this manually?

Manual means: hand-edit HTML for click tags and meta tags, optimize images, write a build script, fix paths, ZIP it up, repeat for every variant. Web to Banner does it all in 30 seconds with zero hand-editing.

Can I use Web to Banner without Webflow?

Currently Web to Banner is built around Webflow's export format. Other static site exports might work but aren't officially supported. Future versions may add direct support.

Does it work with non-Google ad networks?

Output banners follow IAB HTML5 standards and are compatible with most networks (DV360, Campaign Manager, AdRoll, StackAdapt, etc.). The click tag uses Google Ads' default macros, recognized by most ad servers.

Can I edit the output HTML directly?

Yes — the output ZIP contains plain HTML, CSS, and JS. Most edits are easier in Webflow and re-process. Output is minified.

How long are my output files stored?

Indefinitely as long as the project exists in your dashboard. Input ZIPs are deleted immediately after processing.

What happens if I cancel my subscription?

Your dashboard becomes read-only. After 30 days, output ZIPs may be removed.

Can I share my account with my team?

Currently single-user only. Team accounts are on the roadmap.

Is there an API?

Not yet. Email support@webtobanner.com if you have a use case.

Where can I get help?

For product questions, the chat feature in the dashboard (coming soon) handles most inquiries. For things the chat can't answer, email support@webtobanner.com.