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:

<div id="engage-container"></div>

Respecting the Target Div's Dimensions

If the target div already has predefined dimensions, such as:

<div id="engage-container" style="width: 300px; height: 250px;"></div>

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.

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;
}

💡 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 :

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.