guideagent 0.1.3 → 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 +49 -116
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,55 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
🧭 GuideAgent
|
|
2
|
+
✨ Why GuideAgent?
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
<b>Lightweight user onboarding & product tour library for modern web apps</b><br/>
|
|
5
|
-
Guide users step-by-step with multi-language support.
|
|
6
|
-
</p>
|
|
4
|
+
Most web applications are hard to understand for first-time users.
|
|
7
5
|
|
|
8
|
-
|
|
9
|
-
<a href="https://www.npmjs.com/package/guideagent">📦 NPM</a> •
|
|
10
|
-
<a href="#installation">⚙️ Installation</a> •
|
|
11
|
-
<a href="#usage">🚀 Usage</a> •
|
|
12
|
-
<a href="#api-reference">📚 API</a>
|
|
13
|
-
</p>
|
|
6
|
+
GuideAgent solves this by:
|
|
14
7
|
|
|
15
|
-
|
|
8
|
+
Highlighting important UI elements
|
|
16
9
|
|
|
17
|
-
|
|
10
|
+
Explaining features step-by-step
|
|
18
11
|
|
|
19
|
-
|
|
20
|
-
* 🌐 Multi-language support (English, Tamil, Hindi)
|
|
21
|
-
* ⚡ Lightweight & fast
|
|
22
|
-
* 🧩 Works with React, Vue, Angular, or plain HTML
|
|
23
|
-
* 🎯 Flexible selector targeting
|
|
24
|
-
* 🔄 Auto start on first visit
|
|
12
|
+
Supporting multiple languages out of the box
|
|
25
13
|
|
|
26
|
-
|
|
14
|
+
👉 Perfect for dashboards, admin panels, SaaS tools, and portfolios.
|
|
27
15
|
|
|
28
|
-
|
|
16
|
+
✨ Features
|
|
29
17
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
18
|
+
🧭 Step-by-step guided tours
|
|
19
|
+
|
|
20
|
+
🌐 Multi-language support (English, Tamil, Hindi)
|
|
21
|
+
|
|
22
|
+
⚡ Lightweight & fast
|
|
33
23
|
|
|
34
|
-
|
|
24
|
+
🧩 Works with React, Vue, Angular, or plain HTML
|
|
35
25
|
|
|
36
|
-
|
|
26
|
+
🎯 Flexible selector targeting
|
|
37
27
|
|
|
38
|
-
|
|
28
|
+
🔄 Auto start on first visit
|
|
39
29
|
|
|
40
|
-
|
|
30
|
+
⚙️ Installation
|
|
31
|
+
npm install guideagent
|
|
32
|
+
🚀 Usage
|
|
33
|
+
React / Next.js
|
|
41
34
|
import GuideAgent from 'guideagent'
|
|
42
35
|
|
|
43
36
|
setTimeout(() => {
|
|
44
37
|
GuideAgent.initFromUrl('/guide.json')
|
|
45
38
|
}, 800)
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
---
|
|
49
|
-
|
|
50
|
-
### Vue.js
|
|
51
|
-
|
|
52
|
-
```js
|
|
39
|
+
Vue.js
|
|
53
40
|
import GuideAgent from 'guideagent'
|
|
54
41
|
|
|
55
42
|
app.mount('#app')
|
|
@@ -57,13 +44,7 @@ app.mount('#app')
|
|
|
57
44
|
setTimeout(() => {
|
|
58
45
|
GuideAgent.initFromUrl('/guide.json')
|
|
59
46
|
}, 800)
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
---
|
|
63
|
-
|
|
64
|
-
### Angular
|
|
65
|
-
|
|
66
|
-
```ts
|
|
47
|
+
Angular
|
|
67
48
|
import GuideAgent from 'guideagent'
|
|
68
49
|
|
|
69
50
|
platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
|
|
@@ -71,37 +52,17 @@ platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
|
|
|
71
52
|
GuideAgent.initFromUrl('/guide.json')
|
|
72
53
|
}, 800)
|
|
73
54
|
})
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
---
|
|
77
|
-
|
|
78
|
-
### Plain HTML (No Install)
|
|
79
|
-
|
|
80
|
-
```html
|
|
55
|
+
Plain HTML (No Install)
|
|
81
56
|
<script type="module">
|
|
82
57
|
import GuideAgent from 'https://unpkg.com/guideagent/dist/index.mjs'
|
|
83
58
|
await GuideAgent.initFromUrl('./guide.json')
|
|
84
59
|
</script>
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
---
|
|
88
|
-
|
|
89
|
-
## 🧩 Step 2 — Add Guide Targets
|
|
90
|
-
|
|
91
|
-
Add `data-guide-id` to elements you want to highlight:
|
|
92
|
-
|
|
93
|
-
```html
|
|
60
|
+
🧩 Step 2 — Add Guide Targets
|
|
94
61
|
<header data-guide-id="navbar"></header>
|
|
95
62
|
<section data-guide-id="hero"></section>
|
|
96
63
|
<div data-guide-id="features"></div>
|
|
97
64
|
<section data-guide-id="contact"></section>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
---
|
|
101
|
-
|
|
102
|
-
## 📄 Step 3 — Create guide.json
|
|
103
|
-
|
|
104
|
-
```json
|
|
65
|
+
📄 Step 3 — Create guide.json
|
|
105
66
|
{
|
|
106
67
|
"page": "home",
|
|
107
68
|
"steps": [
|
|
@@ -125,51 +86,24 @@ Add `data-guide-id` to elements you want to highlight:
|
|
|
125
86
|
}
|
|
126
87
|
]
|
|
127
88
|
}
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
---
|
|
131
|
-
|
|
132
|
-
## 🎯 Selector Options
|
|
133
|
-
|
|
134
|
-
```html
|
|
135
|
-
<!-- Recommended -->
|
|
89
|
+
🎯 Selector Options
|
|
136
90
|
<div data-guide-id="dashboard"></div>
|
|
137
|
-
|
|
138
|
-
<!-- ID selector -->
|
|
139
91
|
<div id="dashboard"></div>
|
|
140
|
-
|
|
141
|
-
<!-- Class selector -->
|
|
142
92
|
<div class="hero-section"></div>
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
---
|
|
159
|
-
|
|
160
|
-
## 🌐 Supported Languages
|
|
161
|
-
|
|
162
|
-
| Code | Language |
|
|
163
|
-
| ---- | -------- |
|
|
164
|
-
| en | English |
|
|
165
|
-
| ta | Tamil |
|
|
166
|
-
| hi | Hindi |
|
|
167
|
-
|
|
168
|
-
---
|
|
169
|
-
|
|
170
|
-
## ⚡ How It Works
|
|
171
|
-
|
|
172
|
-
```
|
|
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
|
|
173
107
|
Page Load
|
|
174
108
|
↓
|
|
175
109
|
Welcome Popup (first visit)
|
|
@@ -178,19 +112,18 @@ Start Guide / Maybe Later
|
|
|
178
112
|
↓
|
|
179
113
|
Guide Runs
|
|
180
114
|
↓
|
|
181
|
-
Floating Button
|
|
115
|
+
Floating Button
|
|
182
116
|
↓
|
|
183
|
-
Stop Anytime
|
|
184
|
-
|
|
117
|
+
Stop Anytime
|
|
118
|
+
📦 NPM Package
|
|
185
119
|
|
|
186
|
-
|
|
120
|
+
👉 https://www.npmjs.com/package/guideagent
|
|
187
121
|
|
|
188
|
-
|
|
122
|
+
💡 Author
|
|
189
123
|
|
|
190
|
-
|
|
124
|
+
Built with ❤️ to simplify user onboarding in modern web applications.
|
|
191
125
|
|
|
192
|
-
---
|
|
193
126
|
|
|
194
|
-
##
|
|
127
|
+
## 🔴 Live Demo
|
|
195
128
|
|
|
196
|
-
|
|
129
|
+
👉 https://raghulportfolio.hub29.online
|
package/package.json
CHANGED