Web popup content

Web popup content is the visual layout visitors see when a Web popup appears on your website. Build it under Content, then attach it to a Web popup campaign.

Create Web popup content

1. Go to Content → Web popup content.
2. Click Create web popup content.
3. Pick a starting template from the gallery. Use the category dropdown in the top right to filter by use case (for example Promotions & offers, Gaming & marketplaces, or Feedback & surveys), or leave it on All templates. The Blank layouts category holds the plain starting points, including Modal + subscription form, which comes with a subscription form block already in place.

4. Once you’ve picked a template, customize the popup in the editor.

Name the popup

Click the popup name in the top bar to edit it. The name identifies this content inside Pushwoosh, in the content list and the campaign wizard. Website visitors do not see it.

Undo and redo

Use keyboard shortcuts to step back and forward through your edits:

• Cmd/Ctrl+Z: undo.
• Cmd/Ctrl+Shift+Z: redo (Windows/Linux also accept Ctrl+Y).

Note

Cmd+Y is reserved by the browser, so redo on Mac only responds to Cmd+Shift+Z. While a text field is focused, the shortcuts undo or redo changes in that field instead.

Edit popup settings

Adjust the popup’s appearance and position in the settings panel on the left of the canvas:

Note

These settings control the popup design only. Audience, page targeting, delay, frequency, and launch settings are configured in the Web popup campaign.

Images and video

If the layout includes one or more media blocks, each gets its own block at the top of the panel with a preview and controls.

Click Change image to pick a file from your project’s Media store, or set Media to Video to play a video instead of a static image.

Below the preview:

• Media: Image or Video.
• Fit: how the image or poster fills its frame: Natural, Cover, or Contain. Not shown for a background image, which always covers its area.
• Blur: soften the image or poster, from 0 to 20 px.
• Dim: background media only. Adds a dark scrim over the image or video so text placed on top of it stays readable, from 0 to 100%.

With dark theme enabled, each image block adds its own Dark theme image row with a Change image button and an Image URL (dark theme) field. Set it to swap in a different image (for example a logo with dark ink instead of one that would sink into a dark background) while the popup renders dark. It applies to the same block’s image everywhere that image paints, including a background image or a video poster. Leave it empty and the block keeps showing the light Image URL in both schemes.

Setting Media to Video adds four more fields:

• Video URL: a direct link to the video file. Video only accepts an external URL. You cannot upload a video to the Media store. Export it as an MP4 (H.264 video, AAC audio) with “fast start” enabled (sometimes called “web-optimized”), so the browser can start playing before the whole file downloads. If the URL fails to load, visitors just see the poster.
• Loop: replay the video continuously instead of stopping after one play.
• Show controls: display the browser’s built-in play, pause, and volume controls. Videos always start muted, and without this option visitors have no way to turn the sound on.
• Poster URL: the image shown while the video loads. It’s optional but recommended: it’s also the only thing shown to a visitor whose browser is still running an older popup script that doesn’t support video, so leaving it empty means that visitor sees nothing where the video would be.

Some layouts also add a Layout section with placement settings for the media block:

• Image width: share of the popup width, as a percentage.
• Image position: Left or Right, for layouts with media beside the text.

The Layout section only appears when the current layout has settings like these. On a bottom bar layout, it offers Buttons width instead of image controls.

Popup size and style

In the Popup section:

• Width, Height (empty = auto): leave both empty for a popup that sizes itself to its content, or set a fixed size in pixels. In a popup with multiple pages, each page has its own size.
• Corner radius, Shadow: the popup’s corner rounding and drop shadow.
• Animation: how the popup appears: None, Fade, or Slide.

With dark theme enabled, Shadow follows the sun/moon scheme switch: edit it while the switch is set to Dark to set a shadow for the dark palette, separate from the light one. A shadow tuned for a light page is often invisible on a dark one, so the two need different values. Leave the dark shadow untouched and the popup keeps using the light Shadow value in both schemes.

Colors

Click Colors to expand the popup’s color palette:

• Background, Accent (buttons): the popup background and the accent color applied to buttons.
• Text, Secondary text: the color of body text and of secondary text such as captions and eyebrows.
• Text over image: only shown for layouts with text over a background image. Sets the color used for that text.

Dark mode

Turn on Enable dark theme to give the popup a second palette for visitors whose device is set to a dark color scheme. With it off, the popup always renders with the light palette above, on every visitor.

Once Enable dark theme is on:

• Use the sun/moon switch above the color fields to pick which palette you’re editing. The canvas redraws in that scheme, so you can check the popup as it will actually look in each mode.
• Click Auto from light to (re)generate the dark palette from the current light colors: surfaces fold dark and copy lifts light, while Accent and Text over image carry over unchanged. Edit any of the five fields afterward to fine-tune the result.
• Turning Enable dark theme back off keeps the dark palette instead of discarding it, so switching it on again restores your edits instead of regenerating from scratch.

The same sun/moon switch appears next to Close preview (Esc) when you open Preview on a popup with dark theme enabled, so you can check both palettes in the full-size preview too.

A visitor’s browser decides which palette they see, based on their OS-level dark mode setting — there’s no dark/light toggle on the popup itself. A site can force one scheme for everyone regardless of OS setting; see webPopups.colorScheme in the Web SDK docs.

Placement and overlay

In the PLACEMENT section:

• Position: pick where the popup anchors on the page using the 3×3 grid.
• Edge offset: set the distance in pixels from the selected edge.

In the OVERLAY section:

• Dim the page behind: turn on to darken the rest of the page while the popup is shown, in both schemes. Turning it off removes the dim entirely, including any dark-scheme values set below.
• Color, Opacity: set the overlay color and opacity from 0 to 1.

With dark theme enabled, Color and Opacity also follow the sun/moon scheme switch: set the switch to Dark to give the dim its own color and strength for the dark palette. Until you edit them there, the dark scheme shows the same Color and Opacity as the light scheme.

Dark

Light

Edit text

Click any text block on the popup to edit it inline. A toolbar appears above it:

• Apply bold, italic, or underline formatting.
• Add or remove a link.
• Set left, center, or right alignment.
• Choose a text style: Icon, Eyebrow, Heading 1–3, Body, or Caption.

Edit buttons

Click a button to open its toolbar:

• Choose the button style: Primary or Secondary.
• Choose what the button does:
  • Open a link: enter the target URL.
  • Close the popup.
  • Go to page: pick another page of the popup to switch to. This option appears once the popup has more than one page. See Work with multiple pages.

Tip

When a text block, button, or other element is selected, click Add on its toolbar and choose Text, Button, Icon, Countdown, Topic picker, Rating, or Subscription form to insert that block below it. Use the up and down arrows to move it on the page, and the delete icon to remove it. A page’s last remaining element can’t be deleted.

When a section of the popup has no elements, it shows only + Text, + Button, and + Form buttons. To add an Icon, Countdown, Topic picker, or Rating block, first add a text or button there, then use its Add menu.

Add a subscription form

Add a Subscription form block to collect email signups and other fields directly in the popup. Learn more about subscription forms.

Add the block

1. Select a text block, button, or other element on the canvas.
2. Click Add on its toolbar.
3. Choose Subscription form. The block appears right away with a default Email field and Subscribe button.

Choose a form source

Click the subscription form block to open the FORM toolbar. Its first dropdown links the block to a subscription form in your project. You can create a new form or pick one that already exists:

Option	When to use
New form — created on save (default)	Fastest start: Pushwoosh creates the form for you when you save the popup, named “popup name — web popup”.
+ Create new form…	You want to name the form and set it up before you save the popup. Opens a New subscription form dialog — enter a Name, then set its Fields, Submit text, and Privacy the same way as below, and click Create.
An existing form from the dropdown	Reuse a form that already has subscribers or double opt-in configured.

Important

If you pick an existing form from the dropdown, saving this popup updates that subscription form for the whole project. The fields, submit button text, and success messages you set in this block replace what that form had before. That includes the form embedded on your website and the form in Audience → Subscription forms.

Other Web popups that use the same form are not updated. Each popup keeps its own copy of the block’s fields and texts until you reopen that popup and save it again.

Set fields and submit behavior

1. Set the Submit button style in the FORM toolbar:
   • Primary: filled button in the popup Accent color. Best when Subscribe is the main action on the page.
   • Secondary: outlined button with a border and accent-colored label. Best when the popup already has a primary button or you want a lighter look.
2. Turn on Privacy to add a privacy-consent line under the form, then enter your privacy policy URL in the field that appears.

3. Click Fields… to open a popover where you can keep Email (always required) and add First name, Last name, Phone, or Custom, and set the Success and Confirm email texts shown after a visitor submits.

Add a countdown

Add a Countdown block to build urgency with a deadline that ticks down live on the popup.

1. Select a text block, button, or other element on the canvas.
2. Click Add on its toolbar and choose Countdown.
3. Click the countdown to open its toolbar:
   • Deadline: the date and time the countdown reaches zero.
   • Time zone: the zone the deadline is read in. Leave it empty for UTC.
   • Language: the language of the unit labels (days, hours, and so on). Leave it on English (default) or pick from 13 other languages.
   • Labels: turn on to show unit labels next to the numbers.
   • When the deadline passes:
     • Show zeros: the countdown keeps showing 00:00:00.
     • Do not show the popup: the whole popup is skipped once the deadline is in the past.
     • Go to page: jump to another page of the popup when the deadline passes. Only offered once the popup has more than one page — pick the target page from the dropdown that appears. See Work with multiple pages.

Note

The deadline is read in the time zone you pick here, not the visitor’s own time zone — the same contract as the countdown block in the email editor. Leave the field empty and the deadline is read as UTC.

Note

With Do not show the popup, Pushwoosh checks the deadline right before the popup would appear. A popup skipped this way doesn’t count against Once per visitor frequency, so it doesn’t use up the visitor’s one chance to see it.

Add an icon

Add an Icon block to drop a small pictogram — a percent sign for a sale, a gift for a drop — next to your copy.

1. Select an element, click Add, and choose Icon.
2. Click the icon to open its toolbar:
   • Icon: pick from a fixed set of 20 icons (bell, gift, cart, chart, lock, calendar, check, star, clock, tag, mail, phone, download, play, shield, sparkle, percent, truck, ticket, user). Custom icon uploads aren’t supported.
   • Size: 24, 32, or 48 px.
   • Accent: on by default, so the icon matches the popup’s accent color. Turn it off to pick a custom color.

Add a topic picker

Add a Topic picker block to let visitors self-select interests as checkboxes or chips. Their picks are written to a tag on their device.

Add the block and bind a tag

1. Select an element, click Add, and choose Topic picker. It arrives with two placeholder options and no tag bound — it won’t write anything until you pick one.
2. Click the block to open its toolbar. The first dropdown links it to a List-type tag in your project — pick an existing one, or choose Create a list tag to make one without leaving the editor.

Set the options and limits

Still in the toolbar:

• Control: show the options as Checkboxes or Chips.
• Minimum / Maximum picks: how many options a visitor must or can select. 0 on either end means no limit there — though at least one pick is always required to submit, even with Minimum at 0. Picking past the maximum, or trying to submit under the minimum, shows an inline message next to the block instead of sending anything.
• Click Options to open the options panel:
  • Edit each option’s Label (what the visitor reads) and Tag value (what’s written to the tag). Leave Tag value empty and Pushwoosh writes the option’s internal ID instead (option-1, option-2, and so on) — fill it in if you need a readable value in the tag.
  • + Option adds another row, up to 12 options total.
  • Set the Button label and the Message after sending.

Picks only add, they never remove

A visitor’s picks are appended to the tag — submitting the block again adds more values, it never clears previous ones. A popup can’t be used to let a visitor un-pick a topic they chose before; that needs a different surface, like a preference page backed by the same tag.

Add a rating

Add a Rating block to collect a quick score — NPS, stars, or thumbs — as a custom event.

Add the block and set the event

1. Select an element, click Add, and choose Rating. It arrives with no event set — it won’t send anything until you pick one.
2. Click the block to open its toolbar and pick an Event from your project’s existing events, or choose Create an event to define a new one without leaving the popup — Pushwoosh sets it up with the score, scale, and slotKey attributes the block sends. The score posts to Pushwoosh as that event — use it in segments or Customer Journeys the same way as any other event.

Creating an event here is permanent

An event you create from this menu is a real event on your project, not a draft — deleting it later means going to your project’s event list, not just changing the popup.

If an event bound to the block is later renamed or deleted elsewhere — or was typed into this field before it became a picker — the picker shows it as Missing: <event name> instead of silently dropping or swapping it. Pick a different event to fix the binding.

Configure the scale

Still in the toolbar:

• Scale: NPS 0–10, Stars (1 to 5), or Thumbs (up or down).

Note

Across all three scales, a higher score always means a more positive rating — Thumbs sends 1 for a thumbs-up and 0 for a thumbs-down.

• When the score is sent: On tap sends the score the moment a visitor picks a value. With a button waits for them to also click a submit button — set its label once this is selected.
• Optional labels at the two ends of the scale, and the Message after sending.

Work with multiple pages

A Web popup can have more than one page, for example to guide visitors through a short multi-step offer.

Add a page

Click + Add page to open the add-page menu:

• Duplicate current page: copies the active page, including any edits you’ve made, as a new page. If the source page has a subscription form, the copy is created without it — a popup can only have one.
• Pick one of the single-page layouts to add a fresh page with that layout’s demo content. The new page is independent of the others, so it can use a different layout. Modal + subscription form is one of these layouts — it comes with a subscription form block already in place.

Note

A Web popup can only have one subscription form. Once any page already has one, Modal + subscription form drops out of this menu.

Note

Multi-page example layouts, like Product tour (multi-page), always come as a full set of pages, so they’re only available from the starting gallery, not from this menu.

Each tab is one page. Click a tab to switch to it.

Set the start page

The tab marked with ★ is the start page, the page visitors see first. To change it, open another tab and click ☆ on that tab.

Delete a page

On the active tab, click ✕. A confirmation dialog opens. Click Delete to remove the page. This can’t be undone.

Note

Any button or countdown with a Go to page action pointing to the deleted page falls back to the start page.

Save the content

Review the content, images and video, and button actions. When you are finished, click Save in the top bar.

Note

Saving content does not show the Web popup on your site. The content appears on the site only after you select it in a Web popup campaign and launch the campaign.

Use the content in a campaign

After you save, the content appears in Content → Web popup content. Open it from the list to keep editing.

To show it on the site, go to Campaigns → Web popups, create or edit a campaign, and pick this content in the Content step.

Then configure the audience, display settings, frequency, and launch options. For the full flow, see Create Web popup campaigns.