Tiles: How To Embed Into Your Website

A live example of Tiles embedded via an iframe can be found at http://blog.initialstate.com/franklin/weather.html

Introduction


*iframe embeds are only available on the Pro tier
Publishing any Tiles dashboard to your website or blog is super easy and requires almost no coding effort. Any bucket that you own has the option to be shared by embed. When enabled, a simple iframe embed HTML element is generated that you can copy and paste into your website or blog. This allows you to wrap whatever design, branding, or tools you want around your real-time Tiles dashboard. As data is streamed into your dashboard, every viewer will see it update in real-time just as you do when you are inside of your Initial State account. 

Step 1: Share by Embed



To generate an iframe element, click on the "settings" link for the desired bucket in the bucket shelf, go to the Sharing tab, check the "Share by Embed" checkbox, and copy the iframe element text. If you want to allow viewers to edit your Tiles dashboard, check the "Allow editing when embedded" box. Otherwise, viewers of the embed will see the dashboard exactly as you have organized it from tile order and size to selected chart types.

Step 2: Embed into your Website 


Once you have enabled embed sharing, your Tiles dashboard is ready to go live on your website. Simply paste the iframe HTML element into your website or blog, set the width and height, and your dashboard is live to the world. It is that easy.  

Complete Example: A Responsive Tiles Dashboard


Let's step through building a simple Tiles iframe embed that is responsive for viewing on a laptop or a mobile device. First, get the iframe HTML element from the share link on the bucket shelf. In this example, we have a weather dashboard and the iframe element is:

<iframe src="https://www.initialstate.com/embed/#/tiles/ejhPg32t8chfqvoPd3g78iWAblH6HQRL"></iframe>

Let's put a simple image header that sits at the top of the webpage and the dashboard underneath the image. 

weather.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
<title>⛅️Franklin, TN Weather</title>
<link rel="stylesheet" type="text/css" href="weather.css" />
</head>
<body>
<img src="franklin.jpg">
<div class="is-embed">
<iframe src="https://www.initialstate.com/embed/#/tiles/evDSAVgZafivA32zckpdCCfxOwhJOWSl"></iframe>
</div>
</body>
</html>

In order to make the dashboard responsive to viewing on both a laptop and a mobile device, the meta viewport setting must be set (line 5 in the example above). Notice that line 12 contains the exact iframe element copied from the bucket shelf share.  

Next, let's make the image and dashboard 100% width and fill up the height of the browser with the dashboard in the css stylesheet. 

weather.css
html,body {
    height:100%;
    margin: 0;
}
img {
width: 100%;
}
.is-embed {
height: 100%;
margin-top: -1em;
}
.is-embed iframe {
width: 100%;
height: 100%;
border: 0;
}

That's all we need to do. This simple example is live at 
http://blog.initialstate.com/franklin/weather.html.

View this example on your laptop/desktop and on your mobile device. Notice how Tiles automatically detects the browser width and optimizes the view accordingly and works with either a mouse/keyboard or with touch inputs. You can even create an icon shortcut on your iOS device for quick access to your application (see 
http://support.initialstate.com/knowledgebase/articles/785265-mobile-add-icon-to-ios-home-screen).  

Below is an example of a live, real-time Tiles embed:


Feedback and Knowledge Base