guideagent 0.1.4 → 0.1.5
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 +119 -48
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,42 +1,55 @@
|
|
|
1
|
-
🧭 GuideAgent
|
|
2
|
-
✨ Why GuideAgent?
|
|
1
|
+
# 🧭 GuideAgent
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
<p align="center">
|
|
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>
|
|
5
7
|
|
|
6
|
-
|
|
8
|
+
<p align="center">
|
|
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>
|
|
7
14
|
|
|
8
|
-
|
|
15
|
+
---
|
|
9
16
|
|
|
10
|
-
|
|
17
|
+
## ✨ Features
|
|
11
18
|
|
|
12
|
-
|
|
19
|
+
* 🧭 Step-by-step guided tours
|
|
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
|
|
13
25
|
|
|
14
|
-
|
|
26
|
+
---
|
|
15
27
|
|
|
16
|
-
|
|
28
|
+
## ⚙️ Installation
|
|
17
29
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
⚡ Lightweight & fast
|
|
30
|
+
```bash
|
|
31
|
+
npm install guideagent
|
|
32
|
+
```
|
|
23
33
|
|
|
24
|
-
|
|
34
|
+
---
|
|
25
35
|
|
|
26
|
-
|
|
36
|
+
## 🚀 Usage
|
|
27
37
|
|
|
28
|
-
|
|
38
|
+
### React / Next.js
|
|
29
39
|
|
|
30
|
-
|
|
31
|
-
npm install guideagent
|
|
32
|
-
🚀 Usage
|
|
33
|
-
React / Next.js
|
|
40
|
+
```jsx
|
|
34
41
|
import GuideAgent from 'guideagent'
|
|
35
42
|
|
|
36
43
|
setTimeout(() => {
|
|
37
44
|
GuideAgent.initFromUrl('/guide.json')
|
|
38
45
|
}, 800)
|
|
39
|
-
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
### Vue.js
|
|
51
|
+
|
|
52
|
+
```js
|
|
40
53
|
import GuideAgent from 'guideagent'
|
|
41
54
|
|
|
42
55
|
app.mount('#app')
|
|
@@ -44,7 +57,13 @@ app.mount('#app')
|
|
|
44
57
|
setTimeout(() => {
|
|
45
58
|
GuideAgent.initFromUrl('/guide.json')
|
|
46
59
|
}, 800)
|
|
47
|
-
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
### Angular
|
|
65
|
+
|
|
66
|
+
```ts
|
|
48
67
|
import GuideAgent from 'guideagent'
|
|
49
68
|
|
|
50
69
|
platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
|
|
@@ -52,17 +71,37 @@ platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
|
|
|
52
71
|
GuideAgent.initFromUrl('/guide.json')
|
|
53
72
|
}, 800)
|
|
54
73
|
})
|
|
55
|
-
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
### Plain HTML (No Install)
|
|
79
|
+
|
|
80
|
+
```html
|
|
56
81
|
<script type="module">
|
|
57
82
|
import GuideAgent from 'https://unpkg.com/guideagent/dist/index.mjs'
|
|
58
83
|
await GuideAgent.initFromUrl('./guide.json')
|
|
59
84
|
</script>
|
|
60
|
-
|
|
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
|
|
61
94
|
<header data-guide-id="navbar"></header>
|
|
62
95
|
<section data-guide-id="hero"></section>
|
|
63
96
|
<div data-guide-id="features"></div>
|
|
64
97
|
<section data-guide-id="contact"></section>
|
|
65
|
-
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## 📄 Step 3 — Create guide.json
|
|
103
|
+
|
|
104
|
+
```json
|
|
66
105
|
{
|
|
67
106
|
"page": "home",
|
|
68
107
|
"steps": [
|
|
@@ -86,24 +125,51 @@ Plain HTML (No Install)
|
|
|
86
125
|
}
|
|
87
126
|
]
|
|
88
127
|
}
|
|
89
|
-
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## 🎯 Selector Options
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<!-- Recommended -->
|
|
90
136
|
<div data-guide-id="dashboard"></div>
|
|
137
|
+
|
|
138
|
+
<!-- ID selector -->
|
|
91
139
|
<div id="dashboard"></div>
|
|
140
|
+
|
|
141
|
+
<!-- Class selector -->
|
|
92
142
|
<div class="hero-section"></div>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## 📚 API Reference
|
|
148
|
+
|
|
149
|
+
| Method | Description |
|
|
150
|
+
| --------------------------------------- | -------------------- |
|
|
151
|
+
| `GuideAgent.initFromUrl('/guide.json')` | Load guide from JSON |
|
|
152
|
+
| `GuideAgent.init({ steps })` | Load guide from JS |
|
|
153
|
+
| `GuideAgent.start()` | Start guide manually |
|
|
154
|
+
| `GuideAgent.stop()` | Stop guide |
|
|
155
|
+
| `GuideAgent.setLang('ta')` | Change language |
|
|
156
|
+
| `GuideAgent.getStrings()` | Get current strings |
|
|
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
|
+
```
|
|
107
173
|
Page Load
|
|
108
174
|
↓
|
|
109
175
|
Welcome Popup (first visit)
|
|
@@ -112,18 +178,23 @@ Start Guide / Maybe Later
|
|
|
112
178
|
↓
|
|
113
179
|
Guide Runs
|
|
114
180
|
↓
|
|
115
|
-
Floating Button
|
|
181
|
+
Floating Button (bottom-right)
|
|
116
182
|
↓
|
|
117
|
-
Stop Anytime
|
|
118
|
-
|
|
183
|
+
Stop Anytime (top-right ✕)
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
## 📦 NPM Package
|
|
119
189
|
|
|
120
190
|
👉 https://www.npmjs.com/package/guideagent
|
|
121
191
|
|
|
122
|
-
|
|
192
|
+
---
|
|
123
193
|
|
|
124
|
-
|
|
194
|
+
## 💡 Author
|
|
125
195
|
|
|
196
|
+
Built with ❤️ for better onboarding experiences
|
|
126
197
|
|
|
127
|
-
## 🔴 Live Demo
|
|
128
198
|
|
|
129
|
-
|
|
199
|
+
<P>IMPLEMENTED GUDIE AGENT IN PORTFOLIO (DEMO ❤️)</P>
|
|
200
|
+
<a href="https://raghulportfolio.hub29.online">📦 PORTFOLO </a>
|
package/package.json
CHANGED