# Create a Personalized Popup in 5 minutes

In this tutorial, you will learn how to create and customize a popup using Umbraco Engage. We will walk 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://1498851568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeiQnEGdbGIoA0IQ3nJUK%2Fuploads%2Fgit-blob-ae88d4410656c441e513618a9c305f46aae99658%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://1498851568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeiQnEGdbGIoA0IQ3nJUK%2Fuploads%2Fgit-blob-f8f55445bcf2519bd2466f69220e585d26794e0d%2FAdd-new-segment-overlay.png?alt=media" alt=""><figcaption><p>Add new Segment Overlay</p></figcaption></figure>

9. Select **Number of sessions** in **Choose a parameter** tab.
10. Change *Exactly* to **More than** in the **Applied parameters** field and set the number of sessions to **0**.

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

11. Click **Save parameter.**
12. Click **Add segment**.

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://1498851568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeiQnEGdbGIoA0IQ3nJUK%2Fuploads%2Fgit-blob-5134db3cb614bc3d26e34baa7579ccbb197bf307%2Fengage-tutorials-personalized-popup.png?alt=media" alt=""><figcaption><p><strong>Apply new personalization</strong></p></figcaption></figure>

3. Enter a **Title**. 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://1498851568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeiQnEGdbGIoA0IQ3nJUK%2Fuploads%2Fgit-blob-2e2d22bfb146dd6044f48c9fa49adf5d8461b003%2FPersonalization-screen.png?alt=media" alt=""><figcaption><p>Personalization screen</p></figcaption></figure>

5. Choose **Multiple Pages** from the **Select personalization type** drop-down list\*\*.\*\*
6. Click **Add** in **Select multiple pages.**
7. Use the Umbraco page picker to pick one or more pages.
8. Click **Submit**.
9. Click on **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 **Save**.

## Step 3: Set Up the Popup

To include the popup template, follow these steps:

1. Click **Include CSS/JavaScript** in **Add/Edit code.**

<figure><img src="https://1498851568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeiQnEGdbGIoA0IQ3nJUK%2Fuploads%2Fgit-blob-3fd999d0387da39a31683646c065ad563d809e93%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**](https://docs.umbraco.com/umbraco-engage/tutorials/marketing-resources/generic-popup-template) in these fields.

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

3. Click **Save and close**.

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

4. Click **Save & Start**.

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 the HTML/JavaScript code section.
4. Click **Edit** to update the content.
5. Click **Save and close**.
6. Click **Update & Start**.

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