Flexdashboard introJS

Question

I am trying to implement introjs in a flexdashboard (shiny runtime), but I am not sure what causes issues. My introjs implementation in flexdashboard below is based on a shiny implementation which works just fine, see the following for example: https://github.com/FrissAnalytics/shinyJsTutorials/tree/master/tutorials/materials4/BasicDemoIntroJS.

Note that the code below calls three files: introjs.min.css, intro.min.js and app.js, all of which are found in the previous URL.

Expected behaviour would be that the actionButton triggers an introduction that corresponds to the elements defined in the variable 'steps'.

---

title: "IntroJS Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    social: menu
    source_code: embed
    runtime: shiny
---

```{r setup, include=FALSE}

library(devtools)
library(flexdashboard)
library(shiny)
library(jsonlite)
library(data.table)


# create help data table
steps <- data.table(step = c(1, 2), element = paste0('#step', c(1, 2)), intro = paste0('text step ', c(1, 2)), position = 'bottom')

# set help content
session$sendCustomMessage(type = 'setHelpContent', message = list(steps = toJSON(steps) ))

# listen to the action button
observeEvent(input$help,{

  # on click, send custom message to start help
  session$sendCustomMessage(type = 'startHelp', message = list(""))

})

# Include IntroJS styling
includeCSS("introjs.min.css")

# Include IntroJS library
includeScript("intro.min.js")

# Include IntroJS styling
includeCSS("app.js")


```

### Intro Elements

```{r}

fluidRow(
     column(4, div(id="step1", class="well", "element1")),
     column(4, div(id="step2", class="well", "element2")),
     column(4, div(id="step3", class="well", "element3"))
)

fluidRow(
     column(4, div(id="step4", class="well", "element4")),
     column(4, div(id="step5", class="well", "element5")),
     column(4, div(id="step6", class="well", "element6"))
)


```

### actionButton

```{r}

# action button
actionButton(inputId="help", label="start", class="btn-success")


```