🚨 This requires the involvement of your tech team

Interested in putting up a wall that covers all content, just like The New York Times?

Well look no further, follow these instructions to easily create this type of wall and integrate it into your site thanks to Poool Access.

We'll explain everything step by step with an example in this article 🧘

Add elements into the HTML

By default, the wall is displayed in a "box" that has the name 'poool-widget'. If we translate this into HTML: the wall is displayed in a div with the id 'poool-widget'.

We can then apply CSS style rules specifically on this div thanks to the CSS selector.

💡 Did you say "CSS selector"?
A CSS selector is a keyword that allows you to designate a category of HTML elements on the page.

In this case, we'll use the class and id selectors to target the elements carrying these selectors.

To place your wall above content, we'll have to move it to a new div and apply new CSS rules.

Create a new div

In your page's HTML, add a div with an id of your choice.

For our example, we create a div with the id "fullscreen-widget", here is what we integrate in the HTML of our page:

Apply CSS

To manage the style and behavior of your new div, you need to add CSS rules to it.

Here's what we have integrated in our code, specifically to manage the blocking and "overlay" aspect of our div:

Now, add some CSS to manage the behavior of the wall that will come inside this div.

If you're using a basic appearance (like in our example), use the .p3-paywall CSS selector.

If you're using an advanced look, use the .p3-advanced-paywall CSS selector.

For our example, here's the CSS we integrated into our code, specifically to manage the position of the wall in the div :

Hide the div

You will also have to think about hiding/destroying the div once the unlocking is done.

For our example and depending on the Poool integration used:

Paywall V5 integration

Legacy integration (poool.js)

There you go, your target element is ready 🎉

Create an appearance

In the Poool Access Dashboard, you can create a basic or advanced appearance for this wall.

🚨Advanced appearances are only available in the Enterprise plan.

For our example, we created a basic appearance with the panoramic format:

Apply your appearance to a scenario or widget

In the Poool Dashboard, you can apply your appearance to a scenario or widget of your choice.

For a scenario

Go to the scenario options (at the bottom of the page), select the appearance from the drop-down list.

For a widget

Go to the relevant widget, select the appearance from the drop-down list.

Fill in the CSS selector of the target element

Go to each related widget, then Advanced Configuration and fill in the CSS selector (id or class) of the target element in the "Target parent element inside the page" field.

💡 How do I fill in the CSS selector of the target element?

If the element has a class: .the-name-of-the-class

If the element has an id: #the-name-of-the-id

🚨 If you want all the widgets of your scenario to be displayed in your target element, you'll have to repeat the operation for each widget.

For our example, we fill in "#fullscreen-widget" (because our target element has an id.) on the 3 widgets set up in our scenario.

Your fullscreen wall is ready! Now you just have to activate your scenario 🚀