Creating Experiences

Overview

An Experience is the presentation layer for Offerings, it's what the end-user will see when they try to access your content. This guide will walk you through creating a new Experience, customizing it, and preparing it to go live.

Interactive Guide

Types of Experiences

Supertab allows you to create two Experience types within the Business Portal: Basic Paygate and Purchase Button. We offer many more flexible options to build custom Experiences, but they require using our developer solutions, such as Supertab.JS

Basic Paygate

Basic Paygate is the simplest way to monetize websites. It allows you to offer from 1 to 3 Offerings on each of 2 screens. The layout adjusts to the number of Offerings and the number of screens, as well as the type of Offering. 

You can use the Basic Paygate to sell time passes and subscriptions. 

It also allows you to show upsells and discounts, e.g. if you want to entice users to choose a 6-month subscription over a 1-month one and save money. 

You can customize it with your logo, brand colors, as well as custom title in multiple languages.

Purchase Button

Supertab Button allows you to sell all Offering types: time passes, subscriptions, as well as single items. You can place it wherever you want, making it perfect for building custom Experiences when you are not ready to use Supertab.JS yet, or if you are using a website creator like Ghost.io

Step-by-step Instructions

Before You Start

Make sure you have at least one Site and Offering already set up. 

Step 1: Open the Experiences Section

In the Business Portal, click Experiences in the left-hand menu. 

If you have multiple Sites, make sure that you work on the right Site by checking the left-hand side menu. You can switch to a different Site by clicking on the Site Name and selecting a different one from a dropdown menu. 

Click Add New Experience.

Step 2: Name and Configure the Experience

Under Experience Settings, select Experience Type and choose between Basic Paygate and Purchase Button . 

Give your Experience a name. 

Additionally, if you're working on a Basic Paygate:

• Add your Redirect URL — where customers should be sent if they close the Paygate. If you don't know where to send users, the homepage is the best bet.
• If you have provided a logo in Site settings, we will automatically show it on the Paygate.  

Click Save.

Step 3: Select Your Offerings

If you are working on a Purchase Button, you can select one Offering from the Offering dropdown. Click Save.

If you are working on a Basic Paygate, the setup is much more robust. The preview is fully interactive to help you understand the end-user experience.

In the Main Screen section, choose which Offerings appear first. You can show between 1-3 Offerings per screen. 

Star one Offering to highlight it. It will be emphasised on the Paygate when it pops up for users for the first time or if they navigate between screens. 

Use the “More Access Options” screen to add additional Offerings for customers to choose from. If you enable it, a "More access options" will appear on the Paygate.

Step 4: Add an Upsell (Optional - Paygate only)

Click Add Upsell to present customers with a higher-value option. For example:

• entice users to upsell a 1-week time pass to a 1-month subscription
• encourage users to upsell from a 1-hour time pass to a 1-day time pass 

Upsells work best when there is a discount involved. We will automatically calculate discounts and show them on the preview. Discounts are calculated based on the price per second. 

Step 5: Customize the Appearance

Customize colors of the Button or the Paygate. Use the interactive preview as a reference point. 

For the Paygate, you can also edit the Custom Paygate Text to update the title and the "More access options" button. You can edit it in all languages in which the Paygate is available:

• English (US)
• English (UK)
• Japanese
• Brazilian Portuguese
• French
• German
• Italian
• Spanish

You can edit the title or button text in all languages or select just a few. If you do not provide an alternative text, we will use "Get Access in Seconds" for title and "More access options" for the button or equivalent in other languages.

Click Save.

Step 6: Install the code snippet

When you land in the Installation section, you will see the code snippet of your new Experience.

A code snippet can be used in Test Mode and Live Mode.

Test Mode is perfect for testing your implementation, since no real transactions can be processed. You can read more about it in our Developer Docs.

Live Mode is what you want to use when you are ready to start earning. 

Copy the code and place it wherever you want it to appear on your Site. The easiest option for the Basic Paygate is to put it in your website <head> tag to make it appear on all Sites other than the homepage. If you are using a CMS, you can also paste it through a code injection (search documentation of your website editor or CMS for things like code injection, HTML injection, custom HTML etc.)

Step 7: Finish

Click Finish. Your Experience will now appear in the Experiences list and is ready to be used by customers.