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:

NOTE: Plan embeds currently only support single plans (monthly or annual only). You won't be able to embed plans on website builders that don't support HTML (e.g.  Wix).

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.
NOTE: After payment, subscribers will be directed to Supercast to connect their feeds and manage their subscription.

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
To control the sizing and position of our embed elements, you can style them the same way that you would any other HTML element.

For example, if you wanted to limit the size to a maximum of 300 pixels, you could include the following snippet of code: 
<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.

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:

NOTE: 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.

Related Articles