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
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
trueto 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=trueon your element, the tutorial opens first and then the settings dialog.
Here’s an example of a tutorial consisting of one stepped topic:
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.