To optimize the integration of the paywall with your content, you can easily add an effect above your widget. Everything can be configured from your Dashboard, in the 'Appearances' section.
Apply the style in the parent container’s CSS block
In the section Appearance > Edit Appearance Properties
To do this, simply add a specific style to the parent container’s CSS block.
💡 The parent container is the iframe in which the paywall is displayed. The CSS added to the parent container’s CSS block will be inserted directly into the page where the paywall appears.
Here is the style to apply, which you can copy and paste into your block:
#poool-widget {
position: relative;
}
#poool-widget::before {
content: "";
position: absolute;
pointer-events: none;
top: -90px;
left: 0;
width: 100%;
height: 90px;
background: linear-gradient(to bottom, transparent, white);
z-index: 10;
}
#poool-widget:has(iframe.p3-outlet[style*="height: 1px"])::before,
#poool-widget:has(iframe.p3-outlet[style*="height:1px"])::before {
display: none !important;
}
And that’s it — your effect is ready! 🎉
You can adjust the top and height values according to the desired result.
Since it is applied within the page that contains the iframe, it won’t be visible in the Dashboard. Feel free to test the result directly on your website.