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 Signup if you're curious!
To embed a plan on your website follow these steps:
- On your Dashboard, click on Plans in the left-hand menu.
- 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.
- 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.
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:
- 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)
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.