Two-Step Integration

Introduction

The concept of two-step integration allows you to maintain a consistent look and feel of your paywall that shows a product overview (i.e. one offer is time-based). It's called 'Two-Step' because in a first step a user has to click first on the generic product overview before they are presented with the payment snippet in a second step.

We only deliver you our paywall snippet. Creating the paywall that allows a two step flow remains your responsibility.

Dynamic Paywalls

To effectively integrate a paywall with a flexible two-step process, it must dynamically adapt to varying user states. In our case a user can be in two different states: 'not connected' or 'connected.' This is important to understand as your paywall needs to be dynamic to handle both.

User state: 'Not connected'

If a user visits your web app for the first time, the user should see all product offers first. Only once he clicks on the time-based offer the payment snippet should be loaded in the second step.

User state: 'Connected'

If a user is already connected and visits your web app repeatedly, the user should be shown the payment snippet in it's connected state, so he can start a session directly with one click.

Get started

We pass the isConnected property via TIUN_HIDE_PAYWALL and TIUN_SHOW_PAYWALL paywall events, allowing the system to use this as a condition for the applicable case. If the user is connected, the paywall displays immediately (bypassing the first step). Conversely, if not connected, users are first shown options before moving to the next step.

Using user connection information

To show different paywalls to default users and users with an active tiun connection proceed as follows:

window.addEventListener('message', (event) => {
  if (event.data?.type === 'TIUN_EVENT') {
    if (event.data?.content === 'TIUN_SNIPPET_INITIALIZED') {
      updateContentInfo();
    } else if (event.data?.content === 'TIUN_HIDE_PAYWALL') {

      // always 'true' with an active tiun session
      var isUserConnectedWithTiun = event.data.isConnected; // true
      
			// TODO: add your logic to hide the paywall

    } else if (event.data?.content === 'TIUN_SHOW_PAYWALL') {

      // 'false' if user should see the default paywall
      // 'true' if user should see the tiun snippet paywall
      var isUserConnectedWithTiun = event.data.isConnected;

			// TODO: add your logic to show the paywall

    }
  }
});

Customer showcase

Companies	Website
Tagespost	www.die-tagespost.de
Media Print, Profil	www.profil.at
Ringier, Blick+	www.blick.ch