Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save AntoineSoetewey/d8c357439e6e23341ed4321d910d9181 to your computer and use it in GitHub Desktop.
Save AntoineSoetewey/d8c357439e6e23341ed4321d910d9181 to your computer and use it in GitHub Desktop.
Code for the article How to embed a Shiny app in blogdown. See more information at: https://statsandr.com/blog/how-to-embed-a-shiny-app-in-blogdown/
---
title: How to embed a Shiny app in blogdown
author: Antoine Soetewey
date: '2020-01-07'
slug: how-to-embed-a-shiny-app-in-blogdown
categories: []
tags:
- Shiny
- Web
meta_img: blog/how-to-embed-a-shiny-app-in-a-r-markdown-document_files/shiny-app-in-blogdown.jpeg
# description: Description for the page.
output:
blogdown::html_page:
toc: false
# draft: true
# runtime: shiny
---
![Photo by Émile Perron](/blog/how-to-embed-a-shiny-app-in-a-r-markdown-document_files/shiny-app-in-blogdown.jpeg){width=100%}
If you have developed and deployed a Shiny app and would like to embed it in blogdown, follow these steps:
1. create a new post as usual
1. add `output: html_document` if it is not already included in the YAML metadata
1. insert the following HTML code in the body of the post:
```
<iframe height="800" width="100%" frameborder="no" src="https://antoinesoetewey.shinyapps.io/statistics-201/"> </iframe>
```
You should change the URL with the URL of your deployed Shiny app (after `src=`, do not forget that the URL should start with `http://` or `https://` and should be surrounded by `"`). Moreover, you can modify the height, the width and include or not a frame border with the corresponding tags.
Here is an example of the result with one of my Shiny app ([link](https://antoinesoetewey.shinyapps.io/statistics-201/) to the app):
<iframe height="800" width="100%" frameborder="no" src="https://antoinesoetewey.shinyapps.io/statistics-201/"> </iframe>
<br>
*Note that the app may not work if it has hit the monthly usage limit. Try again later if that is the case.*
The code of this article can be found on [GitHub](https://github.com/AntoineSoetewey/statsandr/blob/master/content/blog/how-to-embed-a-shiny-app-in-a-r-markdown-document.Rmd).
If you encounter an issue, try loading the following packages in the body of your new post: `shiny`, `widgetframe` (you can load a package with the command `library(widgetframe)`). If one of the package is not installed yet, you can do it with the command `install.packages("widgetframe")`.
I hope this article helped you to embed a Shiny app in your blogdown website.
As always, if you have a question or a suggestion related to the topic covered in this article, please add it as a comment so other readers can benefit from the discussion. If you find a mistake or bug, you can inform me by <a href="https://github.com/AntoineSoetewey/statsandr/issues" target="_blank" rel="noopener">raising an issue on GitHub</a>. For all other requests, you can contact me [here](/contact/).
Get updates every time a new article is published by [subscribing to this blog](/subscribe/).
**Related articles:**
<script src="//rss.bloople.net/?url=https%3A%2F%2Fwww.statsandr.com%2Ftags%2Fshiny%2Findex.xml&detail=-1&limit=5&showtitle=false&type=js"></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment