npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

smart-podcast-widget

v0.0.8

Published

This document is currently a WIP and contains errors & omissions

Downloads

3

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

stephenbeckettstephenbeckett

Keywords

Readme

This document is currently a WIP and contains errors & omissions

smart-podcast-widget

Make it easy for people to subscribe and rate your podcast

  • Adapts depending on the user's device, so they always see the right apps & links for them.
  • Embeds into your existing website, or as its own page/microsite.
  • Clear instructions to help users leave ratings & reviews across podcast platforms.
  • Works on all modern browsers - desktop & mobile.

Try it now | Copy the code alt text | Remix on Glitch

Try it now | Copy the code alt text | Remix on Glitch

Quick Start

Embed in your website

  1. ✅  Paste this in your page wherever you want the widget to appear:

    Using Wordpress? Paste this code into a 'Custom HTML' block.

<div id="podcast-widget"></div>
<script src="https://cdn.jsdelivr.net/npm/smart-podcast-widget" type="text/javascript"></script>
<script type="text/javascript">
  PodcastRedirectWidget(
  // 2. ✅ Add your podcast's links here & delete any you don't want to use: 
  {
    'website': 'https://wapin7.com',
    'podchaser': 'https://podchaser.com/wapin7',
    'podcast-addict': 'https://podcastaddict.com/wapin7',
    'castbox': 'https://castbox.com/wapin7',
    'apple-podcasts-mobile': 'https://fakelink.com/wapin7',
    'spotify-mobile': 'https://fakelink.com/wapin7',
    'spotify-desktop': 'https://fakelink.com/wapin7',
    'acast': 'https://fakelink.com/wapin7',
    'stitcher': 'https://fakelink.com/wapin7',
    'pocket-casts': 'https://fakelink.com/wapin7',
    'tunein': 'https://fakelink.com/wapin7',
    'podbean': 'https://fakelink.com/wapin7',
    'deezer': 'https://fakelink.com/wapin7',
    'google-podcasts': 'https://fakelink.com/wapin7',
    'iheart-radio': 'https://fakelink.com/wapin7',
    'rss': 'https://wapin7.com'
  }, 
  {
    // 3. ✅ Customise the appearance (see the examples & docs for more options)
    title: "Podcast Name Here",
    subtitle: "This is a short description of the podcast, it should fit in a couple of lines.",
    defaultAction: 'subscribe', // Can also be 'rate'
  });
</script>

See the full code for this example, or Remix it on Glitch.

You can customise nearly everything in the widget - see the Examples and Documentation.

Add as a standalone page

Copy the Standalone Page example or use the Embedded code above, but with standalone: true, e.g:

{
  standalone: true, // ✅ Set this to true 
  title: "Podcast Name Here",
  subtitle: "This is a short description of the podcast, it should fit in a couple of lines.",
  defaultAction: 'subscribe' 
}

You can customise nearly everything in the widget - see the Examples and Documentation.

Examples

These examples show how you can customise appearance & content of the widget. See the Documentation for detailed information.

All of these examples are available to remix on Glitch.

Embedded in a page

As a Standalone page

The Embedded examples above will also work in Standalone mode providing standalone: true is set as a theme parameter.

Run the examples locally

Clone or download this repository then run:

  npm install
  npm run start

and visit http://localhost:8888/examples

Documentation

Take a look at the all parameters example to see the options detailed below, or remix the example on Glitch to try it out now. There are more examples in the Examples section.

Initialisation

The widget will only be shown once the PodcastRedirectWidget function is called. Currently there is no way to change parameters after initialisation.

PodcastRedirectWidget(Urls*, Theme*, SocialLinks, PriorityApps, ElementId) accepts 5 parameters:

| Parameter name | Required (*)? | Description | | -------------- | ------------- | -------------------------------------------------------------------------------------------------- | | Urls | Yes | URLs for the app & website listings associated with your podcast | | Theme | Yes | Custom theming options that will override the default settings | | SocialLinks | No | Social URLs associated with your podcast, e.g. twitter, facebook, your website | | PriorityApps | No | Specifies which apps should always shown full size in the widget, as well as the order of the apps | | ElementId | No | The ID of the element that should contain the widget (by default #podcast-widget) |

Urls (required*)

An object containing the various app & website listing URLs of your podcast as key-value pairs.

Keys/property names must exactly match one of:

{
  'website': 'https://wapin7.com',
  'podchaser': 'https://podchaser.com/wapin7',
  'podcast-addict': 'https://podcastaddict.com/wapin7',
  'castbox': 'https://castbox.com/wapin7',
  'apple-podcasts-mobile': 'https://fakelink.com/wapin7',
  'spotify-mobile': 'https://fakelink.com/wapin7',
  'spotify-desktop': 'https://fakelink.com/wapin7',
  'acast': 'https://fakelink.com/wapin7',
  'stitcher': 'https://fakelink.com/wapin7',
  'pocket-casts': 'https://fakelink.com/wapin7',
  'tunein': 'https://fakelink.com/wapin7',
  'podbean': 'https://fakelink.com/wapin7',
  'deezer': 'https://fakelink.com/wapin7',
  'google-podcasts': 'https://fakelink.com/wapin7',
  'iheart-radio': 'https://fakelink.com/wapin7',
  'rss': 'xxx'
}

If you don't want to show a particular app, just delete the line or set it to an empty string, e.g.:

'deezer': '' // This will not be shown

Theme (required*)

Customise the content & look of the widget with these properties:

| Property name | Type | Default | Description | | ------------- | ---- | ------- | ----------- | | WIP... | | | |

SocialLinks (optional)

An object containing your the social URLs associated with your podcast as key-value pairs.

Keys/property names must exactly match one of:

{
  website: 'https://wapin7.com',
  instagram: 'https://instagram.com/wapin7podcast',
  email: 'mailto:[email protected]',
  facebook: 'https://facebook.com/wapin7'
}

PriorityApps (optional)

A list of app IDs specifying which apps should be shown full size in the widget, as well as the order of the apps. IDs must exactly match a key from the Urls parameter.

By default PriorityApps is:

[
  'apple-podcasts-mobile', 
  'spotify-mobile', 
  'google-podcasts',
  'stitcher',
  'podcast-addict',
  'acast'
]

Priority apps will be shown in the full size slots (i.e. with a Subscribe/Rate button) rather than just as icons. If there are more priority apps than the value specified by theme.numPrimaryApps then the excess apps will be added to the start of the icon only list.

The order of PriorityApps determines the order of apps shown in the visual list.

If an app is not available on a given device, then it will never be shown to a user on that device. For example, the iOS only app apple-podcasts-mobile will never be shown to an Android user, even though it is in the priority list.

ElementId (optional)

The ID of an existing page element that will be used as the container of the widget when it is injected, by default this is #podcast-widget.

If an element matching ElementId cannot be found in the page when PodcastRedirectWidget() is called, the widget will not appear and an error will output to the console.

Events

See the Events example. The root widget container element produces the following events:

| Name | Description | | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | app-choice (appId) | Fires when the user first clicks on an app to access a link, or the rate instructions. appId will be one of the property names listed in Urls. | | action-changed (actionId) | Fires when the action changes, e.g. the user presses the 'Rate' button when in 'Subscribe' mode. actionId will be one of: rate or subscribe | | ready (platformId) | Fires when the widget component has loaded, includes the detected platform ID of the device. platformId will be one of: windows, osx, android, ios, windows-phone, linux or unknown. |

Feature requests

The underlying Vue/Vuetify component source code for this widget is not currently available, but may be released in the future. In the meantime feel free to make a feature request by raising a new issue.

Possible future features:

  • Font customisation
  • Support for more podcast apps & websites
  • Embedded RSS reader & audio player
  • Integration with analytics services