Configuration · Layout

Layout

Layout options size the editor on your page and tune its two side panels. The editor mounts as a centre script editor flanked by a west panel (the creatives list) and an east panel (the dynamic-properties controls). Each side panel's options only matter when the feature behind it is on.

Show voice/track tags

What it is — the small descriptive chips next to each suggested voice and track in the recommendation panels (e.g. Female, Upbeat, Electronic — Synth-Pop).

Why / when — on by default because the tags help users choose. Turn them off for a cleaner, less busy presentation when your audience doesn't need the metadata.

How — this is an opt-out: set recommendations.showTags to false to hide them (Builder: Layout → Show voice/track tags).

javascript

recommendations: {
  showTags: false,
}

Height

What it is — how tall the editor appears on your page.

Why / when — go taller for power-user workflows, shorter for a compact widget. Accepts any CSS length.

How — layout.height (default '500px'). E.g. '80vh'.

javascript

layout: {
  height: '600px',
}

Creatives panel (west)

Requires Project → Allow multi-creatives. These options only take effect when multi-creatives is on — otherwise there's no creatives list to size or hide.

Creatives panel width

What / why — how much room to give the list of ad variations. Accepts CSS lengths.

How — layout.westWidth (default '244px'; e.g. '25%').

Start with creatives list hidden

What / why — keeps the variations list out of sight on first load — useful when most users only edit a single ad. They can open it anytime by clicking the handle.

How — layout.westCollapsed: true.

Dynamic properties panel (east)

Requires Vocal → Dynamic content or Music → Dynamic. These options only take effect when a dynamic-content feature is on — that's what the east panel hosts.

Dynamic properties panel width

What / why — how much room to give the personalisation controls where users configure their audience criteria. Accepts CSS lengths.

How — layout.eastWidth (default '30%'; e.g. '280px').

Start with dynamic properties hidden

What / why — keeps personalisation out of sight on first load — good for guided flows where users discover it later. They can open it anytime by clicking the handle.

How — layout.eastCollapsed: true.

Putting it together

javascript

project: { allowMultiCreatives: true },
vocal:   { dynamicContent: true },
layout: {
  height: '600px',
  westWidth: '244px',     // creatives list
  westCollapsed: true,    // start hidden
  eastWidth: '30%',       // dynamic properties
  eastCollapsed: false,
}