How do I embed plans on my own website?

Supercast Embeds allow you to  display plans and accept payments on your own website.

This means that listeners can signup for your premium subscription without leaving your website, which can result in a higher conversion rate. 

After payment, subscribers will still be directed to Supercast to connect their feeds and manage their subscription.

There are two types of embeds:

  1. Embedding an entire plan (recommended)
  2. Embedding just the sign-up button - for those that want to completely customize the display of their plans

1) Embedding an entire plan

Here's an example for Canadaland. Go ahead, click Signup.

To embed a plan, add the following information to your page:

Supercast embed Javascript

We recommend adding this to the <head> section of your HTML page. Wherever you put it, it must be above any actual embed Javascript.

<script src="https://supercast.tech/js/embed.js" type="text/javascript"> 	</script>

Plan Card

To embed a plan card, add the following on your page, wherever you want the card to appear:

<supercast-embed subdomain="canadaland" plan_id="82"></supercast-embed>

You can include as many embed elements as you want. Embed elements can be styled like normal HTML elements (including dimensions, font sizes, etc.). 

Be sure to customize:

2) Embedding a stand-alone sign-up button

If you prefer to design your own plans, you can start a Supercast purchase in Javascript.

To start a purchase, just call Supercast.startPurchase:

Supercast.startPurchase({ <br>  planId: 1,			// your plan ID from the Supercast site.<br>  subdomain: "subdomain" 	// Your channel / network subdomain.<br>});

A typical use case is to attach this to a click event of a button - here's a working example for the demo above:

<button id="supercast-purchase">Subscribe now</button><br>
<script>
    document.querySelector('#supercast-purchase').addEventListener('click', function() {
          Supercast.startPurchase({ planId: 82, subdomain: "canadaland" });
        })
</script>

Be sure to customize:

Enabling Apple Pay

To enable Apple Pay, there's an additional step you need to take to register your domain with Apple. Contact us and we'll guide you through it.

Still need help? Contact Us Contact Us