Guides Configuration

Guides are the core of NavigateMe. They define what to show, where to navigate, and how users interact.

🚀 Basic Structure

const guides = [
  {
    id: "guide-id",
    type: "navigate",
    title: "Guide Title",
    steps: []
  }
];

window.navigateme_guides = guides;

🧩 Guide Object

`id` (required)

Unique identifier

id: "create-rental"

`type` (required)

`title` (optional)

Displayed in UI

title: "Create Rental"

`hide` (optional)

hide: true

Prevents auto-trigger

`steps` (required)

Array of step objects

🧭 Step Object (Navigate)

`selector`

Target element

selector: "button:contains(Create)"

Supports:

• CSS selectors
• Extended selectors (`:contains`, `:exact`, `:nth`, `:last`)

`showMessage`

showMessage: "Click here to begin"

`wait`

Delay in milliseconds

wait: 2000

`proceedOn`

Wait for user action

proceedOn: "button:contains(Save):exact"

`mousedown`

mousedown: true

Triggers mousedown instead of click

🧠 Splash Guides

Used for onboarding flows

{
  id: "onboarding",
  type: "splash",
  steps: [
    {
      question: "What are you renting?",
      name: "type",
      options: [
        { val: "vehicles", label: "Vehicles" }
      ]
    }
  ]
}

Fields

• `question`
• `name`
• `options[]`
  • `val`
  • `label`
  • `icon` (optional)

📊 Survey Guides

Used for feedback

{
  id: "feedback",
  type: "survey",
  steps: [
    {
      question: "Rate your experience",
      type: "star",
      scale: 5
    }
  ]
}

Survey Types

• `numeric`
• `star`
• `review`

⚡ Real Example

const guides = [
  {
    id: "create-rental",
    type: "navigate",
    title: "Create Rental",
    steps: [
      {
        selector: "button:contains(Create)",
        showMessage: "Start here"
      },
      {
        showMessage: "Fill the form",
        proceedOn: "button:contains(Save):exact"
      }
    ]
  }
];

🎯 Best Practices

• Keep guides short (5–8 steps)
• Use `showMessage` to guide intent
• Use `proceedOn` for form flows
• Avoid overusing `wait`
• Prefer stable selectors

🚀 Summary

• Guides = flows
• Steps = actions
• Selectors = targeting

That’s your system.