Getting Shiny out into the wild
Shiny has really changed game in terms of analytical web-application development. Anyone with a solid grasp of R programming and some basic HTML + CSS knowledge can get production quality apps and dashboards up and running in days rather than months, and be in complete control of the process yourself. Furthermore, because it’s all open-source software, you have total ownership of the product you build - unlike many expensive off-the-shelf GUI solutions.
One way around this is to embed shiny apps into standard webpages in an iframe. This is easily done with a standard iframe, however, shiny apps have a responsive design which means the height of the app is determined by the end users window size. This makes it difficult to seamlessly integrate dynamic content into the iframe which most commonly have a hard coded height attribute. This tends to result in either scroll bars appearing around the app or a big gaping void of existential abyss between the bottom of your app and the next piece of content on your webpage.
The buttons below are part of a running shiny app hosted on shinyapps.io. Press some of them and see what happens…
How to do it
To achieve this behaviour we need:-
one js script sourced in the shiny app
a tagged placeholder div at the point in the app you want to be ‘end’ (after all the charts ‘n tables)
another js script sourced in the parent HTML page
some iframe styling
the iframe itself
a final script telling iframeResizer to go to work on our iframe and look for the tagged <div>
I’m using cdn versions of the scripts but you can download them here and use local versions if you’d prefer.
So firstly, add this to your shiny app UI:
Then find the spot in the UI you want to be endpoint and add this placeholder <div>
(You can skip this step and use heightCalculationMethod: 'lowestElement' in the final script, but I found this only worked when the iframe height increased in height but not when it decreased in height.)
Finally, add this code to the parent HTML page you are embedding the shiny app in, in the position you want the app to render (change the source url in the iframe to your shiny app url). For the blogdowners amongst us, you can paste this HTML code straight into any Rmarkdown or regular markdown document:
<iframe id="myIframe" src="https://YOUR_SHINYAPP_URL.com" scrolling="no" frameborder="no"></iframe>
And that should be that!
There’s real potential for shiny to find it’s way onto more webpages in the public domain. With the ability to match the parent webpage’s CSS styling combined with responsive iframe integration, shiny app development and design can be tailored for webpages they are destined for. Here’s a great example of a shiny app built into a full website. h/t Joshua Kunst.
If you’re interested in bespoke web-applications for your website, get in touch with us here.
Thanks for reading.