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

Add New Segment

1. Enter the Title in the Add new segment overlay. For example: Popup targeted audience.

2. Provide a Description. For example: Targeting visitors who haven't seen our popup.

3. Select Temporary as the Segment Type.

4. Set the End Time to a date, ideally sometime in the future.

Add new Segment Overlay

1. Select Number of sessions in Choose a parameter tab.

2. Change Exactly to More than in the Applied parameters field and set the number of sessions to 0.

Number of Sessions parameter

1. Click Save parameter.

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

Apply new personalization

1. Enter a Title. For example: A popup to inform visitors.

2. Provide a Description. For example: This popup will grab visitors' attention with our great offer!

Personalization screen

1. Choose Multiple Pages from the Select personalization type drop-down list**.**

2. Click Add in Select multiple pages.

3. Use the Umbraco page picker to pick one or more pages.

4. Click Submit.

5. Click on Select segment.

6. Select Popup targeted audience which is the segment created in Step 1: Create a Segment.
7. 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.

Stylesheet selection

1. Copy and paste the CSS and JavaScript from the Generic popup overlay template in these fields.

Add stylesheet to fields

1. Click Save and close.

1. Click Save & Start.

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

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.

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.