Thanks to Poool's new script, you now have a wider range of potential for the location of your walls!

In this article, we explain how you can put multiple walls on a single page.

🚨 Please note, some use cases require your tech team as well as Poool's recent integration, Paywall V5.

To find out more about our new script, have a read of this article 👉 What's changed with Poool's new script?

And for your dev team, our updated technical documentation is now available 👉 Technical Documentation

The 'target' element/CSS selector

Newcomer in the wall configuration, the 'target' element will allow you to display your walls in exactly the place you want them on your page.

By default, the wall is called in a 'box', named 'poool-widget'. In HTML, this means: the wall appears inside a div identified by the 'poool-widget' ID.

💡 You said "CSS selector"?

A CSS selector is a key-word to point at an HTML elements' category on the page.

In our example, we will use the class or id selectors to target the elements that we wish.

Display your wall in an alternative place

If you want to display your wall in a place other than the default (div with the id 'poool-widget'), you can do it from your Dashboard thanks to this target element.

Have a read of this article 👉 How can I create a fullscreen wall over my content? that will explain how to achieve this.

Show your walls several times with the same widget

Thanks to the new Access.js script and the 'target' element, you can display several walls on a single page simultaneously, each in a different place.

As a reminder, a single scenario is composed of 1 or multiple steps, with each step being a widget.

In our example, we set 1 scenario with the widget "newsletter registration" and an alternative "offered article". We want this same wall to be displayed on the whole screen first (in "#fullscreen" div) and then again at the end of the article (in the div "#poool-widget").

Scenario settings in the dashboard

Here is the widget we set in the Dashboard:

🚨 In this instance, don't set 'target' elements in the widget. Instead, they should be identified in your code.

Code integration

In our page's code, we set up our two walls:

What the reader sees

The reader will see two walls:

Several walls with different widgets

In the same way, your tech team can display two different walls on the same page.

To set-up walls with different widgets, you have three options:

Calling a custom context
Forcing a widget
Calling a personalized group

As in our previous example, we'd like to display the 'newsletter registration' wall, as defined in the Dashboard. But this time, we'd like also like a second wall, a 'subscription' widget, without any alternative.

Option 1: calling a custom context

In your Dashboard, you need to create a custom context, and one or several scenarios.

In our example, we create a "Subscription" context, using only native segmentation.

We also create one scenario with only one action:

Here's the code in the page:

Option 2: forcing a widget

You can personalize your forced widget directly in the code - for instance you can change the texts.

Here's the code integrated in the page:

Option 3: calling a personalized group

In your Dashboard, you need to first create a personalized group and one scenario.

In our example, we created one personalized group "subscription" in our Default context:

We also create a scenario with one action:

Here's the code in our page:

From a reader point of view.

Here's the result.
We have our two walls ! ✨ ✨