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 or Gaming & marketplaces), or leave it on All templates.

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.

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

If the layout includes one or more images, 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.

Below the preview:

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

Some layouts also add a Layout section with image placement settings:

• Image width: share of the popup width, as a percentage.
• Image position: Left or Right, for layouts with an image 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.

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.

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.
• Color, Opacity: set the overlay color and opacity from 0 to 1.

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 subscription form is selected, click Add on its toolbar and choose Text, Button, 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 + Text, + Button, and + Form buttons — click one to add that block type there.

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.

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.
• 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.

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

Buttons with a Go to page action pointing to the deleted page fall back to the start page.

Save the content

Review the content, images, 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.