Using the Supercast Javascript Library

The Supercast Javascript library can be used to enhance your website with Supercast functionality. It's comprised of custom elements that can be placed directly on any of your webpages to provide Supercast functionality with a line of code, or by utilizing Javascript methods that allow you to directly interact with your subscriber's Supercast accounts directly in their browser sessions.

Including the Supercast Javascript Library

You can include the Javascript Library on any page with the following code snippet:

<script src="https://supercast.tech/embed.js"></script>

This will always retrieve the latest version of the library. Any changes we make are always backwards-compatible. We recommend including the library on all of your pages in the HEAD section.

Custom Elements

Custom elements provide an easy way to bring Supercast functionality to your webpage. By including a single HTML element, you can allow your users to purchase subscriptions, connect their players, or gate content behind a subscription.

supercast-plan

Displays the details of a plan / bundle, with an option to purchase a plan. Clicking "Sign up now" will load a purchase modal.

Syntax:

<supercast-plan code="(plan guid)"></supercast-plan>

Attributes:

  • code - A code identifying your plan. This is available from "Embed this Plan" on your creator dashboard.

Styling:

The following parts can be independently styled on supercast-plan:

  • container - The box surrounding the plan
  • pricing - Pricing details of the plan
  • title - The title of the plan
  • description - The description of the plan
  • button - The 'Sign up now' button

Parts can be targeted with the following CSS:

supercast-plan::part(container) {
  background-color: blue;<br>}

supercast-player-links

Displays player links for the current user. Clicking on a link will open the relevant player.

Syntax:

<supercast-player-links subdomain="(your subdomain)" subscription-identifier="(identifier)"></supercast-player-links>

Attributes:

  • subdomain - Your network or podcast subdomain. If you have a network and provide the subdomain of one of your podcasts, only that podcast's links will be shown. If you provide the network subdomain, all links for that user will be shown.
  • subscription-identifier (optional) - If your subscription was created via the API, and you provided an external ID, you can reference it here to identify the correct user. If your users signed up through Supercast, you will need to identify them first with Supercast.startLogin() or Supercast.login() before loading this element.

supercast-gate

Displays different information to users based on whether they have a subscription or not. You can use this to gate content on your website behind a subscription.

Place content you want your subscribers to see in the available slot (i.e. player links, transcripts, etc.) and content for everyone else in the unavailable slot (i.e. a sign up prompt, a login button)

supercast-gate relies on your users Supercast login state. Generally users who signed up will have a persistent cookie and will be logged in, but we recommend including a Login button (using Supercast.startLogin or Supercast.login) in the unavailable slot or elsewhere on your page so that users can authenticate if they are on a different device.

Note: This only prevents display of information to non-subscribers, and it will still be present in your HTML source. We do not recommend using this for sensitive information.

Syntax:

<supercast-gate subdomain="(your subdomain)" required-plans="(plan ids)"><br>  <div slot="available"><br>     Content for subscribers<br>  </div><br>  <div slot="unavailable"><br>     Content for non-subscribers<br>  </div><br></supercast-gate>

Attributes:

  • subdomain - The subdomain to check for a subscription. Users must have a subscription to the channel in question to see the available slot
  • required-plans (optional) - Which plans the user needs to see the content. This is a comma-delimited list of plan ids. If omitted, any active subscription to the channel will allow viewing the content.

Javascript Functions

Supercast.startPurchase

Launches a purchase modal for a specified plan.

Syntax:

Supercast.startPurchase({ code })

Parameters:

  • code - A plan code for purchase. This is available from "Embed this Plan" in the creator dashboard.

Supercast.startLogin

Launches a login modal to authenticate with Supercast. This does nothing if the user is already logged in.

Syntax:

Supercast.startLogin({ subdomain })

Parameters:

  • subdomain - The subdomain to log into.

Supercast.episodes / Supercast.episode

Returns details about all the users episodes / a particular episode

Syntax:

Supercast.episodes({ subdomain })<br>Supercast.episode({ subdomain, id })

Parameters:

  • subdomain - The subdomain of your podcast / network
  • id - The episode id to retrieve details for

Supercast.currentUser

Returns details about the currently logged in user. Returns null if no user is logged in.

Syntax:

Supercast.currentUser({ subdomain })<br>

Parameters:

  • subdomain - The subdomain of your podcast / network