Skip to main content

Get to know the popup editor

A guided tour of Forms > Campaigns and the drag-and-drop popup editor.

Written by Engineering team

TL;DR. Two pages run the show: Forms > Campaigns (the list) and the editor (per popup). Knowing what's where and how to navigate the drag-and-drop editor saves a lot of clicks.

Forms > Campaigns

The campaigns page is your home base. URL: /popups/campaigns.

What's on the page

  • All / Active / Paused tabs at the top.

  • Search campaigns input.

  • A campaign card for each campaign you've created.

  • An Additional options section at the bottom: Native Browser Prompt and iOS Install Prompt (see Popup conflicts (two popups, Native Browser Prompt, iOS Install Prompt)).

What's on a campaign card

  • Status badge: Active (green) or Paused (grey).

  • Campaign name: e.g. "Welcome Offer Popup". Click the pencil to rename.

  • Three buttons on the right:

    • Targeting: opens the triggers + targeting + frequency dialog.

    • Subscriber lists: choose which lists subscribers go into.

    • More actions: duplicate, archive, delete.

  • A row showing the popup inside the card, with thumbnail, name, Live or Draft badge, and step chips (e.g. "1 Teaser, 2 Email, 3 SMS").

Campaign card showing a Live popup inside the campaign

The popup editor

Click the popup row to open the editor. URL pattern: /popups/edit/{popup_id}.

The three panes

  • Left sidebar: the step list. Drag rows up or down to reorder. Click + Add step to insert a new step.

  • Canvas: a live preview of the current step. Click any element (heading, paragraph, image, button, input) to select and edit it. Selected elements show a blue border and resize handles where supported. Click outside any element to select the step container.

  • Right sidebar: settings for whatever's selected. Element selected: color, font, size, padding, link target, button action. Step container selected: background color or image, max width, alignment. Nothing selected: campaign-level theme and popup behavior.

  • Top bar: popup name (click to rename), undo / redo, Save, Publish, Preview.

The popup editor's initial view: step list on the left, canvas in the center, settings on the right

Step types you can add

  • Teaser: the floating tab outside the popup.

  • Micro Commitment: yes/no qualifier ("Want a discount?").

  • Email, SMS, Web Push: collection steps.

  • Reward / Thank You: discount display.

  • Custom: free-form content.

  • Gamification: Spin-to-Win, Scratch Card, Mini Quiz.

For details on each step type, see Step types, multi-channel collection, and rewards.

The Add step menu showing every available step type

Common edits

Change a button label

Click the button, then in the right sidebar edit Label.

Change a heading

Click the heading, then edit text directly on the canvas, or in the right sidebar.

Change a step background

Click any empty area inside the step, then in the right sidebar change Background.

Remove a step

In the left sidebar, click the on a step, then Delete.

Reorder steps

Drag and drop in the left sidebar.

The editor after a Web Push step has been added to the popup

Save and preview

Save as Draft

Click Save. Your changes are stored, but the live popup isn't updated.

Preview

Click Preview in the top bar. A preview opens in a new tab showing the popup the way visitors will see it. Step through manually.

Publish

Click Publish to push your changes Live. For the full lifecycle, see Publish and schedule your popup.

Did this answer your question?