Universal Bundle
{ documentation }

Getting Started

Setting up the unversal bundle is simple. All it takes is three simple steps:

  1. Add the two files javscript bundle and css bundle) to your site. (go to this step)
  2. Create one or more player containers. (go to this step)
  3. Initate. (go to this step)

1. Add the CSS and JS files

Unzip, move files, wire em' up

Replacing /path/to/ with the path to where you put these files...

(in your head)

<link rel='stylesheet', href='/path/to/be-heard.css'>

(ideally in footer, before closing body tag)

<script src="/path/to/be-heard.js">

2. Create Container(s)

Each player needs a base div (ie: "container"). The player will be "injected" into this div. Options are set on this div via data attributes (data-attribute). Some of these data attributes are required for each player, while others are optional (overrides to the defaults (set in the inititaion, below)).

There are 2 required data-attributes for each player:

  1. data-src (URL to your podcast episode's .mp3 file)
  2. data-title

The others are optional (and intended to be allow for overridding defaults, so if you don't need to override the defaults, don't worry about them).

Here's an example (using all the available options, comments like this not possible in actual html):

<div class="myPlayer"
  data-namePodcast="Be Heard Creator" 
  data-nameEpisode="The lowdown on the Be Heard! podcast player"
  # MODAL -- Share
  data-headingModalShareIcons="Sharing is caring! Thanks for caring!"
  data-headingModalShareURL="copy & share!"
  # MODAL -- End of Play CTA (Call to Action)
  data-ctaEndHeading="Thanks for listening!"
  data-ctaEndLinkText="Find us on Twitter"
  data-ctaEndCustomHtml="<h1>The End!</h1><p>More custom html here (that will override the above heading and link if present)."

3. Initiate

On each page that has one or more players, initiate the player in the footer, giving default options (just below your closing body tag </body>, but after the script tag importing the Be Heard JavaScript bundle (from step 1)).

Note: Whether you have one or multiple players on a page/site, this step is the same.

  var settings = {
    // GENERAL
    namePodcast: "Official Podcast Name"
    classSelector: "myPlayer",
    colorBackground: "#007BFF",
    btnDownload: true, 
    btnSpeed: true,
    btnSkip: true, 
    btnSpeed: true,
    // MODAL -- General
    colorModalOverlay: "#000000",
    opacityModalOverlay: 0.9,
    // MODAL -- Share
    headingModalShareIcons: "Share!",
    headingModalShareURL: "Link to Copy, Paste, & Share",
    shareOnTwitter: true,
    shareOnFacebook: true,
    shareOnGPlus: true,
    shareOnPinterest: true,
    // MODAL -- End of Play CTA (Call to Action)
    ctaEndToggle: true
    ctaEndTriggerSecLeft: 15
    ctaEndHeading: "Thanks for Listening!"
    ctaEndLinkText: "Follow us on Twitter"
    ctaEndLinkURL: "http://twitter.com/username"
    ctaEndLinkOpenNew: true
    ctaEndCustomHtml: "<h1>Thanks for listening</h1><p>default message with custom html...</p>"
  var trackCustomInfo = new BeHeardPlayer(settings)


  • classSelector must be the same used for your player(s) container(s). And yes, use the same selector for all player containers (ie: only use/create 1 class selector).
  • color must be in HEX format


authorType: string Default: ''
titleType: string Default: ''
shareURLType: string Default: ''
shareType: boolean Default: false
downloadType: boolean Default: false
skipType: boolean Default: false
speedType: boolean Default: false
colorModalOverlayType: string Default: #000000
opacityModalOverlayType: float Default: .3
headingModalShareIconsType: string Default: ''
headingModalShareURLType: string Default: ''
shareOnFacebookType: bool Default: true
shareOnTwitterType: bool Default: true
shareOnGPlusType: bool Default: true
shareOnPinterestType: bool Default: true
ctaEndToggleType: bool Default: false
ctaEndTriggerSecLeftType: Int Default: 10
ctaEndHeadingType: String Default: ''
ctaEndLinkTextType: String Default: ''
ctaEndLinkURLType: String Default: ''
ctaEndLinkOpenNewType: Bool Default: false
ctaEndCustomHtmlType: String Default: ''