How to integrate Limio Pages into the Zephr Paywall

Limio has a deep integrations with Zuora products, including Zephr. The best-of-breed approach with Limio, Zephr and Zuora Billing brings the most flexibility and agility for monetisation technologies - supporting subscriptions, one-offs, bundles, gifting, B2B, usage-based products and more. Limio allows to bridge the gap between Zephr and Zuora:

Our OOTB integrations means less work for you and faster time-to-market. You can learn about our deep integration with Zuora's other product such as Zuora Billing in our help desk .

This articles will focuses on integration with Zephr on the Paywall.

Zephr Paywall Integration with Limio

Introduction

It is possible to display a Limio Page in the Zephr paywall.

This integration is particularly useful for media companies managing all pages centrally in Limio Commerce, while also leveraging the capabilities of the Zephr Rule Engine to display them at the right time and place on their editorial site.

For example, you can show a Limio Component displayed Offers stored on a Limio Pages within the Zephr paywall. Once the customer clicks on Subscribe, you can use purchase links to direct them to a Limio Checkout with a populated basket to complete their order.

Domain Setup

Add the required CSP headers to your Limio pages

By default, Limio pages are restricted from being hosted in an iFrame on an external site. To allow a Limio page to be hosted via Zephr, you need to add the domain of the page where the iFrame will be rendered.

To find your page in Zephr, go to Delivery > Sites > select a site > Domains. Then add the domains listed above in Limio in Settings > Allowed Hosts > ALLOWED ANCESTORS. Follow the steps in this guide: Adding Frame-Ancestors to the Content Security Policy (CSP). for more details.

Pages Setup

Configuring Pages and Offers for Zephr

The campaign can be set up just like any other regular pages and offers.

For Limio Pages, make sure it has a tag, some components (else the page will be empty), and at least 1 Offer. The page should be unauthenticated to load correctly.

For the offer, make sure to use the checkout link set to External. Learn more about this setting in this help desk document.

Iframe the Page's URL to render in Zephr

Once the pages/campaign and offers are saved in Limio, it will be possible to use the functionality with the URL of the Campaign.

You should load the Limio Page via an iFrame into your site. The iframe will:

• Prevents CSS cascading
• Enable your website to make the request into Limio directly in case it needs to share cookies or any other data relevant to journeys you cannot pass through Zephr.

To use the iframe, add a query string parameter framed, as follows: https://sandbox-shop.dev.limio.com/new-campaign?framed=true

Add the Page's iframe URL in a Hosted Component

Enter this URL into a Zephr Hosted UI Component (Delivery > Component Library). The component will then call Limio whenever the Page is requested and apply the content directly to your site.

Example of a Component displaying a Limio Campaign created in Zephr

Add the Hosted Component to a Zephr Outcome

You can load the component into a Zephr Product > Features > Outcome to test the display.

Example of a Zephr component displayed within a Feature's Outcome.

Note: Zephr caches some of these requests so changes may take some time to show up.