--- title: "Pop-up appears across other pages besides the intended page" slug: "pop-up-appears-outside-the-desired-application-page" updated: 2025-11-03T03:09:36Z published: 2025-11-03T03:09:36Z --- > ## 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. # Pop-up appears across other pages besides the intended page ## Issue A Pop-up that should appear only to the logged-in users on the application page appears to the non-logged-in users as well. ## Probable Causes - Pop-up is evaluated across all pages of the application. - Pop-up Visibility Rules aren't set correctly. **Debug Pop-up issues** To get the Pop-up debug logs, use the following steps: 1. Go to the page in your application where you are facing Pop-up issues. 2. Open your browser's **[Developer Tools](https://developer.chrome.com/docs/devtools/open)** ![debug_flow_devtools.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_flow_devtools.png) 3. Go to the **Console** tab. ![debug_console.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_console.png) 4. Type **_wfx_settings.debug_mode=true;** and press Enter. ![debug_mode.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_mode.png) Info: Here, you are setting the **_wfx_settings.debug_mode** variable to a **true** value, which instructs Whatfix to provide debug logs for Whatfix widgets whenever they load on a page. 1. Type **_wfx_refresh();** and press Enter. ![wfx_refresh.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/wfx_refresh.png) Info: The **_wfx_refresh();** command reloads all Whatfix content and widgets that are supposed to load on the page. 1. Click **Popup** to expand its output. ![debug_popup.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_popup.png) --- The **ArrayList** object contains all the Pop-ups evaluated on that page. Expand each index (**0**, **1**, **2**, etc.) to see the details of each Pop-up. ![debug_popup_arraylist.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_popup_arraylist%281%29.png) The following are some fields useful for identifying problems with your Pop-up: - **name:** The name of the Pop-up. - **times_to_show:** The number of times your Pop-up is set to show. - **popup_view_count:** The number of times you have viewed the Pop-up. - **conditions:** The Visibility Rules configured for your Pop-up to show. Note: If your Pop-up isn't configured to show on the page you are on, it is not part of the debug logs. ## Suggested Solutions - Check whether [user roles](/studio/docs/display-content-based-on-user-roles)are used to configure the Pop-up Visibility Rules. If so, ensure that the appropriate user roles are added. - Check the Visibility Rules to determine the appearance of the Pop-up based on **When**, **Where, and Who** that are part of the New Visibility Rules. For more information, see [Understand New Visibility Rules](/studio/docs/understand-visibility-rules-20). > [!WARNING] > Note: > > - New Visibility Rules are currently available only to selected customers and are supported across all widgets. For more information, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Understand%20Advanced%20Visibility%20Rules&body=Hi%20%0A%0ACould%20you%20please%20help%20me%20understand%20Advanced%20Visibility%20Rules.). > - Always test Pop-ups using the Whatfix Preview mode before they are visible to your users. For more information on how to Preview a Pop-up, see [Preview pop-ups](/studio/docs/preview-pop-ups). > - If the issue persists, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Pop-up%20appears%20outside%20the%20intended%20application%20page%20&body=Hi%20%0A%0ACould%20you%20please%20help%20me%20with%20an%20issue%20with%20the%20Pop-up.%20It%20appears%20outside%20the%20intended%20application%20page.%20). - To ensure that the Pop-up appears only on the intended application page, add unique CSS selectors for the page where you have created the Pop-up. If the CSS Selector used for the element is not unique and is shared by other elements on the page, it can result in the Pop-up to display in an incorrect position or across every page of the application. For more information, see [Selected Element condition rules](/studio/docs/selected-element-condition-rules). **Steps to find out an element's CSS selectors in your browser** 1. Open your browser's [Developer Tools](https://developer.chrome.com/docs/devtools/open). ![chrome_devtools.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/chrome_devtools.png) 2. Go to**Inspector Mode**. ![chrome_inspect_mode.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/chrome_inspect_mode.png) 3. Select the element whose selectors you want to find. ![chrome_select_element_inspect.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/chrome_select_element_inspect.png) 4. Identify the selectors of the highlighted tag in the **Elements** section of the Developer Tools window. ![chrome_highlighted_tag.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/chrome_highlighted_tag.png) 5. Use an appropriate selector in your content's [Display Rules](/studio/docs/visibility-and-display-rule-conditions-1). > [!WARNING] > Note: > > Use CSS selectors in Display Rules such as **Selected Element Is** and **Other Element On Page**. #### How to choose a good CSS selector? Once you identify the CSS selectors of an element, you must choose a selector or a combination of selectors such that it uniquely describes your selected element. The following are some tips to do so: - If your element has an ID, use it as a CSS selector. The ID of an element is usually unique. ![debug_select_id.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_select_id.png) - If your element has multiple classes, use a combination of them in your Display Rules. ![debug_multiple_classes.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_multiple_classes.png) > [!WARNING] > Note: > > Specify multiple classes in a CSS selector by chaining them together. The following is an example of specifying 3 classes in a CSS selector: > > **.class1.class2.class3** - If your element doesn't have any unique attributes, check whether a parent element can uniquely identify your element. Ensure that the Parent element contains only the element you want to show your content on, else your content might show on any one of the Sibling element. ![debug_select_parent.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/debug_select_parent.png) Parent element is a container that holds other elements inside it. For example,
is a parent element. Ensure that the parent element only wraps the exact element you want to target, otherwise your content might appear on any sibling element inside that parent. Sibling element is any other element that is inside the same parent. For example
Here, each