|Quick Start||Complete Example||Live Demo|
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.
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:
Let's put a simple image header that sits at the top of the webpage and the dashboard underneath the image.
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.
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 here).
Below is an example of a live, real-time Tiles embed: