guideagent 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +129 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,129 @@
|
|
|
1
|
-
|
|
1
|
+
🧭 GuideAgent
|
|
2
|
+
✨ Why GuideAgent?
|
|
3
|
+
|
|
4
|
+
Most web applications are hard to understand for first-time users.
|
|
5
|
+
|
|
6
|
+
GuideAgent solves this by:
|
|
7
|
+
|
|
8
|
+
Highlighting important UI elements
|
|
9
|
+
|
|
10
|
+
Explaining features step-by-step
|
|
11
|
+
|
|
12
|
+
Supporting multiple languages out of the box
|
|
13
|
+
|
|
14
|
+
👉 Perfect for dashboards, admin panels, SaaS tools, and portfolios.
|
|
15
|
+
|
|
16
|
+
✨ Features
|
|
17
|
+
|
|
18
|
+
🧭 Step-by-step guided tours
|
|
19
|
+
|
|
20
|
+
🌐 Multi-language support (English, Tamil, Hindi)
|
|
21
|
+
|
|
22
|
+
⚡ Lightweight & fast
|
|
23
|
+
|
|
24
|
+
🧩 Works with React, Vue, Angular, or plain HTML
|
|
25
|
+
|
|
26
|
+
🎯 Flexible selector targeting
|
|
27
|
+
|
|
28
|
+
🔄 Auto start on first visit
|
|
29
|
+
|
|
30
|
+
⚙️ Installation
|
|
31
|
+
npm install guideagent
|
|
32
|
+
🚀 Usage
|
|
33
|
+
React / Next.js
|
|
34
|
+
import GuideAgent from 'guideagent'
|
|
35
|
+
|
|
36
|
+
setTimeout(() => {
|
|
37
|
+
GuideAgent.initFromUrl('/guide.json')
|
|
38
|
+
}, 800)
|
|
39
|
+
Vue.js
|
|
40
|
+
import GuideAgent from 'guideagent'
|
|
41
|
+
|
|
42
|
+
app.mount('#app')
|
|
43
|
+
|
|
44
|
+
setTimeout(() => {
|
|
45
|
+
GuideAgent.initFromUrl('/guide.json')
|
|
46
|
+
}, 800)
|
|
47
|
+
Angular
|
|
48
|
+
import GuideAgent from 'guideagent'
|
|
49
|
+
|
|
50
|
+
platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
|
|
51
|
+
setTimeout(() => {
|
|
52
|
+
GuideAgent.initFromUrl('/guide.json')
|
|
53
|
+
}, 800)
|
|
54
|
+
})
|
|
55
|
+
Plain HTML (No Install)
|
|
56
|
+
<script type="module">
|
|
57
|
+
import GuideAgent from 'https://unpkg.com/guideagent/dist/index.mjs'
|
|
58
|
+
await GuideAgent.initFromUrl('./guide.json')
|
|
59
|
+
</script>
|
|
60
|
+
🧩 Step 2 — Add Guide Targets
|
|
61
|
+
<header data-guide-id="navbar"></header>
|
|
62
|
+
<section data-guide-id="hero"></section>
|
|
63
|
+
<div data-guide-id="features"></div>
|
|
64
|
+
<section data-guide-id="contact"></section>
|
|
65
|
+
📄 Step 3 — Create guide.json
|
|
66
|
+
{
|
|
67
|
+
"page": "home",
|
|
68
|
+
"steps": [
|
|
69
|
+
{
|
|
70
|
+
"selector": "[data-guide-id='hero']",
|
|
71
|
+
"order": 1,
|
|
72
|
+
"translations": {
|
|
73
|
+
"en": {
|
|
74
|
+
"title": "Welcome!",
|
|
75
|
+
"description": "Let me walk you through this app."
|
|
76
|
+
},
|
|
77
|
+
"ta": {
|
|
78
|
+
"title": "Vanakkam!",
|
|
79
|
+
"description": "Ithai pathi kaattukirein."
|
|
80
|
+
},
|
|
81
|
+
"hi": {
|
|
82
|
+
"title": "Swagat!",
|
|
83
|
+
"description": "Main aapko guide karunga."
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
🎯 Selector Options
|
|
90
|
+
<div data-guide-id="dashboard"></div>
|
|
91
|
+
<div id="dashboard"></div>
|
|
92
|
+
<div class="hero-section"></div>
|
|
93
|
+
📚 API Reference
|
|
94
|
+
Method Description
|
|
95
|
+
GuideAgent.initFromUrl('/guide.json') Load guide from JSON
|
|
96
|
+
GuideAgent.init({ steps }) Load guide from JS
|
|
97
|
+
GuideAgent.start() Start guide manually
|
|
98
|
+
GuideAgent.stop() Stop guide
|
|
99
|
+
GuideAgent.setLang('ta') Change language
|
|
100
|
+
GuideAgent.getStrings() Get current strings
|
|
101
|
+
🌐 Supported Languages
|
|
102
|
+
Code Language
|
|
103
|
+
en English
|
|
104
|
+
ta Tamil
|
|
105
|
+
hi Hindi
|
|
106
|
+
⚡ How It Works
|
|
107
|
+
Page Load
|
|
108
|
+
↓
|
|
109
|
+
Welcome Popup (first visit)
|
|
110
|
+
↓
|
|
111
|
+
Start Guide / Maybe Later
|
|
112
|
+
↓
|
|
113
|
+
Guide Runs
|
|
114
|
+
↓
|
|
115
|
+
Floating Button
|
|
116
|
+
↓
|
|
117
|
+
Stop Anytime
|
|
118
|
+
📦 NPM Package
|
|
119
|
+
|
|
120
|
+
👉 https://www.npmjs.com/package/guideagent
|
|
121
|
+
|
|
122
|
+
💡 Author
|
|
123
|
+
|
|
124
|
+
Built with ❤️ to simplify user onboarding in modern web applications.
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
## 🔴 Live Demo
|
|
128
|
+
|
|
129
|
+
👉 https://raghulportfolio.hub29.online
|
package/package.json
CHANGED