> For the complete documentation index, see [llms.txt](https://docs.funnelish.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.funnelish.com/start/funnel-builder/popups.md).

# Popups

Funnel popups can capture users who signal an intent to leave your e-commerce site without hitting any of your on-page conversion objectives.

{% hint style="success" %}
**Note**  You can use the same popup on multiple funnel steps. Any changes you make to the original popup appear in every instance.
{% endhint %}

## Creating a popup

1. Open a funnel step.
2. Click the **Edit page** button.
3. Go to the top left corner of the page.
4. Click the **Popups** icon.&#x20;

<figure><img src="/files/PQTDLTn6o2vrh1alPI2u" alt=""><figcaption></figcaption></figure>

&#x20; 5\. Click the **New popup** button. A new panel displays.

&#x20; 6\. Enter a unique name. Funnelish automatically creates the path.

<figure><img src="/files/lywv7RiU8cR2uK96ZspP" alt=""><figcaption></figcaption></figure>

&#x20; 7\. Click the **Create popup** button.&#x20;

* Funnelish displays a default popup window and opens the settings panel.

![Default popup](/files/hAqiDG8oTNaGh4WqxYRI)

### Opening a popup

To view and edit an existing popup:

1. Open a funnel step.
2. Click the **Popup** icon in the top left corner. A list of popup names displays.
3. Click a name to open the popup on the canvas.
4. Click the ellipsis to open a menu and select an option (Edit, Duplicate, or Delete).

<figure><img src="/files/InYWYqlMsu8XhNFhvbZc" alt="Opening a list of popups"><figcaption></figcaption></figure>

### Renaming a popup

It's not possible to change the name of a popup. If you want to reuse an existing popup and give it a different name, use the **Duplicate** tool.

1. Click the ellipsis.
2. Select **Duplicate**.
3. Enter a new name.
4. Click the **Duplicate popup** button.

<figure><img src="/files/UxPXqSiatn9y3XNdhKs1" alt=""><figcaption></figcaption></figure>

## Customizing appearance

You can customize the appearance of a popup. Appearance includes the design and content. All the standard design tools are here, including text, colors, borders, margins, and padding.&#x20;

Add content to a popup by inserting rows and containers and then dragging widgets (e.g. Headline and Paragraph) to the popup canvas. If you want to collect email addresses, add a **Form element** widget.

To customize appearance:

1. Select a popup. The **Properties** panel displays.
2. Set the width. The default setting is Medium.
3. Add text.
4. Add a form. (optional)
5. Add a CTA button. (optional)
6. Add design elements.
7. Click Save changes.
8. Go on to the next step and customize popup action.

## Customizing action

Action controls how the popup behaves in relation to user intent on the funnel step. To customize popup action, open the popup **Page Properties** panel.

1. Click the **Popup.**
2. Click the ellipsis.
3. Select **Page properties**. A new panel displays.

&#x20; 4\. Click the field below **Page popup**.

&#x20; 5\. Click the popup you want to assign. Here you can choose if you want the popup to show on exit intent, when the visitor scrolled down the page, spends x amount on the page or after the customer scrolled down then up.

<figure><img src="/files/qOAjMxaowV20fNdQx0dE" alt=""><figcaption></figcaption></figure>

### Setting popup action

#### Exit intent

* Available only on desktops, the popup automatically displays when the customer intends to navigate away from the funnel step.

#### Visitor scrolls down the page

* Show the popup after the visitor scrolls down a percentage of the funnel step. Enter a figure in the field.

![Set a percentage](/files/FIc8V87Q9e20YXP5reNS)

**Visitor spends X seconds on the page**

* Show the popup after a visitor spends a fixed amount of time on the page. Enter figure (number of seconds) in the field.

![Display popup after a fixed period of time on page](/files/tq8boWOhDnQHHTcYRiGr)

**Show after customer scrolls down then up**

* This is usually the best indication of exit intent on mobile devices. Display the popup after the user scrolls a percentage of the screen. Enter percentage figures in the fields.

![ Display popup after user scrolls down and up](/files/JzStY6HTsfKvbMNIflje)

### **Displaying a popup on clicks**

In addition to the action steps described above, you can display a popup after a user clicks an element (e.g. image, button, or link).

#### Click on images and buttons

To display a popup after a user clicks an image or button:

1. Select the element (image or button).
2. In the left panel, click the **Interaction** tab.&#x20;
3. Click **On click** and choose **Show popup.**

&#x20; 4\. Click the field below Show popup. A drop-down menu displays.

&#x20; 5\. Select the popup you want to display.

&#x20; 6\. Click **Save**.

&#x20; 7\. Then click **Save changes** at the top right of your page.

&#x20; 8\. Click **Preview** to see the image in action.

&#x20; 9\. Repeat steps and edit popup as required.

<figure><img src="/files/S9PP6xcyPVd8lVAEAqS4" alt=""><figcaption></figcaption></figure>

#### Click on links

Use this option to display a popup when the user clicks a text link.

1. Click the **Popups** icon.
2. Locate the popup you want to display.
3. Open Notepad (or a similar app) and type the popup path.

<figure><img src="/files/M8rPoIoNRTCLZO49MNI9" alt=""><figcaption></figcaption></figure>

&#x20; 4\. Open the canvas and highlight the text which will hold the hyperlink.

&#x20; 5\. Click the Link icon.

&#x20; 6\. Copy the popup path from Notepad (or a similar app).

&#x20; 7\. Paste the path into the **Visit URL** field.

&#x20; 8\. Click Save.

<figure><img src="/files/EVFwu4ajjHLicBWvrqOg" alt=""><figcaption></figcaption></figure>

### Previewing the popup

1. Click **Save changes** in the top right corner.
2. Click **Preview**.
3. Edit as required.

![Popup displays on funnel step](/files/LJ4L1xkH0ySSsGtequs9)
