1. Install the plugin in your Bubble app.
2. In Bubble, go to Settings > General and enable "Expose the option to add an ID attribute to HTML elements".

3. Add ID attributes to the Bubble elements you want User Onboarding Toolkit to target. Example IDs: nav_menu, create_button, profile_section, settings_panel, invite_button.

4. Create a workflow and add the plugin action: Plugins > Run User Onboarding Toolkit.

5. Set Mode to one of these values:
tour
checklist
command-palette
announcement
reset

6. Add a Toolkit ID if you want separate onboarding flows in the same app. If the action field is still named Hub ID in your plugin editor, use that field. Example: main-onboarding.

7. Paste a JSON config into Config JSON. Use the sample configs below as starting points.

8. Optional: set Primary color and Accent color to match your brand.

9. Preview your app and trigger the workflow. User Onboarding Toolkit will show the selected interaction on the page.

Tour example:
{
 "id": "welcome-tour",
 "remember": true,
 "steps": [
   {
     "target": "nav_menu",
     "title": "Navigate faster",
     "body": "Use the sidebar to move between key areas of the app.",
     "placement": "right"
   },
   {
     "target": "create_button",
     "title": "Create your first item",
     "body": "Point users to the main action that creates value.",
     "placement": "bottom"
   },
   {
     "target": "settings_panel",
     "title": "Finish setup",
     "body": "Guide users to account, profile, or workspace settings.",
     "placement": "top"
   }
 ]
}

Checklist example:
{
 "id": "launch-checklist",
 "title": "Launch checklist",
 "position": "bottom-right",
 "items": [
   {
     "id": "profile",
     "label": "Complete profile",
     "description": "Open the profile setup section.",
     "target": "profile_section"
   },
   {
     "id": "invite",
     "label": "Invite a teammate",
     "description": "Open the invite workflow.",
     "target": "invite_button"
   },
   {
     "id": "first-project",
     "label": "Create first project",
     "description": "Send users to the project builder.",
     "url": "/projects/new"
   }
 ]
}

Command palette example:
{
 "placeholder": "Search actions, pages, and workflows...",
 "commands": [
   {
     "id": "dashboard",
     "label": "Open dashboard",
     "description": "Go to the main dashboard.",
     "url": "/dashboard"
   },
   {
     "id": "new-project",
     "label": "Create project",
     "description": "Click the create button.",
     "selector": "create_button"
   },
   {
     "id": "settings",
     "label": "Account settings",
     "description": "Open account settings.",
     "url": "/settings"
   }
 ]
}

Announcement example:
{
 "id": "new-command-palette",
 "once": true,
 "kicker": "New feature",
 "title": "Command palette is live",
 "body": "Users can now jump to common pages and actions from one searchable menu.",
 "ctaLabel": "Try it",
 "ctaSelector": "open_palette_button"
}

Reset:
Use Mode reset with Config JSON {} to clear stored User Onboarding Toolkit state for the current Toolkit ID.