Canvas Builder — Design Popups, Banners & Inline Blocks from Elements

The Canvas Builder is Personyze’s free-form design surface. Instead of starting from a
finished template and editing its text, you assemble a popup, banner or inline block out of elements
— a headline, a photo, a countdown, a form, a recommendation strip — and arrange them how you like.

Add it like any other action: on a campaign’s Content step choose Canvas Builder.
It has three steps: Design Your Banner or Popup, Where the data goes (only when your
design contains a Form), and Set Display Rules & Placement.

Canvas Builder or Popup, Banner & HTML Builder?

Both actions produce the same kinds of content and share everything after the design step — placement, display
rules, containers and reporting are identical. They differ only in how you design.

Start from a design, or from nothing

A new action opens on Start from a design. There are 15, including Showcase (the whole
toolbox in one card), First-visit welcome, Coupon code, Sale announcement,
Personalized greeting, Announcement bar, Exit-intent save, Minimizable teaser,
Recommended for you, Picture beside the pitch, Full-screen takeover, Social proof,
Latest articles and Blank. Every one is a normal design once inserted — nothing is locked.

The element library

Elements are grouped Text · Media · Form · Layout · Dynamic in the Add element rail. Click
to append, or drag onto the canvas — drop on the right edge of an element to place the two side
by side.

Text

• Chip / Pill — a small badge line, e.g. “★ Special Offer”.
• Headline & Subtitle — the main headline plus an optional supporting line.
• Paragraph — a block of body text.
• Checklist — a titled list of benefits with coloured bullets.
• Rotating Text — cycles messages one at a time, cross-fade or slide-up.
• Testimonials — quoted customer testimonials.

Media

• Image — a picture with max-height, radius and alignment.
• Icon — a single icon, sized and coloured.
• Video — embeds a YouTube or Vimeo watch link.
• Image Slider — a swipeable carousel; a second slide brings arrows.
• Logo Row — a row of customer or partner logos.

Form

• CTA Button — the call to action.
• Form — fields that save into visitor-profile columns, stacked or side by side, with a
  thank-you message that replaces the fields on success.

Layout

• Divider — a horizontal rule.
• Close (×) button — a dismiss control you can position anywhere, separate from the popup’s own corner ×.
• Media + Text — picture one side, words the other, with an adjustable split.
• Menu — a navigation list, as a row or a column, optionally behind a ☰ icon.
• Minimize tab — collapses the whole popup to a labelled tab (see below).

Dynamic

• Countdown — a fixed date, or per-visitor / per-session, in Boxes, Pills or Minimal styling.
• Coupon — a discount code with one-click copy.
• Product Recommendations / Content Recommendations — live per-visitor picks, slider or grid.
• Social Proof — real counters or “recent buyer” lines, never fabricated, hidden below a threshold you set.
• Progress Bar — progress toward a goal from a profile field, such as cart total or points.
• Prize Wheel — a weighted spin-to-win with per-segment prizes and codes.
• HTML / Embed — arbitrary HTML, shipped as written.
• Custom JavaScript — code that runs when the popup is shown; renders nothing visible.

Shaping the container

The Container panel controls the frame everything sits in: width (fit the placement,
full width or a fixed maximum), background colour or image, corner radius, padding, and what happens
when it is taller than the screen — run off the screen, or scroll inside the popup.

Split with a photo pane puts a photo down one side, with an adjustable pane width and a
keep in view focal point so faces are not cropped. It stacks automatically on phones.

Fonts are a curated list that downloads nothing — system, Helvetica/Arial, humanist, geometric, Georgia, slab
serif or monospace, plus whatever the page uses. That last one is right for inline blocks and usually wrong
for a floating popup, which needs to look deliberate against an unknown page.

Per-element control

• Devices — show an element on all devices, desktop & tablet, or phones only.
• Animation — an entrance (fade, rise, zoom, slide) and an optional attention animation
  (pulse, occasional shake). Visitors who ask for reduced motion see it still.
• Size & position — width, alignment, spacing, and place beside the previous
  element to build a row.
• Background & border — per-element background, padding, border, radius, shadow, and hover colours.
• Advanced — custom CSS, plus separate phone CSS for screens up to 767px.

The minimize tab

Add a Minimize tab and the popup collapses to a labelled tab instead of closing — always one
click from returning. You control the label and icon in both states, where the tab sits, whether it starts minimized,
and whether that state is remembered across pages.

Versions and AI editing

The versions bar builds audience-specific designs in one action: a Default everyone sees,
plus named versions evaluated first-match-wins against your full audience vocabulary — visitor traits, geography,
behaviour, CRM fields, the current page.

Edit this popup with AI rewrites or restyles the design from a plain-English instruction. Click an
element on the canvas first to focus the AI on it, then Apply AI changes.

Things worth knowing

• A button only counts clicks if it is a real call to action. Buttons added from the designs are
  wired for reporting; if you build a link by hand and its clicks never appear, this is why.
• Reporting is decided by the action type, not by what you put in it. A Form element inside a
  plain Canvas Builder popup reports submissions as clicks. Form-specific reporting — the Forms report,
  “submitted a form” audiences, follow-up emails — comes from the dedicated lead-form action type.
• Video embeds YouTube and Vimeo. Other hosts are not embedded.
• Custom CSS is sanitized. Declarations containing quotes, angle brackets, braces or
  javascript: are dropped. A rule that “does nothing” is usually this.
• Hidden is not deleted. The eye icon keeps an element in your design but skips it for visitors.
• Erase all content asks twice, and undo can still bring it back.

Related

• Popup & Banner action guide — the template-based builder.
• Inserting dynamic variables — personalize the text inside any element.
• A/B testing — compare two designs.