🧭 GuideAgent

Lightweight user onboarding & product tour library for modern web apps
Guide users step-by-step with multi-language support.

📦 NPM • ⚙️ Installation • 🚀 Usage • 📚 API

---

✨ Features

• 🧭 Step-by-step guided tours
• 🌐 Multi-language support (English, Tamil, Hindi)
• ⚡ Lightweight & fast
• 🧩 Works with React, Vue, Angular, or plain HTML
• 🎯 Flexible selector targeting
• 🔄 Auto start on first visit

---

⚙️ Installation

npm install guideagent

---

🚀 Usage

React / Next.js

import GuideAgent from 'guideagent'

setTimeout(() => {
  GuideAgent.initFromUrl('/guide.json')
}, 800)

---

Vue.js

import GuideAgent from 'guideagent'

app.mount('#app')

setTimeout(() => {
  GuideAgent.initFromUrl('/guide.json')
}, 800)

---

Angular

import GuideAgent from 'guideagent'

platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
  setTimeout(() => {
    GuideAgent.initFromUrl('/guide.json')
  }, 800)
})

---

Plain HTML (No Install)

<script type="module">
  import GuideAgent from 'https://unpkg.com/guideagent/dist/index.mjs'
  await GuideAgent.initFromUrl('./guide.json')
</script>

---

🧩 Step 2 — Add Guide Targets

Add data-guide-id to elements you want to highlight:

<header data-guide-id="navbar"></header>
<section data-guide-id="hero"></section>
<div data-guide-id="features"></div>
<section data-guide-id="contact"></section>

---

📄 Step 3 — Create guide.json

{
  "page": "home",
  "steps": [
    {
      "selector": "[data-guide-id='hero']",
      "order": 1,
      "translations": {
        "en": {
          "title": "Welcome!",
          "description": "Let me walk you through this app."
        },
        "ta": {
          "title": "Vanakkam!",
          "description": "Ithai pathi kaattukirein."
        },
        "hi": {
          "title": "Swagat!",
          "description": "Main aapko guide karunga."
        }
      }
    }
  ]
}

---

🎯 Selector Options

<!-- Recommended -->
<div data-guide-id="dashboard"></div>

<!-- ID selector -->
<div id="dashboard"></div>

<!-- Class selector -->
<div class="hero-section"></div>

---

📚 API Reference

Method	Description
GuideAgent.initFromUrl('/guide.json')	Load guide from JSON
GuideAgent.init({ steps })	Load guide from JS
GuideAgent.start()	Start guide manually
GuideAgent.stop()	Stop guide
GuideAgent.setLang('ta')	Change language
GuideAgent.getStrings()	Get current strings

---

🌐 Supported Languages

Code	Language
en	English
ta	Tamil
hi	Hindi

---

⚡ How It Works

Page Load
   ↓
Welcome Popup (first visit)
   ↓
Start Guide / Maybe Later
   ↓
Guide Runs
   ↓
Floating Button (bottom-right)
   ↓
Stop Anytime (top-right ✕)

---

📦 NPM Package

👉 https://www.npmjs.com/package/guideagent

---

💡 Author

Built with ❤️ for better onboarding experiences

IMPLEMENTED GUDIE AGENT IN PORTFOLIO (DEMO ❤️)

📦 PORTFOLO