guideagent 0.1.2 → 0.1.3
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 +196 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,196 @@
|
|
|
1
|
-
|
|
1
|
+
# 🧭 GuideAgent
|
|
2
|
+
|
|
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>
|
|
7
|
+
|
|
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>
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## ✨ Features
|
|
18
|
+
|
|
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
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## ⚙️ Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install guideagent
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## 🚀 Usage
|
|
37
|
+
|
|
38
|
+
### React / Next.js
|
|
39
|
+
|
|
40
|
+
```jsx
|
|
41
|
+
import GuideAgent from 'guideagent'
|
|
42
|
+
|
|
43
|
+
setTimeout(() => {
|
|
44
|
+
GuideAgent.initFromUrl('/guide.json')
|
|
45
|
+
}, 800)
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
---
|
|
49
|
+
|
|
50
|
+
### Vue.js
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
import GuideAgent from 'guideagent'
|
|
54
|
+
|
|
55
|
+
app.mount('#app')
|
|
56
|
+
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
GuideAgent.initFromUrl('/guide.json')
|
|
59
|
+
}, 800)
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
### Angular
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
import GuideAgent from 'guideagent'
|
|
68
|
+
|
|
69
|
+
platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
|
|
70
|
+
setTimeout(() => {
|
|
71
|
+
GuideAgent.initFromUrl('/guide.json')
|
|
72
|
+
}, 800)
|
|
73
|
+
})
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
78
|
+
### Plain HTML (No Install)
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<script type="module">
|
|
82
|
+
import GuideAgent from 'https://unpkg.com/guideagent/dist/index.mjs'
|
|
83
|
+
await GuideAgent.initFromUrl('./guide.json')
|
|
84
|
+
</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
|
|
94
|
+
<header data-guide-id="navbar"></header>
|
|
95
|
+
<section data-guide-id="hero"></section>
|
|
96
|
+
<div data-guide-id="features"></div>
|
|
97
|
+
<section data-guide-id="contact"></section>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
102
|
+
## 📄 Step 3 — Create guide.json
|
|
103
|
+
|
|
104
|
+
```json
|
|
105
|
+
{
|
|
106
|
+
"page": "home",
|
|
107
|
+
"steps": [
|
|
108
|
+
{
|
|
109
|
+
"selector": "[data-guide-id='hero']",
|
|
110
|
+
"order": 1,
|
|
111
|
+
"translations": {
|
|
112
|
+
"en": {
|
|
113
|
+
"title": "Welcome!",
|
|
114
|
+
"description": "Let me walk you through this app."
|
|
115
|
+
},
|
|
116
|
+
"ta": {
|
|
117
|
+
"title": "Vanakkam!",
|
|
118
|
+
"description": "Ithai pathi kaattukirein."
|
|
119
|
+
},
|
|
120
|
+
"hi": {
|
|
121
|
+
"title": "Swagat!",
|
|
122
|
+
"description": "Main aapko guide karunga."
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
---
|
|
131
|
+
|
|
132
|
+
## 🎯 Selector Options
|
|
133
|
+
|
|
134
|
+
```html
|
|
135
|
+
<!-- Recommended -->
|
|
136
|
+
<div data-guide-id="dashboard"></div>
|
|
137
|
+
|
|
138
|
+
<!-- ID selector -->
|
|
139
|
+
<div id="dashboard"></div>
|
|
140
|
+
|
|
141
|
+
<!-- Class selector -->
|
|
142
|
+
<div class="hero-section"></div>
|
|
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
|
+
```
|
|
173
|
+
Page Load
|
|
174
|
+
↓
|
|
175
|
+
Welcome Popup (first visit)
|
|
176
|
+
↓
|
|
177
|
+
Start Guide / Maybe Later
|
|
178
|
+
↓
|
|
179
|
+
Guide Runs
|
|
180
|
+
↓
|
|
181
|
+
Floating Button (bottom-right)
|
|
182
|
+
↓
|
|
183
|
+
Stop Anytime (top-right ✕)
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
---
|
|
187
|
+
|
|
188
|
+
## 📦 NPM Package
|
|
189
|
+
|
|
190
|
+
👉 https://www.npmjs.com/package/guideagent
|
|
191
|
+
|
|
192
|
+
---
|
|
193
|
+
|
|
194
|
+
## 💡 Author
|
|
195
|
+
|
|
196
|
+
Built with ❤️ for better onboarding experiences
|
package/package.json
CHANGED