---
title: "Enable Top layer support for content creation"
slug: "enable-top-layer-support"
updated: 2025-08-13T03:06:58Z
published: 2025-08-13T03:06:58Z
---

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

# Enable Top layer support for content creation

### What are Top layer elements?

Top layer elements in web pages or applications are those that visually appear on the top of all other components. These elements are designed to have the highest display priority. Common examples of top layer elements include:

- Dialog boxes, such as pop-ups for confirmation messages.
- Sidebars or side panels that slide into view to display menus, settings, or additional options.
- Fullscreen view, which expands to cover the whole screen.

Creating content such as Whatfix Flows on top layer elements was challenging because Whatfix Studio disabled element selection, preventing you from selecting these elements during content creation. To address this, Whatfix provides **Top layer support**, which enables content creation on top layer elements as well.

#### Benefits of Top Layer Support

With Top Layer Support:

- Create Whatfix content such as Flows, Beacons, Tooltips, and more on top layer elements.
- Ensure content displays correctly without overlaps or visibility issues.
- Provide uninterrupted guidance for users interacting with top layer elements.

#### Enable Top Layer Support

Top Layer Support is available for the following types of elements:

- **Top Layer Support – Dialog**: Enables content creation on dialog boxes that appear above the main application interface.
- **Top Layer Support – Popover**: Enables content creation on popovers that appear above the main application interface.

Expand the following accordions for more details:

****Top Layer Support – Dialog****

Use the following steps to enable Top layer support for the dialog box:

1. On the Whatfix Guidance dashboard, click **Settings**. ![ia_left_nav_settings](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_settings.png)
2. Click **Advanced customisation**. ![ia_settings_advanced%20configuration](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_settings_advanced%20configuration.png)
3. Click **Technical configuration**. ![ac_tech config.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ac_tech%20config.png)
4. Click **Add preferences**. ![tech config_add prefrences.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_add%20prefrences.png)

1. Click **Common Properties**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech config_common properties.png)
2. Select the **Top layer support** **- Dialog** checkbox. ![Top_Layer_Pop-over.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Top_Layer_Pop-over.png)
3. Click **Add**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech config_add button.png)
4. Click **Save**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech config_save.png)

****Top Layer Support – Popover****

Use the following steps to enable Top layer support for Popover:

1. On the Whatfix Guidance dashboard, click **Settings**. ![ia_left_nav_settings](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_settings.png)
2. Click **Advanced customisation**. ![ia_settings_advanced%20configuration](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_settings_advanced%20configuration.png)
3. Click **Technical configuration**. ![ac_tech config.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ac_tech%20config.png)
4. Click **Add preferences**. ![tech config_add prefrences.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech%20config_add%20prefrences.png)

1. Click **Common Properties**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech config_common properties.png)
2. Select the **Top layer support - Popover** checkbox. ![Top_Layer_Dialog.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Top_Layer_Dialog.png)
3. Click **Add**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech config_add button.png)
4. Click **Save**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/tech config_save.png)