See your shiny app inside WordPress with iframe embedding

In the last paragraph of my And how… post I mentioned using iframes to display something from another web site embedded inside this one. Here’s a sample of what this might look like, although in actual use you’d hide the red border. Here I display it so we can see the dimensions of the iframe and where it’s positioned on the page.

The trick to embedding an iframe like this inside a WordPress post is to note the Visual and Text tabs at the right end of the WordPress editing window. The Visual tab lets you edit a post using what-you-see-is-what-you-get tools. The Text tab lets you edit a post using HTML.

I wrote most of this post in the Visual tab, then switched to the Text tab to add this bit of HTML after the first paragraph:

<iframe src="" 
        style="border: 2px solid red; width: 100%; height: 500px;">
It looks like your browser doesn't support iframes.

This HTML opens an iframe and then provides a link to the web page that goes inside. If there’s a problem, the message you provide (here, It looks like your browser doesn’t support iframes.) will be displayed instead of the embedded web page. In this case that page is a demo running on Open-Meta’s LEMRS server Amazon Web Services. You can see how the page looks outside of WordPress at

The style part of the iframe HTML sets the frame size and the border. To hide the border use border: none;. Setting the height to a percentage will not do what you expect unless you’re a CSS coding ninja. Stick with pixels (px).

There is also a javascript project on github called iframe-resizer that enables the height and width of iframes to fit their contained content.  I’ll write more about it when I understand it better. There’s also a post with explicit instructions for using iframe-resizer with shiny in the Shiny – Web Framework for R Google Group.

Leave a Reply

Your email address will not be published. Required fields are marked *