Bootstrap Tour in Shiny apps?

[Matthew Leonawicz]

Hi,

I am wondering if there is a recommended way for integrating a Bootstrap Tour (http://bootstraptour.com/) into a shiny app? While I've seen non-shiny web applications that make use of tours - where tour steps describe the app, the source data, how to use it, and show examples of plots and maps in the tour step modals, etc - I haven't seen any examples of this with Shiny. So I am thinking this would all have to be written in html/css/js and sourced into the app. Or is there some bootstrap tour functionality for R Shiny or related packages somewhere already?

This would be great for apps that might appear overwhelmingly complex to a user not intimately familiar with the breadth or depth of data, input options, and complicated analyses made available by the app. Because Shiny apps lend themselves by design to such complex content dissemination, Shiny seems like a perfect use case for app tours, but I am not sure exactly what that would look like in terms of wrapper function implementation to make it a convenient widget for a wide R user audience.

Matt

[Matthew Leonawicz]

I have some example code that generates the required javascript for at least a very basic Bootstrap tour. See this gist.

It will only do basic text title and text description. Anyhow, I have not used this in an app. I could use it outside of an app to generate a js file which I could later import. However, if my ultimate interest is in dynamically adding more complex content via the content argument, such as a table, plot, or map, I'd want a way for generating this in server.R and sending it to the browser wrapped in tags$head() or some other approach that will do the trick.

Matt

[Andrew Sali]

Hi Matt,

You might be interested in taking a look at the 'rintrojs' package. It can be used for app tours and it works well with Shiny.

https://github.com/carlganz/rintrojs

Best,

Andras

[Matthew Leonawicz]

Hi Andras,

Thanks so much for the link. This is exactly what I was looking for and also looks much preferable to using Bootstrap tours as well. I've been playing around with it, but so far am experiencing some weird issues. Using infoBox() in ui.R works great. But in my case I need to do it all in server.R by passing the steps option in the intorjs() options list, like in the second example on the repo page. This allows me to use the position option in the reactive data frame, steps(), for each step as well as more dynamic content. It also keeps ui.R much cleaner if it is a big app that would be littered with many introBox() calls.

I haven't posted an issue on github yet because I haven't reproduced a simple example. But what I am seeing happening is a couple dynamically generated steps display fine and many more tour steps display in the far top left corner of the screen, or sometimes in the top left of some other panel- but nowhere near the input or output whose ID is referenced. When I inspect the page in my browser, it looks like using infoBox() in ui.R properly inserts the correct div around the browser element so that introjs() can display the step near the element. But the same step if passed to the steps option list in server.R, will not insert a div at all, leading to the intro text box showing up somewhere else, usually the corner of the screen.

If I can come up with a small reproducible example, I'll share here and post a github issue, but for now I'm not sure what is really happening. I would love to pass a nice, clean set of vectors of element and intro in server.R and not insert a ton of infoBox() calls in ui.R, but it seems like at least for now that may be the only option. I haven't found any references online to people having a similar issue so I could be using introjs() incorrectly somehow.

Regards,

Matt

[Matthew Leonawicz]

I have a reproducible example, mentioned here:

https://github.com/carlganz/rintrojs/issues/16

The github issue references the code gist. If this turns out to be an issue that is relatively easily solvable, then I think rintrojs is definitely the way to go.

Matt

[Matthew Leonawicz]

The github issue has been updated and is being worked on. If you are having issues with incorrect location for tooltip and element highlighting placements in the browser such as the upper left corner of your screen using the rintrojs package, or if you want to help, see here:

https://github.com/carlganz/rintrojs/issues/16

There is also an overlapping issue with using rintrojs on reactive inputs wrapped in conditionalPanel. See the same github issue above.

Anyhow, this seems superior to Bootstrap tours. I second the recommendation for using intro JS via the rintrojs package.

Matt