@bootdesk/chat-widget-bridge 0.4.21 → 0.4.22
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 +27 -26
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Iframe bridge for BootDesk Chat SDK — enables embedding the chat widget in an iframe with cross-frame communication via `postMessage`.
|
|
4
4
|
|
|
5
5
|
Includes:
|
|
6
|
+
|
|
6
7
|
- **`useIframeBridge`** — React hook for iframe communication
|
|
7
8
|
- **`embed-chat`** — Vanilla JS embed script that creates a floating chat button and iframe dynamically
|
|
8
9
|
|
|
@@ -72,31 +73,28 @@ window.addEventListener("message", (event) => {
|
|
|
72
73
|
});
|
|
73
74
|
|
|
74
75
|
// Trigger notification click in iframe
|
|
75
|
-
iframe.contentWindow.postMessage(
|
|
76
|
-
{ type: "chat-notification-clicked" },
|
|
77
|
-
"*",
|
|
78
|
-
);
|
|
76
|
+
iframe.contentWindow.postMessage({ type: "chat-notification-clicked" }, "*");
|
|
79
77
|
```
|
|
80
78
|
|
|
81
79
|
## API
|
|
82
80
|
|
|
83
|
-
| Return value
|
|
84
|
-
|
|
85
|
-
| `config`
|
|
86
|
-
| `isInIframe`
|
|
87
|
-
| `notifyMessage(text)`
|
|
81
|
+
| Return value | Description |
|
|
82
|
+
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
83
|
+
| `config` | `BridgeConfig \| null` — config from parent (title, locale, placeholder, theme) |
|
|
84
|
+
| `isInIframe` | `boolean` — `true` when window !== window.parent |
|
|
85
|
+
| `notifyMessage(text)` | Sends `{ type: "chat-message", text }` to parent |
|
|
88
86
|
| `notifyViewportConfig(content)` | Sends `{ type: "chat-viewport-config", content }` to parent (Android keyboard support via `interactive-widget=resizes-content`; iOS handles this via `dvh` units) |
|
|
89
|
-
| `onNotificationClicked(cb)`
|
|
87
|
+
| `onNotificationClicked(cb)` | Registers callback for `chat-notification-clicked` from parent |
|
|
90
88
|
|
|
91
89
|
## Message Protocol
|
|
92
90
|
|
|
93
|
-
| Direction
|
|
94
|
-
|
|
95
|
-
| Parent → Child | `chat-config`
|
|
96
|
-
| Parent → Child | `chat-notification-clicked` | `{}`
|
|
97
|
-
| Child → Parent | `chat-message`
|
|
98
|
-
| Child → Parent | `chat-close`
|
|
99
|
-
| Child → Parent | `chat-viewport-config`
|
|
91
|
+
| Direction | type | Payload |
|
|
92
|
+
| -------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
93
|
+
| Parent → Child | `chat-config` | `{ title?, locale?, placeholder?, theme?: { mode? } }` |
|
|
94
|
+
| Parent → Child | `chat-notification-clicked` | `{}` |
|
|
95
|
+
| Child → Parent | `chat-message` | `{ text: string }` |
|
|
96
|
+
| Child → Parent | `chat-close` | `{}` — requests parent to close/hide the iframe |
|
|
97
|
+
| Child → Parent | `chat-viewport-config` | `{ content: string }` — asks parent to add `interactive-widget=resizes-content` on viewport meta (Android only; iOS uses `dvh` units) |
|
|
100
98
|
|
|
101
99
|
## Embed Script (`embed-chat`)
|
|
102
100
|
|
|
@@ -105,6 +103,7 @@ Self-contained vanilla JS script that creates a floating chat button, overlay, a
|
|
|
105
103
|
### Usage
|
|
106
104
|
|
|
107
105
|
As a module import (Vite/webpack):
|
|
106
|
+
|
|
108
107
|
```js
|
|
109
108
|
import "@bootdesk/chat-widget-bridge/embed-chat";
|
|
110
109
|
|
|
@@ -112,6 +111,7 @@ ChatSDK.initialize();
|
|
|
112
111
|
```
|
|
113
112
|
|
|
114
113
|
Via a `<script>` tag:
|
|
114
|
+
|
|
115
115
|
```html
|
|
116
116
|
<script src="https://cdn.example.com/embed-chat.js"></script>
|
|
117
117
|
<script>
|
|
@@ -119,7 +119,8 @@ Via a `<script>` tag:
|
|
|
119
119
|
iframeSrc: "/my-chat-page",
|
|
120
120
|
title: "Support Chat",
|
|
121
121
|
placeholder: "How can we help?",
|
|
122
|
-
buttonInnerHtml:
|
|
122
|
+
buttonInnerHtml:
|
|
123
|
+
'<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>',
|
|
123
124
|
buttonStyle: { background: "#ff4433" },
|
|
124
125
|
overlayStyle: { background: "rgba(0,0,0,0.5)" },
|
|
125
126
|
});
|
|
@@ -140,14 +141,14 @@ Via a `<script>` tag:
|
|
|
140
141
|
|
|
141
142
|
### Configuration
|
|
142
143
|
|
|
143
|
-
| Option
|
|
144
|
-
|
|
145
|
-
| `iframeSrc`
|
|
146
|
-
| `title`
|
|
147
|
-
| `placeholder`
|
|
148
|
-
| `buttonInnerHtml` | `string` | Chat bubble SVG
|
|
149
|
-
| `buttonStyle`
|
|
150
|
-
| `overlayStyle`
|
|
144
|
+
| Option | Type | Default | Description |
|
|
145
|
+
| ----------------- | -------- | ---------------------- | ------------------------------------------------ |
|
|
146
|
+
| `iframeSrc` | `string` | `"/chat-iframe"` | URL for the iframe src |
|
|
147
|
+
| `title` | `string` | `"Chat"` | Title sent to the iframe via `chat-config` |
|
|
148
|
+
| `placeholder` | `string` | `"Type a message..."` | Placeholder sent to the iframe via `chat-config` |
|
|
149
|
+
| `buttonInnerHtml` | `string` | Chat bubble SVG | Inner HTML of the floating button |
|
|
150
|
+
| `buttonStyle` | `object` | Default button styles | CSS overrides for the button |
|
|
151
|
+
| `overlayStyle` | `object` | Default overlay styles | CSS overrides for the overlay |
|
|
151
152
|
|
|
152
153
|
### Cleanup
|
|
153
154
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bootdesk/chat-widget-bridge",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.22",
|
|
4
4
|
"description": "Iframe bridge for BootDesk Chat SDK - enables embedding the chat widget in an iframe with cross-frame communication via postMessage",
|
|
5
5
|
"repository": "https://github.com/bootdesk/chat-sdk",
|
|
6
6
|
"type": "module",
|