# Web popup content blocks

Reference for every block you can add on a [Web popup content](/product/content/web-popup-content/) layout from the **Elements** tab.

Each block type serves a different purpose in the popup:

* **[Text](#text):** copy on the popup, with inline formatting and text styles
* **[Button](#button):** a call to action that opens a link, closes the popup, requests web push, or goes to another page
* **[Icon](#icon):** a small pictogram next to your text
* **[Countdown](#countdown):** a live deadline timer
* **[Topic picker](#topic-picker):** checkboxes or chips that write interests to a tag
* **[Rating](#rating):** an NPS, stars, or thumbs score sent as an event
* **[Subscription form](#subscription-form):** email signup and other form fields

## How to configure content blocks

1. Open the **Elements** tab on the right.

<img src="/content-web-popups-content-12.webp" alt="Right panel Elements tab with tiles for Text, Button, Icon, Countdown, Topic picker, Rating, and Subscription form"/>

2. Drag a tile onto the popup, or click it to add it to the page.
   - A click inserts the block below the selection on the canvas.
   - If nothing is selected, the block goes at the end of the page's first section.
3. Select a block on the popup to open the **Settings** tab (next to **Elements**). Adding a block from **Elements** opens **Settings** right away.

In **Settings** you can:

* Configure that block's own options
* Move it with **POSITION** (up and down arrows)
* Delete it with the delete icon

<Aside type="note">
When a section of the popup has no elements yet, it shows its own **+ Text**, **+ Button**, and **+ Form** controls in place. To add an Icon, Countdown, Topic picker, or Rating there instead:

1. Add an element using the **+ Text** or **+ Button** control.
2. Select it.
3. Add the block from the **Elements** tab. It lands in the same section, below your selection.
</Aside>

### Text

Click any text or button label 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.

<img src="/content-web-popups-content-5.webp" alt="Selected text on the Web popup canvas with the inline editing toolbar showing formatting, alignment, and link controls"/>

To change the text's style, select it and open the **Settings** tab on the right. Choose **Icon** (text style, not the Icon block), **Eyebrow**, **Heading 1–3**, **Body**, or **Caption**.

<img src="/content-web-popups-content-17.webp" alt="Text style dropdown in the Settings tab on the right, set to Eyebrow, with Position controls below it"/>

### Button

Click a button to select it, then open the **Settings** tab on the right:

- **Button style:** **Primary** or **Secondary**.
- **Action:**
  - **Open a link:** enter the **Link URL**. **New tab** is on by default. Clear the checkbox to open the link in the same tab instead.
  - **Close the popup**.
  - **Subscribe:** request web push permission and subscribe the visitor. This is not the email **Subscription form** block. A granted request closes the popup. A denied one disables the button, because the browser won't prompt twice.
  - **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](/product/content/web-popup-content/multi-page/).

Use **POSITION** to move the button up or down, or the delete icon to remove it.

<img src="/content-web-popups-content-8.webp" alt="Button Settings tab showing Button style Primary, Action Open a link, Link URL, and New tab checked"/>

### Icon

Add an **Icon** block to drop a small pictogram (for example a percent sign for a sale, or a gift for a giveaway) next to your text. This is the Icon block, not the **Icon** text style under [Text](#text).

1. Open the **Elements** tab on the right.
2. Click **Icon**.
3. Set the options in the **Settings** tab:

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

<img src="/content-web-popups-content-23.webp" alt="Icon block on the Web popup canvas next to text, with Icon Settings showing icon picker, Size, and Accent"/>

### Countdown

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

1. Open the **Elements** tab on the right.
2. Click **Countdown**.
3. Set the options in the **Settings** tab:

- **Deadline:** the date and time the countdown reaches zero.
- **Time zone:** the zone the deadline is read in, not the visitor's own time zone. Defaults to your browser's time zone; pick **UTC** from the list to read the deadline literally instead.
- **Language:** the language of the unit labels (days, hours, and so on). Leave it on **English (default)** or pick from 14 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. Pushwoosh checks the deadline right before the popup would appear. A popup skipped this way doesn't count against **Once per visitor** frequency.
  - **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](/product/content/web-popup-content/multi-page/).

<img src="/content-web-popups-content-18.webp" alt="Flash sale Web popup with a Countdown block showing days, hours, minutes, and seconds under a Shop now button"/>

### Topic picker

Add a **Topic picker** block to let visitors self-select interests as checkboxes or chips. Their picks are written to a [tag](/product/audience-data-and-segmentation/user-data-tags/tags/) on their device.

1. Open the **Elements** tab on the right.
2. Click **Topic picker**. The block appears with two placeholder options. Its settings open in the **Settings** tab.

<img src="/content-web-popups-content-19.webp" alt="Topic picker block on the Web popup canvas with interest options as chips or checkboxes and Settings open on the right"/>

3. In **List tag the choice is written to**, pick an existing List-type tag, or choose **Create a list tag** to make one without leaving the editor. Until you pick a tag, the block does not write anything.
4. Set **Control** to **Checkboxes** or **Chips**.
5. Set **Minimum picks** and **Maximum picks**. `0` on either end means no limit on that side (`0 = any` in the field labels). At least one pick is always required to submit, even when Minimum is `0`. Picking past the maximum, or trying to submit under the minimum, shows an inline message next to the block instead of sending anything.
6. Under **Options and copy**, edit each option's label (what the visitor reads) and **Tag value** (what's written to the tag). If you leave **Tag value** empty, Pushwoosh writes the option's internal ID instead (`option-1`, `option-2`, and so on). Use **+ Option** to add another row, up to 12 options total.
7. Set the **Button label** (default **Save**) and the **Message after sending** (default **Thanks! Your choice is saved.**).

<img src="/content-web-popups-content-22.webp" alt="Topic picker Settings tab showing List tag, Control, Minimum and Maximum picks, Options, Button label, Message after sending, and Position"/>

<Aside type="caution" title="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 let a visitor un-pick a topic they chose before. That needs a different surface, like a preference page backed by the same tag.
</Aside>

### Rating

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

1. Open the **Elements** tab on the right.
2. Click **Rating**. The block appears with no event set. Its settings open in the **Settings** tab.

<img src="/content-web-popups-content-20.webp" alt="Web popup with a Rating block using a five-star scale, Send rating button, and Next and Skip actions"/>

3. Set **Scale** to **NPS 0–10**, **Stars** (1 to 5), or **Thumbs** (up or down). Across all three, a higher score means a more positive rating. Thumbs sends `1` for a thumbs-up and `0` for a thumbs-down.
4. Set **When the score is sent** to **On tap** (sends when the visitor picks a value) or **With a button** (waits for a submit click).
5. In **Event the score is sent as**, pick an [event](/product/audience-data-and-segmentation/events/) from your project, or choose **Create an event** to define a new one without leaving the popup. The score is stored as that event (`score`, `scale`, and `slotKey` attributes). Use it in segments or Customer Journeys like any other event. Until you pick an event, the block does not send anything.
6. Optionally fill **Left label** and **Right label** at the two ends of the scale.
7. If **When the score is sent** is **With a button**, set the **Button label** (default **Send rating**).

<img src="/content-web-popups-content-21.webp" alt="Rating Settings tab showing Scale, When the score is sent, Event, Left and Right labels, Button label, and Position controls"/>

<Aside type="caution" title="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 **Missing: &lt;event name&gt;**. It does not silently drop or swap the event. Pick a different event to fix the binding.
</Aside>

### Subscription form

Add a **Subscription form** block to collect email signups and other fields in the popup. Use this for email and form fields. For web push permission, use a button with the **Subscribe** action instead. [Learn more about subscription forms](/product/audience-data-and-segmentation/subscription-forms/).

<Aside type="note">
A popup can have only one **Subscription form**. Once any page already has one, that tile is unavailable in **Elements**.
</Aside>

#### Add the block

1. Open the **Elements** tab on the right.
2. Click **Subscription form**.
3. The block appears with a default **Email** field and **Subscribe** button. Its settings open in the **Settings** tab.

<img src="/content-web-popups-content-24.webp" alt="Web popup on the canvas with a Subscription form block showing an Email field and Subscribe button"/>

#### Choose a form source

With the block selected, the **Settings** tab shows a **Subscription form** dropdown that links the block to a [subscription form](/product/audience-data-and-segmentation/subscription-forms/) 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**, set **Fields**, **Submit** text, and **Privacy**, then click **Create**. |
| An existing form from the dropdown | Reuse a form that already has subscribers or double opt-in configured. |


<Aside type="caution" title="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.
</Aside>

#### Set fields and submit behavior

Still in the **Settings** tab:

1. Set the **Submit button style**:
   * **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.

<img src="/content-web-popups-content-13.webp" alt="Privacy toggle enabled in the Settings tab with a privacy policy URL field" />

3. Under **Fields**, keep **Email** (always required) and add **First name**, **Last name**, **Phone**, or **Custom**.
   - For a **Custom** field, pick the [tag](/product/audience-data-and-segmentation/user-data-tags/tags/) its value submits to from the **Pick a tag…** dropdown, or choose **Create a tag** to make a new string tag without leaving the editor.
   - Set the **Success** and **Confirm email** texts shown after a visitor submits.

<img src="/content-web-popups-content-15.webp" alt="Fields section in the Settings tab with Email, a Custom field bound to the Acquisition Campaign tag, add-field buttons, and the Success and Confirm email texts" />