---
title: "Create a Pop-up on Mirror"
slug: "create-a-pop-up-on-mirror"
updated: 2026-07-13T05:19:50Z
published: 2026-07-13T05:19:50Z
canonical: "support.whatfix.com/create-a-pop-up-on-mirror"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Create a Pop-up on Mirror

## Overview

Whatfix enables you to create a Pop-up on a Mirror simulation to display a focused, overlay message that introduces a workflow, communicates key information, or prompts learners to take an action. The Pop-up appears as a layer over the Mirror Screen and does not anchor to a specific element, so you can use it to set context for the entire screen.

For example, you can create a Pop-up on a Mirror simulation to welcome learners at the start of a new hire onboarding module, summarize what the simulation will cover, and launch a Flow that walks them through the workflow.

## Use Cases

- Introduce a simulation or workflow on the first Mirror Screen so learners know what they are about to practice.
- Announce a new feature or process change inside a training module before learners interact with it.
- Prompt learners to begin a Flow, watch a video, or acknowledge instructions before proceeding through the simulation.

## Create a Pop-up

Expand the following accordions for more details:

****Step-1: Create a Pop-up****

Use the following steps to create a Pop-up:

1. Log in to the application where you want to create content, and then launch Whatfix Studio.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor plug in.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
2. Under **WIDGETS**, click **Pop-up**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Click_Pop-up.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
3. Select the required Pop-up template. For more information, see [Select a Template](/studio/docs/create-pop-up-with-templates#step-1-select-a-template).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Studio_Select_Pop-up_Template.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)

> [!NOTE]
> Info:
> 
> Use the **Filter** option to filter the templates by Use Case, Type, or Component.
> 
> ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-GSK9FAQK.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
> 
> 
> 
> The following table lists all the available filters:
> 
> | Filter | Values |
> | --- | --- |
> | Use Case | Outage Alerts, Maintenance, Training, Feature Updates, Policy Updates, and Announcements |
> | Type | Modal, Snackbar, and Carousel |
> | Component | Media and Text and Only Text |
4. In the **Appearance** section, you can configure the **Background**, **Padding**, and **Border Radius** of the Popup. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-7921ZFDA.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)

Expand the following accordion for more details:

****Configure Background, Padding, and Border Radius****

**Background** Choose between **Color** or **Image**:

- For **Color**:
  - You can select **Solid** or **Gradient** option ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-V8145OQP.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
  - You can also set the background color to transparent if required.
  - Or use color picker and specify HEX, or RGBA values
- For **Image**:
  - You can choose to **Replace** or **Delete** the default image or GIF ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-FZ43DDJZ.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
  - Upload supported formats (such as, PNG, JPG, GIF, or SVG)

Here’s how you can choose the background color for your Popup:

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Appearance Color.gif?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)

**Padding** Padding defines the inner spacing between the popup edges and its content.

- Enable **Uniform padding** to apply the same spacing on all sides ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-BY53TLCM.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
- Disable to configure **Top, Right, Bottom, and Left** individually
- Range: **0px to 64px**
- Default: **20px**

**Border Radius** Border radius controls how rounded the corners of the popup appear.

- Enable **Uniform radius** to apply the same value to all corners
- Disable to configure each corner individually
- Range: **0px** (sharp corners) **to 64px** (fully rounded)
- Default: **20px**

1. In the **Position** section, configure the **Overlay** and position of the Popup.

> [!NOTE]
> Info:
> 
> **Overlay**
> 
> When you enable or disable the **Overlay** toggle, it controls how the background behind the popup appears. Position cannot be configured when Overlay is enabled.
> 
> ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-0Z9XUCQZ.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
> 
> 
> 
> - **Dim**: When Overlay is enabled, adds a darkened overlay behind the popup.
> - **Blur**: When Overlay is disabled, applies a blur effect to the background content.
> 
> 
> 
> **Position**
> 
> Configure where the Popup appears on the screen. To change the position, disable the **Overlay** toggle, and then:
> 
> - Select a position from the **3×3 grid**:
>   - Top-Left, Top-Center, Top-Right
>   - Middle-Left, Middle-Center, Middle-Right
>   - Bottom-Left, Bottom-Center, Bottom-Right
> - Default position: **Middle-Center**
2. In the **Control** section, you can configure the behavior of the Popup. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-4QBYLQ14.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)

Expand the following accordion for more details:

****Configure theme, behavior, and interactions****

**Control theme** (applicable to **Close (X)** and **Don’t show me again** buttons)

- Choose theme: **Light** or **Dark**

---

**Show close (X) button**

- Toggle to show or hide the close button
- When enabled, appears at the top-right corner of the Popup

---

**Don’t show me again**

- Enable to allow users to opt out of seeing the Popup again.

---

**Title for screen reader**

- Add a descriptive title for accessibility
- The specified text is read by screen readers

> [!WARNING]
> Note:
> 
> The accessibility feature is not available by default. To enable, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20WCAG%20for%20Popups&body=Hi%2C%0A%0APlease%20enable%20accessibility%20for%20Popups.).

---

**Carousel** (applicable only for carousel templates)

> [!WARNING]
> Note:
> 
> This section appears in the Controls accordion **only when a carousel template is selected**. For more information, see [Create a Carousel Pop-up](/studio/docs/creating-a-carousel-pop-up).

- Enable or disable the **Move slides automatically** toggle.
  - **Toggle ON (default):** Slides transition automatically at the configured interval.
  - **Toggle OFF:** Slides advance only when the end user manually clicks an arrow or a marker.
- Set delay: In the **Delay by** field, specify by how many seconds the next slide should appear (the default is four seconds). ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-OLUNLH03.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)

> [!WARNING]
> Note:
> 
> When **Move slides automatically** is enabled:
> 
> - When end-users hover over the Popup, it pauses the slide transition.
> - When users move the cursor away, the timer resumes from where it paused and the next slide appears based on the remaining time.
- Configure navigation for the Popup. In the **Show** dropdown, select from three options: ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-YR6PLYBV.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
  - **Both arrows and markers** (displays both left and right arrow marks, and dot indicators) ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-48OVG94V.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
  - **Only Arrows** (displays left and right arrow marks only)
  - **Only Markers** (displays dot indicators only)

---

**Add Carousel slides**

- Use the **+ Add** button to add new slides to the carousel. The active slide being edited is visually highlighted. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-58NABU3N.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)

1. Click Save **Popup**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-3MC1AU49.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)

> [!WARNING]
> Note:
> 
> Once you have created the Pop-up, it is automatically created on your Whatfix Guidance Dashboard. For more information, see [Overview of the Whatfix Guidance Dashboard](/studio/docs/overview-of-the-whatfix-dashboard).

****Step-2: Configure the Visibility Rules for the Pop-up****

Use the following steps to configure visibility rules for a Pop-up:

1. On the [Whatfix Guidance Dashboard](/studio/docs/overview-of-the-whatfix-dashboard), click **Widgets**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_content.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
2. Click **Pop-ups**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatffix_Guidance_Dashboard_Click_Pop-ups.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
3. Hover your cursor over the Pop-up you want to configure, and then click the **Edit** icon.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_DB_Click_edit_icon.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
4. Click **Set Visibility Rules**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/DB_Survey_set VR.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
5. Expand the **Where does the self help appear?** section, and configure URL and Page tags. For more information, see [Set Where your Content or Widget appears with the New Visibility Rules](/studio/docs/set-where-your-widget-appears).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Guidance_Db_SH_Where_Rules(1).png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
6. Expand the **When does the self help start and stop appearing?** section, and configure when you want to start showing your widget. For more information, see [Set When your Content or Widget Appears with the new Visibility Rules](/studio/docs/set-when-your-widget-appears-using-visiblity-rules-20).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Guidance_Db_When_Rules.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
7. Expand **Who does the Pop-up appear to?** section, and configure who you want to show your content to. For more information, see [Set Who can see your Content or Widget with the New Visibility Rules](/studio/docs/set-who-can-see-your-widget).

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Whatfix_Guidance_Db_Click_Who_Rules.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)
8. Click **Save**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mirror_DB_Guidance_Click_Save.png?sv=2026-02-06&spr=https&st=2026-10-29T12%3A43%3A38Z&se=2026-10-29T13%3A43%3A38Z&sr=c&sp=r&sig=yheJzctOKqVtpn%2FwPGzzrWqZWSXqXlF%2BT2LQCeDkREY%3D)

> [!WARNING]
> Note:
> 
> To display the Pop-up on your Mirror simulation, you must move both the Pop-up and the Mirror simulation from the **Draft** stage to the **Production** stage before you share them with your learners. Publish the Pop-up on the Whatfix Guidance Dashboard and the Mirror simulation on the Whatfix Mirror Dashboard.
> 
> 
> 
> For more information, see [Publish all Whatfix content and widgets to Production](/studio/docs/pushing-whatfix-content-to-production) and [Publish Whatfix Mirror](/mirror/docs/publish-whatfix-mirror).

A replica of an application screen captured based on a UI element.

Whatfix Studio is a browser plug-in that enables you to create various types of Whatfix content, such as Flows, Smart Tips, Beacons, and so on. The plug-in can be installed on Google Chrome and the new Microsoft Edge browsers.