@aslaluroba/help-center-react 3.0.11 → 3.0.12
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 +59 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -54,12 +54,15 @@ initializeHelpCenter({
|
|
|
54
54
|
|
|
55
55
|
### HelpCenter Component
|
|
56
56
|
|
|
57
|
-
| Prop
|
|
58
|
-
|
|
|
59
|
-
| `helpScreenId`
|
|
60
|
-
| `showArrow`
|
|
61
|
-
| `messageLabel`
|
|
62
|
-
| `language`
|
|
57
|
+
| Prop | Type | Required | Description |
|
|
58
|
+
| ---------------- | -------- | -------- | ---------------------------------------------------------- |
|
|
59
|
+
| `helpScreenId` | string | Yes | Unique identifier for the help screen configuration |
|
|
60
|
+
| `showArrow` | boolean | No | Whether to show the floating arrow message (default: true) |
|
|
61
|
+
| `messageLabel` | string | No | Custom message for the floating arrow |
|
|
62
|
+
| `language` | ar or en | No | The used locale (default: en) |
|
|
63
|
+
| `primaryColor` | string | No | Custom primary color for theming (hex color) |
|
|
64
|
+
| `secondaryColor` | string | No | Custom secondary color for theming (hex color) |
|
|
65
|
+
| `logoUrl` | string | No | Custom logo URL to replace the default BabylAI logo |
|
|
63
66
|
|
|
64
67
|
## Features
|
|
65
68
|
|
|
@@ -67,7 +70,7 @@ initializeHelpCenter({
|
|
|
67
70
|
- 👥 Human agent escalation
|
|
68
71
|
- 💬 Real-time messaging
|
|
69
72
|
- 📱 Responsive design
|
|
70
|
-
- 🎨 Customizable
|
|
73
|
+
- 🎨 Customizable theming and branding
|
|
71
74
|
- 🔒 Secure authentication
|
|
72
75
|
- 🌐 Multi-language support
|
|
73
76
|
|
|
@@ -77,7 +80,7 @@ initializeHelpCenter({
|
|
|
77
80
|
|
|
78
81
|
```jsx
|
|
79
82
|
import '@aslaluroba/help-center-react/style.css'
|
|
80
|
-
import { HelpCenter } from '@babylai/help-center'
|
|
83
|
+
import { HelpCenter } from '@babylai/help-center-react'
|
|
81
84
|
|
|
82
85
|
function App() {
|
|
83
86
|
return <HelpCenter helpScreenId="your-help-screen-id" />;
|
|
@@ -88,7 +91,7 @@ function App() {
|
|
|
88
91
|
|
|
89
92
|
```jsx
|
|
90
93
|
import '@aslaluroba/help-center-react/style.css'
|
|
91
|
-
import { HelpCenter } from '@babylai/help-center'
|
|
94
|
+
import { HelpCenter } from '@babylai/help-center-react'
|
|
92
95
|
|
|
93
96
|
function App() {
|
|
94
97
|
return (
|
|
@@ -101,23 +104,58 @@ function App() {
|
|
|
101
104
|
}
|
|
102
105
|
```
|
|
103
106
|
|
|
104
|
-
|
|
107
|
+
### With Custom Theming and Branding
|
|
105
108
|
|
|
106
|
-
|
|
109
|
+
```jsx
|
|
110
|
+
import '@aslaluroba/help-center-react/style.css'
|
|
111
|
+
import { HelpCenter } from '@babylai/help-center-react'
|
|
107
112
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
113
|
+
function App() {
|
|
114
|
+
return (
|
|
115
|
+
<HelpCenter
|
|
116
|
+
helpScreenId="your-help-screen-id"
|
|
117
|
+
primaryColor="#FF6B6B"
|
|
118
|
+
logoUrl="https://your-domain.com/logo.png"
|
|
119
|
+
messageLabel="Need assistance?"
|
|
120
|
+
language="en"
|
|
121
|
+
/>
|
|
122
|
+
);
|
|
117
123
|
}
|
|
118
|
-
/* ... other classes available in the CSS files */
|
|
119
124
|
```
|
|
120
125
|
|
|
126
|
+
## Theming and Customization
|
|
127
|
+
|
|
128
|
+
### Dynamic Color Theming
|
|
129
|
+
|
|
130
|
+
The widget supports dynamic theming through props. When you provide `primaryColor` the widget automatically generates a complete color palette with different shades:
|
|
131
|
+
|
|
132
|
+
```jsx
|
|
133
|
+
<HelpCenter
|
|
134
|
+
helpScreenId="your-help-screen-id"
|
|
135
|
+
primaryColor="#AD49E1" // Your brand primary color
|
|
136
|
+
/>
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
The theming system automatically creates:
|
|
140
|
+
- **Primary Color Scale**: 100, 200, 300, 400, 500 (base), 600, 700, 800, 900, 950
|
|
141
|
+
- **CSS Custom Properties**: Available as `--babylai-primary-color-*`
|
|
142
|
+
|
|
143
|
+
### Custom Logo
|
|
144
|
+
|
|
145
|
+
Replace the default BabylAI logo with your own:
|
|
146
|
+
|
|
147
|
+
```jsx
|
|
148
|
+
<HelpCenter
|
|
149
|
+
helpScreenId="your-help-screen-id"
|
|
150
|
+
logoUrl="https://your-domain.com/logo.png"
|
|
151
|
+
/>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
**Logo Requirements:**
|
|
155
|
+
- Recommended size: 40x40px
|
|
156
|
+
- Supported formats: PNG, JPG, SVG
|
|
157
|
+
- Should work well on both light and dark backgrounds
|
|
158
|
+
|
|
121
159
|
## Events
|
|
122
160
|
|
|
123
161
|
The widget handles various events internally:
|
package/package.json
CHANGED