How Do I Embed Plans On My Own Website?

Supercast makes it easy to embed subscription plans on your website so that your listeners can sign up for a premium subscription without leaving your website (resulting in higher conversion rates). 

In this article, you will learn how to:

• Embed an entire plan (recommended)
• Embed a sign-up button only (for those who want to customize how their plans are displayed)

Embed an entire plan

Here's an example of how a plan would be displayed on your website. Go ahead, click Sign up now if you're curious!

To embed a plan on your website follow these steps:

1. On your Dashboard, click on Plans in the left-hand menu.
2. Click on the plan you want to embed. If you don't have any plans set up yet, check out our Setting Up Listener Plans guide.
3. Click the Embed this plan button in the top-right. A pop-up will appear with some code and instructions on how to embed the plan on your website.

Embed a sign-up button

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

Click this to see Canadaland's sign-up form

To start a purchase, just call Supercast.startPurchase:

Supercast.startPurchase({
	code: "(plan code)",		// your plan code from the Supercast site (from 'Embed this plan')
	subdomain: "subdomain" 		// Your channel / network subdomain.
});

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:

• subdomain - everything up to the first dot in your Supercast landing page URL (e.g. canadaland.supercast.tech)
• planId - the number at the very end of the URL when editing your plan in the creator dashboard (e.g. https://canadaland.supercast.tech/dashboard/channels/plans/82)