Embed Indie.am Widget Example

embed-widget.html

    <!-- indie.am Player Embed Script -->
    <script>
      window._indieam_username = 'james'; // Change this to your own log ID, typically indie.am/<log_id>

      document.querySelector('head').innerHTML += '<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cleanslate"><style>#indieam_container{position:fixed!important;padding:18px 20px!important;bottom:0!important;left:0!important;z-index:999999999999!important}.indieam_circle{cursor:pointer!important}.indieam_circle>img{width:65px!important;height:65px!important;border-radius:50%!important;box-shadow:1px 2px 22px #00000044!important}#indieam_container>iframe{position:fixed!important;bottom:-88px!important;left:-27px!important;transform-origin:0 0!important;transform:scale(.8)!important;height:750px!important;width:500px!important;display:none!important}#indieam_container>iframe.indieam_in{display:block!important}#indieam_container,#indieam_container iframe { overflow-y: hidden !important }</style>';

      function _indieam_toggle_player(){if(window._indieam_open){document.querySelector("#indieam_container iframe").classList.remove("indieam_in");window._indieam_open=0}else{document.querySelector("#indieam_container iframe").classList.add("indieam_in");window._indieam_open=1}}

      setTimeout(() => {
        document.body.innerHTML += '<div class="cleanslate" id="indieam_container"><a class="indieam_circle" onclick="_indieam_toggle_player()"><img src="https://indie.am/circle-512.png" alt="Launch indie.am audio window"></a><iframe src="https://indie.am/'+window._indieam_username+'?embedded=true" loading="lazy" frameborder="0"></iframe></div>';
      }, 1500);
    </script>
    <!-- End indie.am Player Embed Script -->

Building your own Javascript Embeds / Widgets with Cleanslate

How it works:

Once you include <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cleanslate">, it gives you the magical .cleanslate reset, intended for crafting ambitious Javascript embeds 😁

Add the cleanslate class to your widget.

Then, move on to crafting (or refactoring) your stylesheet.

All of your classes should get prefixed, so that they don't interfere with anyone else's CSS from the page you're embedding your widget in (and, you don't want their wordpress theme or site template to interfere with your widget!)

Cleanslate accomplishes this by doing a CSS reset on every single element in your widget, and it does it with the !important tag.

So, you've got to fight back. You've got to make your styles even more !important.

Here's the above stylesheet, you'll notice everything is prefixed with indieam_ and !important:

#indieam_container {
  position: fixed !important;
  padding: 18px 20px !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 999999999999 !important;
}
.indieam_circle {
  cursor: pointer !important;
}
.indieam_circle > img {
  width: 65px !important;
  height: 65px !important;
  border-radius: 50% !important;
  box-shadow: 1px 2px 22px #00000044 !important;
}
#indieam_container > iframe {
  position: fixed !important;
  bottom: -88px !important;
  left: -27px !important;
  transform-origin: 0 0 !important;
  transform: scale(0.8) !important;
  height: 750px !important;
  width: 500px !important;
  display: none !important;
}
#indieam_container > iframe.indieam_in {
  display: block !important;
}
#indieam_container,
#indieam_container iframe {
  overflow-y: hidden !important;
}

And loads of z-index. You probably only need about 100000 though.

Then, we chuck the complicated bits (the player) into an <iframe>, so our DOM is isolated from the rest of the page (both the CSS and the JS context).

Ideally, only your open and close buttons would be outside the iframe, and just toggle show / animate on the iframe, which would have a transparent background on its body, and be sized by your Javascript (IIFEs are your friend).

I don't have an IIFE but I probably should. To mitigate this, I prefixed every single Javascript function or variable name.

I don't recommend following my setTimeout example above for invocation. You should also avoid document.write (breaks with Google Tag manager and similar). You want onready without overwriting window.onload, but in vanilla JS it's slightly cumbersome. See: https://stackoverflow.com/questions/9899372/pure-javascript-equivalent-of-jquerys-ready-how-to-call-a-function-when-t