Embedding 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.

Customizing the plan

In some cases, you might wish to customize the embedded plan because:

• You want to match the style and feel of your website, or
• You want to override the style the plan is inheriting from your site.

Either way, you can customize the following elements:

• Dimensions of the plan box
• Font face
• Font color
• Font size
• Font alignment
• Button accent color

Example: Dimensions of the plan box

<style>
supercast-plan {
>width: 300px;
}
</style>
	

This could be included directly on the page, as an inline style on the <supercast-embed /> element, or with your existing CSS.

Example: Styling the Font & Sign-Up Button Color

To change the style of the font (family, color, size, alignment), along with the color of sign-up button, you would add the following snippet of code:

supercast-plan, supercast-purchase {
	font-family: sans-serif;
	color: black;
	font-size: 12pt;
	text-align: left;
	--supercast-button-background-color: #000;
}

where '#000' is the color you want.

Feel free to change the specific elements to whatever makes the most sense to you.

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)