Banner Studio: designing your banner

Banner Studio is where you build the consent banner your visitors actually see — every screen, button, and category, positioned exactly where you want it, with a live preview and one-click publish. Find it in the dashboard sidebar under Configure → Banner Studio (older bookmarks to /dashboard/banner will automatically forward you here — the two editors were merged into one).

This guide walks through the workspace itself: how it's laid out, how to move between screens, place elements, and get a finished design live.

Getting oriented

When you open Banner Studio you land in a three-panel workspace:

• Left rail — three tabs: Screens, Elements, and Layers.

• Canvas (center) — a live, drag-and-resize preview of whichever screen is selected, shown inside a device frame.

• Right rail (Inspector) — the properties of whatever you've selected: text content, colors, actions, spacing.

Above the canvas sits the toolbar: a Desktop/Mobile toggle on the left, Undo/Redo next to it, and Preview and Publish on the right. Below that is a sub-bar with the banner switcher (which saved design you're editing), Active on these sites, Templates, and Settings.

If this is a brand-new property with no banner configured yet, Studio doesn't drop you into a blank canvas — it opens with a polished default design (a bottom bar plus a preferences modal) so you always have something reasonable to start editing rather than an empty page.

Screens and how visitors move between them

A banner in Studio is really a small flow of screens — what the code calls "views." Each screen has a surface, which determines how it looks and behaves:

Open the Screens tab to manage this flow. From here you can:

1. Click Add screen to create a new one (choose its surface afterward).

2. Click a screen to select it and load it onto the canvas.

3. Use the up/down arrows to reorder screens, or Duplicate to copy one.

4. Double-click a screen's name to rename it.

5. Click Set start to mark which screen visitors see first.

6. Under Region start, optionally choose a different starting screen for the EU, US, Brazil, Canada, or "other" region — handy if, say, EU visitors should land on an opt-in screen while everyone else sees a lighter bar.

Screens are connected by button actions. When you set a button's action to Go to, you pick which screen it opens next; other actions (Accept all, Reject all, Save preferences, Back, Close) don't need a target. The Screens tab overlays these connections as arrows and will flag two problems inline before you ever publish: an orphaned screen nothing links to, and a trap screen with no way out. Fix these as you build rather than discovering them live.

Adding and arranging elements

Switch to the Elements tab for your component palette. Click any item to drop it onto the currently selected screen: headings and body text, logo and image, divider and spacer, buttons/links/policy links, a single category toggle or the full auto-generated category list, the live cookie-declaration table, a raw custom-HTML block, and (on plans with IAB TCF enabled) the TCF consent panel and vendor-count text.

Once an element is on the canvas:

• Click it to select it — its content, action, colors, and spacing open in the Inspector on the right.

• Drag it to reposition, or drag a resize handle to change its size. The canvas snaps to alignment guides as you move things, so edges and centers line up automatically.

• Use the Layers tab to see every element on the current screen in stacking order, and to reorder or reselect them without hunting on the canvas.

Every element carries independent desktop and mobile positions and sizes. Toggle Desktop / Mobile in the toolbar to switch which breakpoint you're placing things for — moving an element on mobile never disturbs its desktop layout, and vice versa. This is also where the accessibility strip below the canvas is worth a glance: it flags things like low color contrast or a tiny font size as you work. These are advisory only — they never block publishing.

Previewing and publishing

Click Preview at any point to open an overlay that simulates the live banner exactly as a visitor would see it, without touching your real site. It's the fastest way to sanity-check a flow end to end — click through Accept, Reject, and Customize the way a visitor would.

When you're happy, click Publish. This saves your draft into the banner design and pushes it live to every property that design is currently assigned to (see the Banner library guide for what "assigned" means) — visitors pick up the change on their next page load. Publish stays disabled until the active property's existing configuration has fully loaded, which is a safety measure: it guarantees a publish can never accidentally wipe out settings like blocking mode, Consent Mode, or geo rules that live outside the visual canvas.

Tips

• Start from a template (via the Templates button) rather than the blank default if you know your compliance posture up front — see the Templates guide.

• Use Settings for anything that isn't visual: blocking behavior, consent signals (Google Consent Mode, TCF, GPP), language and geo targeting, and custom categories. The canvas only draws what visitors see, not how the banner behaves.

• Undo/Redo cover your whole editing session, so experiment freely — nothing is permanent until you click Publish.