Do It Yourself Widget

Overview


The Do it Yourself widget lets you embed your small webpage as a Dash widget. So, you can make this webpage:



and then show it on your dashboard like this:


The Short Version


This isn't an "embed any webpage" widget. It's a "do it yourself" widget. It's for techies who know how to sling a little HTML and have access to a web server.

If you serve your widget over HTTPS, you can do some fancy stuff. If you use HTTP, you have to keep it simple.

That's about it. If you want the tech details, though, keep reading.

Problems with Commercial Websites


One of the first things people try to embed in a Do it Yourself widget is their favorite website. Unfortunately, that won't work a lot of the time. Many commercial websites serve their pages with 'X-Frame-Options' set to 'SAMEORIGIN', which tells your browser not to show their content in other websites.

For example, YouTube prevents their website from being embedded in Dash, but you can embed a video by grabbing the URL out of their special embed code (see YouTube Example section below). Facebook blocks embedding of any type. Even Dropbox prevents their stuff from being embedded in external websites.

You can certainly try to use commercial websites with the Do it Yourself widget, but you'll have much better luck if you build and host the webpage yourself.

HTTPS vs HTTP


We use an IFRAME to show your embedded webpage. If you serve your webpage via HTTPS, great. Dash just sticks your webpage in the IFRAME and everything should work just fine.

If you serve your webpage via HTTP, things get a little more complicated. Because Dash is served via HTTPS, your web browser automatically blocks HTTP content in IFRAMEs. That means we can't stick your webpage directly inside of the IFRAME.

Instead, Dash's server grabs your webpage and then re-serves it over HTTPS so it isn't blocked. 
We try to be smart about not only grabbing your webpage, but also everything you reference in your webpage. As you can probably guess, the more complicated your webpage is, the more likely it is that we're going to miss some stuff that your webpage references.

If your webpage is HTTP and you reference an image with an <img> tag, we're going to get it. If you dynamically swap out images with JavaScript, we'll probably screw that up.

Updating Your Content


Unlike all other Dash widgets, one we load a Do It Yourself widget, we don't automatically reload the content. That's because we don't want to break any long-playing animations or data visualizations.

This means you're in charge of updating the Do It Yourself widget if your content changes. If you're doing this dynamically via JavaScript, great. If you're doing this by only changing the HTML source, though, you're going to need to reload the embedded page.

A great way to do this is to use the refresh meta tag. For example, to refresh your Do It Yourself widget every 30 seconds, add this inside of your HEAD tag:
<meta http-equiv="refresh" content="30" />

Hosting Your Content


If you don't have access to a web server, there are all kinds of ways to get your content out there. For static content we've had great luck with Amazon S3 and GitHub Pages.

Unfortunately, like we said above, Dropbox won't work for hosting.

Example


Here's what a simple webpage could look like. Notice that there's nothing wrong with using JavaScript or CSS.
<!DOCTYPE html>

<head>
<meta charset="utf-8">

<script>
  window.setInterval(function() {
    var i = Math.floor((Math.random()*10)+2);
    document.getElementById("number").innerHTML = i;
  }, 2000);
</script>

<style>
  body {
    margin: 0;
    background: #fff;
  }
  img {
    width: 100%;
  }
  .counter {
    position: absolute;
    top: 20%;
    left: 45%;
    font-size: 50px;
    background-color: rgba(255,255,255,0.5);
    padding: 10px 20px;
    border-radius: 20px;
    font-family: Helvetica, Arial, sans-serif;
    color: black;
  }
  .counter span {
    font-weight: bold;
    font-size: 68px;
  }
</style>

</head>

<body>
  <img src="kitten.jpg">
  <div class="counter"><span id="number">4</span> kittens</div>
</body>
</html>
We've decided to host this on Amazon S3, so we've uploaded both this index.html file and kitten.jpg to the "cat-counter" folder in our dash-demo S3 bucket. That means the external URL we can use for the Do it Yourself widget is https://dash-demo.s3.amazonaws.com/cat-counter/index.html.

YouTube Example


YouTube does allow their videos to be embedded in external sites, but you can't just use the URL of the video's webpage. Instead, you need to use YouTube's special embed URLs. For example, to use a video with an id of oHg5SJYRHA0 in the Do It Yourself widget, use the URL:
https://www.youtube.com/embed/oHg5SJYRHA0?html5=1
You can also get fancy by using advanced settings from the YouTube documentation. For example if you wanted your video to loop and play automatically, the URL would be:
https://www.youtube.com/embed/oHg5SJYRHA0?html5=1&version=3&loop=1&playlist=oHg5SJYRHA0&autoplay=1&controls=0
Notice how the video's ID is in two places in the URL.

Vimeo Example


Vimeo is pretty simple. Just like YouTube, you'll need to get the video's ID, and the URL will look like this:
https://player.vimeo.com/video/2619976

Suggestions


If you have any suggestions about how we can make the Do it Yourself widget better, be sure to let us know!

Feedback and Knowledge Base