Step 1

Step 2

Step 3

Step 4

Visualizer
{ "value": "tour.inactive", "previousValue": "", "event": { "type": "machine.init" }, "previousEvent": {}, "context": { "stepId": null, "preventInteraction": true, "closeOnInteractOutside": true, "closeOnEscape": true, "keyboardNavigation": true, "spotlightOffset": { "x": 10, "y": 10 }, "spotlightRadius": 4, "translations": { "nextStep": "next step", "prevStep": "previous step", "close": "close tour", "skip": "skip tour" }, "id": ":R1m:", "resolvedTarget": { "value": null }, "targetRect": { "width": 0, "height": 0, "x": 0, "y": 0 }, "boundarySize": { "width": 1280, "height": 1505 }, "stepIndex": -1, "step": null, "hasNextStep": true, "hasPrevStep": false, "isFirstStep": false, "isLastStep": false, "closeOnEsc": true }, "done": false, "tags": [ "closed" ], "nextEvents": [ "START", "STEPS.SET", "STEP.SET", "STEP.NEXT", "STEP.PREV", "STEP.CHANGED", "DISMISS" ], "changed": false }