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:
- Embedding an entire plan (recommended)
- 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:
- subdomain - everything up to the first dot in your Supercast landing page URL (e.g. canadaland.supercast.tech)
- plan_id - 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)
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:
- 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)
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.