@chatwillow/widget 0.0.4 → 0.0.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.
Files changed (7) hide show
  1. package/README.md +49 -55
  2. package/dist/chatwillow-widget.es.js +30011 -2501
  3. package/dist/chatwillow-widget.umd.js +262 -9
  4. package/dist/index.d.ts +2 -0
  5. package/dist/lib/apiClient.d.ts +51 -0
  6. package/dist/modules/ChatWidget/service/chatWidget.service.d.ts +2 -1
  7. package/package.json +1 -1
package/README.md CHANGED
@@ -20,6 +20,7 @@
20
20
  Install the package via your preferred package manager:
21
21
 
22
22
  ### Using Bun (Recommended)
23
+
23
24
  ```bash
24
25
  bun add @chatwillow/widget
25
26
  ```
@@ -52,18 +53,16 @@ You must import the CSS file **once** in your application (usually in `App.tsx`
52
53
 
53
54
  ```
54
55
  import React from 'react';
55
- import { ChatWillowWidget } from '@chatwillow/widget';
56
-
57
- // ⚠️ IMPORTANT: Import the styles!
58
- import '@chatwillow/widget/style.css';
56
+ import { ChatWillowWidget } from "@chatwillow/widget";
57
+ import "@chatwillow/widget/dist/style.css";
59
58
 
60
59
  function App() {
61
60
  return (
62
61
  <div className="App">
63
62
  <h1>My Application</h1>
64
-
63
+
65
64
  {/* Initialize the widget */}
66
- <ChatWillowWidget
65
+ <ChatWillowWidget
67
66
  apiKey="YOUR_API_KEY_HERE"
68
67
  theme="light"
69
68
  title="ChatWillow Support"
@@ -79,45 +78,46 @@ export default App;
79
78
 
80
79
  ### 2. CDN / HTML / Static Sites
81
80
 
82
- For usage in static HTML files or legacy applications without a bundler. Since the widget is built on React, you must load React and ReactDOM from a CDN first.
81
+ For usage in static HTML files or legacy applications. Even though it uses React under the hood, we provide a simple helper so you don't need to write React code.
83
82
 
84
- **HTML**
83
+ **HTML Example**
85
84
 
86
- ```
85
+ ```html
87
86
  <!DOCTYPE html>
88
87
  <html lang="en">
89
- <head>
90
- <meta charset="UTF-8">
91
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
92
- <title>ChatWillow CDN Example</title>
93
-
94
- <link rel="stylesheet" href="[https://unpkg.com/@chatwillow/widget@latest/dist/style.css](https://unpkg.com/@chatwillow/widget@latest/dist/style.css)">
95
- </head>
96
- <body>
97
-
88
+ <head>
89
+ <meta charset="UTF-8" />
90
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
91
+ <title>ChatWillow Widget</title>
92
+
93
+ <link
94
+ rel="stylesheet"
95
+ href="[https://unpkg.com/@chatwillow/widget@latest/dist/style.css](https://unpkg.com/@chatwillow/widget@latest/dist/style.css)"
96
+ />
97
+ </head>
98
+ <body>
98
99
  <div id="chatwillow-root"></div>
99
100
 
100
- <script crossorigin src="[https://unpkg.com/react@18/umd/react.production.min.js](https://unpkg.com/react@18/umd/react.production.min.js)"></script>
101
- <script crossorigin src="[https://unpkg.com/react-dom@18/umd/react-dom.production.min.js](https://unpkg.com/react-dom@18/umd/react-dom.production.min.js)"></script>
101
+ <script
102
+ crossorigin
103
+ src="[https://unpkg.com/react@18/umd/react.production.min.js](https://unpkg.com/react@18/umd/react.production.min.js)"
104
+ ></script>
105
+ <script
106
+ crossorigin
107
+ src="[https://unpkg.com/react-dom@18/umd/react-dom.production.min.js](https://unpkg.com/react-dom@18/umd/react-dom.production.min.js)"
108
+ ></script>
102
109
 
103
110
  <script src="[https://unpkg.com/@chatwillow/widget@latest/dist/chatwillow-widget.umd.js](https://unpkg.com/@chatwillow/widget@latest/dist/chatwillow-widget.umd.js)"></script>
104
111
 
105
112
  <script>
106
- document.addEventListener('DOMContentLoaded', () => {
107
- const container = document.getElementById('chatwillow-root');
108
- const root = ReactDOM.createRoot(container);
109
-
110
- // Access the component via the global "ChatWillow" variable
111
- const element = React.createElement(ChatWillow.ChatWillowWidget, {
112
- apiKey: "YOUR_API_KEY_HERE",
113
- theme: "dark",
114
- welcomeMessage: "Hello! How can we help you?"
115
- });
116
-
117
- root.render(element);
118
- });
113
+ // Simple initialization
114
+ ChatWillow.init({
115
+ apiKey: "YOUR_API_KEY_HERE",
116
+ theme: "dark",
117
+ title: "Customer Support",
118
+ });
119
119
  </script>
120
- </body>
120
+ </body>
121
121
  </html>
122
122
  ```
123
123
 
@@ -131,24 +131,20 @@ Integration with PHP (Laravel, CodeIgniter, or Native PHP) is identical to the C
131
131
 
132
132
  **PHP**
133
133
 
134
- ```
134
+ ```php
135
135
  <link rel="stylesheet" href="[https://unpkg.com/@chatwillow/widget@latest/dist/style.css](https://unpkg.com/@chatwillow/widget@latest/dist/style.css)">
136
136
 
137
- <div id="chatwillow-widget-container"></div>
138
-
139
137
  <script crossorigin src="[https://unpkg.com/react@18/umd/react.production.min.js](https://unpkg.com/react@18/umd/react.production.min.js)"></script>
140
138
  <script crossorigin src="[https://unpkg.com/react-dom@18/umd/react-dom.production.min.js](https://unpkg.com/react-dom@18/umd/react-dom.production.min.js)"></script>
141
139
  <script src="[https://unpkg.com/@chatwillow/widget@latest/dist/chatwillow-widget.umd.js](https://unpkg.com/@chatwillow/widget@latest/dist/chatwillow-widget.umd.js)"></script>
142
140
 
143
141
  <script>
144
- const container = document.getElementById('chatwillow-widget-container');
145
- const root = ReactDOM.createRoot(container);
146
-
147
- root.render(React.createElement(ChatWillow.ChatWillowWidget, {
148
- apiKey: "<?php echo getenv('CHATWILLOW_API_KEY'); ?>", // Secure injection
149
- userEmail: "<?php echo $currentUser->email ?? ''; ?>", // Context passing
142
+ // Initialize with PHP variables
143
+ ChatWillow.init({
144
+ apiKey: "<?php echo getenv('CHATWILLOW_API_KEY'); ?>",
145
+ userEmail: "<?php echo $user->email ?? ''; ?>",
150
146
  theme: "light"
151
- }));
147
+ });
152
148
  </script>
153
149
  ```
154
150
 
@@ -158,14 +154,14 @@ Integration with PHP (Laravel, CodeIgniter, or Native PHP) is identical to the C
158
154
 
159
155
  Below are the supported configuration props for `<ChatWillowWidget />`.
160
156
 
161
- | **Prop Name** | **Type** | **Default** | **Description** |
162
- | ------------------- | ---------------------------------- | ------------------ | ------------------------------------------------------ |
163
- | `apiKey` | `string` | **Required** | Your unique project API key from ChatWillow Dashboard. |
164
- | `theme` | `'light' \| 'dark'` | `'light'` | Sets the color scheme of the widget. |
165
- | `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Position of the floating button. |
166
- | `title` | `string` | `'Chat'` | The title displayed in the header. |
167
- | `logo` | `string` | `undefined` | URL for your custom brand logo. |
168
- | `primaryColor` | `string` | `#000000` | Hex code for the primary brand color. |
157
+ | **Prop Name** | **Type** | **Default** | **Description** |
158
+ | -------------- | --------------------------------- | ---------------- | ------------------------------------------------------ |
159
+ | `apiKey` | `string` | **Required** | Your unique project API key from ChatWillow Dashboard. |
160
+ | `theme` | `'light' \| 'dark'` | `'light'` | Sets the color scheme of the widget. |
161
+ | `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Position of the floating button. |
162
+ | `title` | `string` | `'Chat'` | The title displayed in the header. |
163
+ | `logo` | `string` | `undefined` | URL for your custom brand logo. |
164
+ | `primaryColor` | `string` | `#000000` | Hex code for the primary brand color. |
169
165
 
170
166
  ---
171
167
 
@@ -173,9 +169,7 @@ Below are the supported configuration props for `<ChatWillowWidget />`.
173
169
 
174
170
  **1. Styles are not loading?** Ensure you have imported the CSS file:
175
171
 
176
- `import '@chatwillow/widget/style.css'` or included the `<link>` tag for CDN usage.
177
-
178
- **2. "React is not defined" error?** When using via CDN/PHP, make sure you load `react.production.min.js` and `react-dom.production.min.js` **before** loading the `chatwillow-widget.umd.js` script.
172
+ `import "@chatwillow/widget/dist/style.css"` or included the `<link>` tag for CDN usage.
179
173
 
180
174
  ---
181
175