How to :: add tutorials

Use toucan tutorials to enrich your user first time experience on the app.

You can create 2 types of tutorials:

  • on a chart
  • on the whole application

Tutorial for chart

The chart tutorial option allows to add a pop-up which overlays the chart and displays a text helping the user to understand how to read or use the chart.

tuto text

Note

For the moment this tutorial only accepts text messages

From the Chart parameters you can add a tutorial to your chart.

tuto parameters

The id allows to create versions. For example, if we change a tutorial slide and we want the user to see it, just change the id and the new tutorial will appear with the changes. So if the user has already dismissed the tutorial, the new tutorial will appear anyway.

The alwaysShow options is whether or not to always show the tutorial no matter how often the user has already seen it. USE WITH CAUTION.

Tutorial for small-app

Toucan tutorial can also be set up at your connection on the app.

Note

This is only available from the code mode and outside of the studio. From the Files menu, download your front_config.cson and configure the tutorials as below. Then drop your new front_config.cson file into the Files interface.

The tutorials appears the first time the user logs in the app, and disappears only after clicking on the button “start now”.

It can display images/gifs with an user-friendly interface while connecting to the app for the very first time.

tuto image

How it works?

Basically, you add images to the app to explain where to click and how to use the app.

The pop-up has as many slides (screenshots) as you defined.

The slides are swipeable with touch, mouse-scroll and keyboard arrows.

Tip

The images/gifs must be added in the assets interface with the following sizes :

  • phone: 320x568px | 375x667
  • tablet: 1024x768px
  • desktop: 1920x1080px

To take the screenshots you can use the ‘toggle device toolbar’ on the chrome inspector, and chose the device corresponding to the good size. To take some gif, you can use the chrome extension ‘Screencastify’.

Code sample

This should be at the same level as slides:[]

tuto code
tutorial:
  id: 1 # id of the tutorial to be able to republish a new tutorial. Bump it when updating the tutorial to force it to reappear
  slides: [
    {
      title: "your_title"
      explanation: "your_explanation_subtitle" # A little description of the image/gif
      assets: # you have to add 3 formats of each images/gif
        phone: "your_phone_asset" # size(width x height): 320x568px
        tablet: "your_tablet_asset" # size(width x height): 1024x768px
        desktop: "your_desktop_asset" # size(width x height): 1920x1080px
    }
  ]

Additional options:

  • 'skippable': true : Permit to display the start button on each slide.