Poool

In this article, we'll look at how to configure when an Engage element should close, whether it's within your article or as an overlay (modal/pop-in formats). 

Make an Element Disappear When Clicking a Button

To allow your users to close an Engage element by clicking a button, follow these steps:

Modify an Element: Access your Engage dashboard and select the element you want to modify.

Add or Modify a Button Component: Add a new button or modify an existing button within your element.

Action: Configure the button's action to completely 'destroy' the element. This action ensures that the element will completely disappear upon clicking.

1. Modify an Element: Access your Engage dashboard and select the element you want to modify.
2. Add or Modify a Button Component: Add a new button or modify an existing button within your element.
3. Action: Configure the button's action to completely 'destroy' the element. This action ensures that the element will completely disappear upon clicking.

Make an Element Disappear When Clicking an Image

Do you want to close an element when a user clicks an image or icon, such as a cross-shape? Follow these steps:

Add or Modify an Image Component: Add an image or modify an existing image within the element.

Destroy the Element When Clicking on the Block &gt; Yes

1. Modify an Element
2. Add or Modify an Image Component: Add an image or modify an existing image within the element.
3. Destroy the Element When Clicking on the Block &gt; Yes

Here is a working example illustrating the closing of an element by clicking an image:

Overlay elements can be configured to close in two different ways:

With the Native CSS Parent Container Functionality

Configure the CSS Parent Container: Use this native functionality to enable a modal display autonomously from the Dashboard, without requiring additional technical intervention.

1. Click on Modify Element Properties
2. Expand Advanced Configuration
3. Target the Parent Container by Starting with <code>#p3-parent-frame {</code>
4. Apply the Desired Style Using Your Chosen CSS Properties ​

Configure the Closing: Follow the instructions from the previous sections to configure the closing via a button or an image.

1. Configure the CSS Parent Container: Use this native functionality to enable a modal display autonomously from the Dashboard, without requiring additional technical intervention.
 1. Click on Modify Element Properties
 2. Expand Advanced Configuration
 3. Target the Parent Container by Starting with <code>#p3-parent-frame {</code>
 4. Apply the Desired Style Using Your Chosen CSS Properties ​
 
 
2. Configure the Closing: Follow the instructions from the previous sections to configure the closing via a button or an image.

ℹ This option requires technical intervention on the HTML of your page.

Enter the #ID or .class of the Tag in the Display Condition Named "In a Target Element". The Engage element will then be inserted at this location on your page.

Integrate Display and Hide Conditions Based on Events. Refer to the section "Integrate a Display and Hide Condition for the div" in this article for more details. This method is reserved for advanced users who want to leverage tags already present on their site.

1. Enter the #ID or .class of the Tag in the Display Condition Named "In a Target Element". The Engage element will then be inserted at this location on your page.
2. Integrate Display and Hide Conditions Based on Events. Refer to the section "Integrate a Display and Hide Condition for the div" in this article for more details. This method is reserved for advanced users who want to leverage tags already present on their site.

___________________________________________________________

Now you know how to allow your readers to close an element, whether through a button, an image, or by using a more advanced functionality.

Make an Element Disappear When Clicking a Button

Make an Element Disappear When Clicking an Image

Close an Overlay Element (Modal, Pop-in)

Targeting a Tag Present on Your Site