@chatwillow/widget 0.0.4 → 0.0.6

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 +39 -64
  2. package/dist/chatwillow-widget.es.js +13063 -2572
  3. package/dist/chatwillow-widget.umd.js +42 -15
  4. package/dist/index.d.ts +13 -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,32 @@ 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
-
98
- <div id="chatwillow-root"></div>
99
-
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>
102
-
103
- <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>
88
+ <head>
89
+ <meta charset="UTF-8" />
90
+ <title>ChatWillow Widget</title>
91
+
92
+ <link
93
+ rel="stylesheet"
94
+ href="https://unpkg.com/@chatwillow/widget@latest/dist/style.css"
95
+ />
96
+ </head>
97
+ <body>
98
+ <script src="https://unpkg.com/@chatwillow/widget@latest/dist/chatwillow-widget.umd.js"></script>
104
99
 
105
100
  <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
- });
101
+ ChatWillow.init({
102
+ apiKey: "YOUR_API_KEY",
103
+ theme: "dark",
104
+ });
119
105
  </script>
120
- </body>
106
+ </body>
121
107
  </html>
122
108
  ```
123
109
 
@@ -131,24 +117,15 @@ Integration with PHP (Laravel, CodeIgniter, or Native PHP) is identical to the C
131
117
 
132
118
  **PHP**
133
119
 
134
- ```
135
- <link rel="stylesheet" href="[https://unpkg.com/@chatwillow/widget@latest/dist/style.css](https://unpkg.com/@chatwillow/widget@latest/dist/style.css)">
136
-
137
- <div id="chatwillow-widget-container"></div>
138
-
139
- <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
- <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
- <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>
120
+ ```php
121
+ <link rel="stylesheet" href="https://unpkg.com/@chatwillow/widget@latest/dist/style.css">
142
122
 
123
+ <script src="https://unpkg.com/@chatwillow/widget@latest/dist/chatwillow-widget.umd.js"></script>
143
124
  <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
125
+ ChatWillow.init({
126
+ apiKey: "<?php echo $api_key; ?>",
150
127
  theme: "light"
151
- }));
128
+ });
152
129
  </script>
153
130
  ```
154
131
 
@@ -158,14 +135,14 @@ Integration with PHP (Laravel, CodeIgniter, or Native PHP) is identical to the C
158
135
 
159
136
  Below are the supported configuration props for `<ChatWillowWidget />`.
160
137
 
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. |
138
+ | **Prop Name** | **Type** | **Default** | **Description** |
139
+ | -------------- | --------------------------------- | ---------------- | ------------------------------------------------------ |
140
+ | `apiKey` | `string` | **Required** | Your unique project API key from ChatWillow Dashboard. |
141
+ | `theme` | `'light' \| 'dark'` | `'light'` | Sets the color scheme of the widget. |
142
+ | `position` | `'bottom-right' \| 'bottom-left'` | `'bottom-right'` | Position of the floating button. |
143
+ | `title` | `string` | `'Chat'` | The title displayed in the header. |
144
+ | `logo` | `string` | `undefined` | URL for your custom brand logo. |
145
+ | `primaryColor` | `string` | `#000000` | Hex code for the primary brand color. |
169
146
 
170
147
  ---
171
148
 
@@ -173,9 +150,7 @@ Below are the supported configuration props for `<ChatWillowWidget />`.
173
150
 
174
151
  **1. Styles are not loading?** Ensure you have imported the CSS file:
175
152
 
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.
153
+ `import "@chatwillow/widget/dist/style.css"` or included the `<link>` tag for CDN usage.
179
154
 
180
155
  ---
181
156