You create a tutorial in the manifest. You can configure it so that it opens the first time a user drags your element to the page. Otherwise, the tutorial is accessed from a Tutorial button in the settings dialog. Tutorial topics can be either stepped content or embedded videos, and you can nest one level of up to 8 topics.

Use the following properties to create your tutorial in the manifest:

  • tutorial: Property used to group the tutorial content. This is placed at the same level as the settings property.
  • label: Required when nesting topics, this is the name of the nested topic. It displays as the title in the parent topic. Use only for nested topics.
  • introduction: The text that appears at the top of the dialog. If you are nesting topics, each has its own introduction.
  • type: The type of content in this topic. Valid values are:
    • steps: Creates a numbered procedure list.
    • video: Embeds a YouTube video.
    • topics: Denotes this as the parent topic to nested child topics
  • content: Holds the actual content to display. Valid values depend on the type.
    • steps: An array of strings, one for each step. The maximum number of steps is 5.
    • video: Enter the YouTube ID as a string (for example, as29f83)
  • autopop: Set to true to have the tutorial automatically open the first time the user drags the element onto the page. The default is false. If you also set autopop=true on your element, the tutorial opens first and then the settings dialog.

​Here’s an example of a tutorial consisting of one stepped topic:

"tutorial": {
    "introduction": "The price chart is a simple way to visually compare different plans with their features and prices.",
    "type": "steps",
    "content": [
                    "Choose the number of plans you would like. Each plan will add a new column to the chart.",
                    "Choose the number of features for each plan. Each feature will add a row to the chart.",
                    "Modify the currency setting to ensure the price of each plan is in the correct currency.",
                    "Fill out each plan's name, price, and list of features.",
                    "Choose where to put your sign up button. It can be place at the end of the features list or at the top with the plan's price.",
                ],
    "autopop": true
}
. . .

You create more than one topic by nesting an array of topics as content for the parent, being sure to set the parent to type=topics. Use the label property for each child topic to set the title bar of the dialog. You can have a maximum of 8 nested topics.

​Here’s a tutorial with nested topics - the first one is a stepped topic and the second is a video.


"tutorial": {
    "introduction": "The price chart is a simple way to visually compare different plans with their features and prices.",
    "type": "topics",
    "content": [
        {
            "label": "Setup instructions",
            "introduction": "Follow these simple steps to help you get started!",
            "type": "steps",
            "content": [
                "Choose the number of plans you would like. Each plan will add a new column to the chart.",
                "Choose the number of features for each plan. Each feature will add a row to the chart.",
                "Modify the currency setting to ensure the price of each plan is in the correct currency.",
                "Fill out each plan's name, price, and list of features.",
                "Choose where to put your sign up button. It can be place at the end of the features list or at the top with the plan's price.",
            ]
        },
        {
            "label": "Build an online store",
            "introduction": "View an in-depth webinar about building an online store with Weebly.",
            "type": "video",
            "content": "6clKBa8x1qk"
        }
    ],
    "autopop": true
}

Help make these docs better!