> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.poool.fr/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).
# Positioning an Engage Element on a Web Page
To maximize the impact of Engage elements and ensure seamless integration with a website's design, proper placement configuration is essential. This article details various positioning methods for Engage elements on a web page.
## Placement on an Existing Div
## Leverage an Existing Class or ID
Engage elements can be inserted directly into a specific div on your page. To do this:
* Use an existing CSS class or ID to identify the target div.
* Ensure that this div is correctly positioned within your HTML code and is designed to accommodate an Engage element.
* In the Engage dashboard, use the display condition **"inside a target element"** with a value starting with `"."` or `"#"` depending on whether you're targeting a class or an ID.
Example of a `#engage-container` div on a page:
```
```
And from the dashboard :
[](https://downloads.intercomcdn.com/i/o/s22rivig/1512114863/3dee4e46771ed62279db92d4627f/Capture+d%E2%80%99%C3%A9cran+2025-05-07+113552.png?expires=1773333000&signature=aaf5602468bdbb66acb14c0d268934538bf2c2e9ce4bc2853e55ac578ccfb3f4&req=dSUmFMh%2FmYlZWvMW1HO4zf9M40Lki0E20p9GcnTQCbDAbjaR%2FCMbJJamH2QQ%0AuDBLvflJLST%2BdfzJNsU%3D%0A)
## Respecting the Target Div's Dimensions
If the target div already has predefined dimensions, such as:
```
```
The Engage element will automatically adopt these dimensions. Otherwise, the target div will take on automatic dimensions based on the blocks loaded from the dashboard.
[](https://downloads.intercomcdn.com/i/o/s22rivig/1416798715/f7ae008158797b88c5185677cfa4/Capture+d-%C3%A9cran+2025-03-06+163605.png?expires=1773333000&signature=85c538d04ade8c5b2566d98188369729fecfa8049dc7ad8416f3fbeaf37f3731&req=dSQmEM53lYZeXPMW1HO4zay519srJEj5NmvuJgZ1BN6%2FOPSxyIGv71KQ%2BA%2Fl%0AxVPaIaksDTP54%2Bh8dqw%3D%0A)
*For example, if an Engage element is placed between two paragraphs in an article within a div with fixed dimensions, it will fit naturally within the designated space.*
To ensure that an Engage element reflects the dimensions of its container, insert the following CSS into the element settings:
```
.p3-app {
width: 300px;
eight: 250px;
}
```
## For Overlay Elements: Using Parent CSS
### Positioning the Element on the Screen
Engage elements can be displayed as overlays to maximize visibility. You can configure everything directly from the dashboard, without needing a predefined div on your site.
To manage positioning rules, use the **"Parent container CSS"** block located in:
**"Edit element properties" > "Advanced settings"**
In the following example, the Engage element will appear at the bottom-right of the screen in a sticky position (remaining in place regardless of scrolling):
```
#p3-parent-frame {
position: fixed;
bottom: 20px;
right: 20px;
}
```
[](https://downloads.intercomcdn.com/i/o/s22rivig/1416799823/dd26b7a2c4312545a2be4add0dd3/Capture+d-%C3%A9cran+2025-03-11+140427.png?expires=1773333000&signature=333202f2176d0c7697b7d47f6623995df52127f1fd38ec836458a36ae4b63929&req=dSQmEM53lIldWvMW1HO4zTZem2W3y7JwdAXqF80SOEKWzfb%2FOqVFgJlFYDkk%0Ase7jJ9bQ%2FfpWiK4IUno%3D%0A)
💡 Use the selector `#p3-parent-frame` - it will automatically be transformed to target the unique, randomly generated iframe ID.
## Managing Display Layers with z-index
If you notice overlap between the Engage element and other parts of your page, you can use the `z-index` property to ensure Engage is displayed in the foreground:
```
#p3-parent-frame {
z-index: 9999;
}
```
## Blurred/Darkened Background Effect
To highlight an Engage element and dim the rest of the page, apply a blur effect combined with an opacity overlay on the **"Parent container CSS"** block:
```
#p3-parent-frame {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}
```
This will add a semi-transparent overlay and a blur effect to the entire page, making the Engage element stand out.
Additionally, use the **main CSS block** to center the element vertically on the screen:
```
html, body, .p3-app, .background {
min-height: 100vh;
}
```
Finally, add a class named "background" to your main **row component** :
[](https://downloads.intercomcdn.com/i/o/s22rivig/1441880819/6ae87411e1f452c9994e2403d5b7/Capture+d%E2%80%99%C3%A9cran+2025-03-26+112228.png?expires=1773333000&signature=a0b18dbb20c2f3ef0dd8f197ea2e407bececb6cfe13931323a6488177028b89d&req=dSQjF8F2nYleUPMW1HO4zah1ZHI9fxRUaTQSJ40SUUxps%2F1pipgIPa0YliWs%0AlQjSXJq5fCGC1tksapM%3D%0A)
[](https://downloads.intercomcdn.com/i/o/s22rivig/1416800287/5dae982aba597c22cb648fa4e4f6/Capture+d-%C3%A9cran+2025-03-11+140723.png?expires=1773333000&signature=2d997023d57fc197c35f74fe516350bc82276a3d2179ef72abafe8b6419dd2e7&req=dSQmEMF%2BnYNXXvMW1HO4zcJAH4CIQp1HocyKap03PfXr1q%2B95nP7JWBHWnU4%0APOk0I5bDMpPjK%2FukSQk%3D%0A)
*Example of an Engage element centered on the screen with a blurred and darkened background, using the **"Parent container CSS"** feature.*
---
The positioning of Engage elements plays a key role in their effectiveness. By leveraging existing classes, adjusting dimensions, and using CSS functionalities for overlays, you can ensure a smooth and impactful integration of Engage elements on your website.