@cas0570/chat-widget 0.0.1 → 0.0.2

package/README.md

@@ -52,7 +52,6 @@ function App() {
 | 🎨 **Customizable** | Full control over colors, text, positioning |
 | 📱 **Responsive** | Works on desktop and mobile |
 | ♿ **Accessible** | WCAG compliant with keyboard navigation |
-| 🌐 **Framework Agnostic** | Works with any frontend via script tag |
 
 ---
 
@@ -126,6 +125,56 @@ export default function Page() {
 }
 ```
 
+### Script Tag (CDN)
+
+Voor websites zonder build system kun je de embed bundle direct gebruiken via een script tag.
+
+#### Methode 1: Data Attributen (eenvoudigste)
+
+```html
+<script 
+  src="https://cdn.example.com/geoapps-chat-widget.embed.js"
+  data-api-url="https://api.geoapps.nl/api/v1/chat"
+  data-title="GeoApps Help"
+  data-subtitle="Vraag me iets over GeoApps"
+  data-greeting="Hallo! Hoe kan ik je helpen met GeoApps?"
+  data-placeholder="Typ je vraag..."
+  data-primary-color="#3b82f6"
+  data-position="bottom-right"
+  data-default-open="false"
+></script>
+```
+
+#### Methode 2: JavaScript API
+
+```html
+<script src="https://cdn.example.com/geoapps-chat-widget.embed.js"></script>
+<script>
+  GeoAppsChatWidget.embed({
+    apiUrl: 'https://api.geoapps.nl/api/v1/chat',
+    title: 'GeoApps Help',
+    subtitle: 'Vraag me iets over GeoApps',
+    greeting: 'Hallo! Hoe kan ik je helpen met GeoApps?',
+    placeholder: 'Typ je vraag...',
+    primaryColor: '#3b82f6',
+    position: 'bottom-right'
+  });
+</script>
+```
+
+#### Beschikbare Data Attributen
+
+| Attribuut | Omschrijving |
+| --------- | ------------ |
+| `data-api-url` | **Verplicht.** Chat API endpoint URL |
+| `data-title` | Header titel |
+| `data-subtitle` | Header subtitel |
+| `data-greeting` | Initieel welkomstbericht |
+| `data-placeholder` | Input placeholder tekst |
+| `data-primary-color` | Accent kleur (hex) |
+| `data-position` | `bottom-right`, `bottom-left`, `top-right`, `top-left` |
+| `data-default-open` | `true` of `false` - start open of gesloten |
+
 ---
 
 ## API Reference
@@ -139,7 +188,7 @@ export default function Page() {
 | `title` | `string` | `"Chat"` | Dialog header title |
 | `subtitle` | `string` | `""` | Dialog header subtitle |
 | `placeholder` | `string` | `"Typ een bericht..."` | Input placeholder text |
-| `greeting` | `string` | `""` | Initial greeting message |
+| `greeting` | `string` | `""` | Initial bot message |
 | `primaryColor` | `string` | `"#3b82f6"` | Main accent color (hex) or var() |
 | `position` | `Position` | `"bottom-right"` | Widget position |
 | `defaultOpen` | `boolean` | `false` | Default open state |
@@ -170,8 +219,8 @@ export default function Page() {
 | ------ | ------ | ------------- |
 | `onOpen` | `() => void` | Called when chat dialog opens |
 | `onClose` | `() => void` | Called when chat dialog closes |
-| `onMessageSent` | `(message: string) => void` | Called when message is sent |
-| `onResponseReceived` | `(response: string) => void` | Called when a response is received |
+| `onMessageSent` | `(message: string) => void` | Called when a message is sent |
+| `onResponseReceived` | `(response: string) => void` | Called when a message is received |
 
 ### Example with Callbacks
 
@@ -180,7 +229,8 @@ export default function Page() {
   apiUrl="https://api.geoapps.nl/api/v1/chat"
   onOpen={() => analytics.track('chat_opened')}
   onClose={() => analytics.track('chat_closed')}
-  onMessageSent={(msg) => console.log('Message:', msg)}
+  onMessage={(msg) => console.log('Message:', msg)}
+  onError={(err) => console.error('Chat error:', err)}
 />
 ```