Add a guided tour to a website

Adds a set of instructions that will guide a user through a process.

Usage

page_tutorials(..., button = "Tutorials", id = NULL, class = NULL,
  note = NULL)

Arguments

...

Lists specifying each tutorial, or a single list of such lists:

• name: Short name used for reference (as in links). Taken from the name of entries if omitted.

• title: Display title of the tutorial.

• description: A description of what the tutorial will do.

• steps (required): A list containing step specifications:

  • description: Text description to accompany the step.

  • focus: Query selector for the element to focus on (e.g., "#input_a").

  • option: Name (value) of an option in a dropdown menu to highlight.

  • before: A vector of actions to perform before showing the step, where names are of input elements, and values are either "click" to click on the element (mainly for elements with toggleable menus -- elements that do not accept a value will always be clicked), "reset" to reset the input, or a value to set the input to (e.g., c("input_a" = "a"). An unnamed actions or values will apply to the focus element. If focus or the named element has options and option is included, "set", will set those options. If a dialogue-like element is open, "close" will close it.

  • after: A vector of actions to perform after the step has advanced, before the next step starts (if any).

  • wait: Number of milliseconds to wait before starting the step. Useful to add time to allow loads or animations to finish; defaults to 400.

  • time: Number of seconds to wait before auto-advancing. If omitted, will not auto-advance.

  • disable_continue: Logical; if TRUE, will disable the continue button.

• reset: Logical; if TRUE, will reset the interface before starting the tutorial.

button

Text to show a button to show the tutorials listing menu, or FALSE to not create a button.

id

Unique ID of the button element to be created.

class

Additional class names to add to the button element.

note

Text to display as a tooltip for the button.

Value

A character vector of the content to be added.

Details

Tutorials take over control of the interface to walk the user through some process.

Examples

page_tutorials(
  use_menu = list(
    title = "Use Settings Menu",
    steps = list(
      list(
        description = "Click on the settings button.",
        focus = "#navbar_menu .nav-item:nth-child(3)",
        after = "click"
      ),
      list(
        description = "Locate setting A.",
        focus = "setting.a"
      )
    )
  )
)
#> [1] "<div class=\"wrapper button-wrapper\">"                                                                                        
#> [2] "<button type=\"button\" data-bs-toggle=\"modal\" data-bs-target=\"#community_tutorials_menu\" class=\"btn\">Tutorials</button>"
#> [3] "</div>"