Embedding Shiny App in WordPress

I mostly code in R and Python for my data science/machine learning projects and use WordPress in my portfolio blog. In order to communicate my experiments as interactive visualizations, I can either publish those as ShinyApps, or Quarto websites.

I wanted to test if I could embed a Shiny app in WordPress. It could help me write the data analysis and interactive visualization code in R, and publish it to my WordPress-based personal website.

The solution was to embed a Shiny app as an “iframe” in a WordPress blog.

An iframe (short for inline frame) is an HTML element that allows us to embed another HTML document within the current document. It provides a way to include external content from another source or website into your web page. The content within the iframe is displayed as a separate independent window within the parent document.

I published the example ShinyApp in “https://kshitizkhanal7.shinyapps.io/basic_shiny/“. Then I used the following HTML code in this WordPress code to get the app embedded here. 

<iframe src="https://kshitizkhanal7.shinyapps.io/basic_shiny/" width="150%" height = "650"></iframe>

Let’s break it down:

  • <iframe>: This is the opening tag of the iframe element.
  • src="https://kshitizkhanal7.shinyapps.io/basic_shiny/": The src attribute specifies the URL of the external web page you want to display within the iframe. In this case, it is set to "https://kshitizkhanal7.shinyapps.io/basic_shiny/".
  • width="150%": The width attribute determines the width of the iframe. In this example, it is set to "150%", indicating that the iframe will be 150% of the width of its container. This allows the iframe to expand beyond the normal width of the container if needed.
  • height="650": The height attribute specifies the height of the iframe in pixels. In this case, it is set to "650" pixels.
  • </iframe>: This is the closing tag of the iframe element.

The resulting embedded app follows.

I plan to use this and explore other tools to create scrolly data stories in WordPress. Follow this space for more.

I am on Twitter @kshitizkhanal7.