> For the complete documentation index, see [llms.txt](https://docs.umbraco.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.umbraco.com/umbraco-engage/tutorials/create-a-personalized-popup-in-5-minutes.md).

# Create a Personalized Popup in 5 minutes

Learn how to create and customize a popup with no coding required in just a few simple steps.

In this tutorial, you will learn how to create and customize a popup using Umbraco Engage. The tutorial walks you through creating a target segment, applying personalization, and setting up the popup with pre-defined templates.

Popups are powerful for capturing attention, promoting special offers, and encouraging visitors to take action. With a timed popup, you can boost and increase engagement on your website.

## Step 1: Create a Segment

Creating a segment allows you to define specific groups within your audience based on shared behaviors. By segmenting your audience, you can deliver tailored content that suits their interests and needs.

To create a segment, follow these steps:

1. Login to Umbraco.
2. Go to the **Engage** section.
3. Select **Personalization** > **Segments**.
4. Click on **Add new segment**.

<figure><img src="https://2164986937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds5IoWmsX6a6ooVdYthx%2Fuploads%2Fgit-blob-881a17a1ee078a82c12e33deb2a3be1ca881bab2%2Fengage-tutorials-personalizaed-popup.png?alt=media" alt=""><figcaption><p>Add New Segment</p></figcaption></figure>

5. Enter the **Title** in the Add new segment overlay. For example: *Popup targeted audience.*
6. Provide a **Description**. For example: *Targeting visitors who haven't seen our popup.*
7. Select **Temporary** as the **Segment type**.
8. Set the **End time** to a date, ideally sometime in the future.

<figure><img src="https://2164986937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds5IoWmsX6a6ooVdYthx%2Fuploads%2Fgit-blob-9f8735695a7c42e3a12db33912c04df2acbf432f%2FAdd-new-segment-overlay.png?alt=media" alt=""><figcaption><p>Add new Segment Overlay</p></figcaption></figure>

9. Select **Number of sessions** under **Choose a parameter**.
10. Change the **Operator** from *Exactly* to **More than**, and set **Count** to **0**.

<figure><img src="https://2164986937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds5IoWmsX6a6ooVdYthx%2Fuploads%2Fgit-blob-0b1618634244bee27ed196c38de0d420eb6e4875%2FNumber-of-sessions.png?alt=media" alt=""><figcaption><p>Number of Sessions parameter</p></figcaption></figure>

11. Click **Save parameter.**
12. Click **Submit**.

You have now created a segment targeting all visitors with more than 0 sessions.

## Step 2: Apply Personalization

To target the segment with a popup, follow these steps:

1. Navigate to **Applied Personalization** in the **Personalization** tab.
2. Click on **Apply new personalization**.

<figure><img src="https://2164986937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds5IoWmsX6a6ooVdYthx%2Fuploads%2Fgit-blob-4c2bcf761415f78d9b1d66551ae67ef1f20c0fed%2Fengage-tutorials-personalized-popup.png?alt=media" alt=""><figcaption><p><strong>Apply new personalization</strong></p></figcaption></figure>

3. Enter a **Name**. For example: *A popup to inform visitors.*
4. Provide a **Description.** For example: *This popup will grab visitors' attention with our great offer!*

<figure><img src="https://2164986937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds5IoWmsX6a6ooVdYthx%2Fuploads%2Fgit-blob-6b576e52952de61f420dda06486917ba936750ec%2FPersonalization-screen.png?alt=media" alt=""><figcaption><p>Personalization screen</p></figcaption></figure>

5. Choose **Multi page** from the **Personalization type** drop-down list.
6. Click **Choose** under **Select pages**.
7. Use the Umbraco page picker to pick one or more pages.
8. Click **Choose**.
9. Click **Choose** under **Select segment**.
10. Select **Popup targeted audience** which is the segment created in [Step 1: Create a Segment](#step-1-create-a-segment).
11. Click **Choose**.

## Step 3: Set Up the Popup

To include the popup template, follow these steps:

1. Expand **Custom code - CSS** and **Custom code - JavaScript**.

<figure><img src="https://2164986937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds5IoWmsX6a6ooVdYthx%2Fuploads%2Fgit-blob-2a7c6ae77e58e759e3a70596d0643fe4140b600c%2Finclude-css-javascript.png?alt=media" alt=""><figcaption><p>Stylesheet selection</p></figcaption></figure>

2. Copy and paste the CSS and JavaScript from the [**Generic popup overlay template**](/umbraco-engage/tutorials/marketing-resources/generic-popup-template.md) in these fields.

<figure><img src="https://2164986937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds5IoWmsX6a6ooVdYthx%2Fuploads%2Fgit-blob-7cb6b7528789706e8f900cf23a45428ddb98fc10%2Fstylesheet-fields.png?alt=media" alt=""><figcaption><p>Add stylesheet to fields</p></figcaption></figure>

<figure><img src="https://2164986937-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fds5IoWmsX6a6ooVdYthx%2Fuploads%2Fgit-blob-501ccc0ae8cf440c10dc8d80c60516d7d5c843ca%2Fsetup-personalization-screen.png?alt=media" alt=""><figcaption></figcaption></figure>

3. Click **Submit**. The personalization is saved and set to active.

Go to your website and visit the page(s) where you applied the popup personalization. The popup will appear.

{% hint style="info" %}
If the popup does not appear, check the **flush rate setting** in the `/config/uMarketingSuite/uMarketingSuite.config` file. Make sure the **Flush interval** is set to 1 second.
{% endhint %}

## Step 4: Change the Popup Content

To update the popup content, follow these steps:

1. Navigate to **Engage** > **Personalization** > **Applied Personalization**.
2. Click the **Edit** icon next to your popup.
3. Scroll down to **Custom code - CSS** and **Custom code - JavaScript**.
4. Expand the section and update the code.
5. Click **Submit**.

You have now created and customized your first popup, and it is up and running.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.umbraco.com/umbraco-engage/tutorials/create-a-personalized-popup-in-5-minutes.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
