@vamlabs/vam-chatbot 0.1.76 → 0.1.77-dev.178.1
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 +30 -3
- package/dist/web-component.js +3452 -2
- package/package.json +6 -1
- package/dist/web-component.js.LICENSE.txt +0 -41
package/README.md
CHANGED
|
@@ -7,13 +7,38 @@
|
|
|
7
7
|
<script src="https://cdn.jsdelivr.net/npm/@vamlabs/vam-chatbot/dist/web-component.min.js"></script>
|
|
8
8
|
```
|
|
9
9
|
|
|
10
|
-
2. **Place the Chatbot Component:**
|
|
11
|
-
- Insert the chatbot component into your HTML
|
|
10
|
+
2. **Place the Floating Chatbot Component:**
|
|
11
|
+
- Insert the chatbot component into your HTML. By default, it appears as a minimized launcher at the bottom right of the screen. Replace the `client-id` with your specific client ID:
|
|
12
12
|
```html
|
|
13
13
|
<vam-chatbot client-id="<your-client-id>"></vam-chatbot>
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
3. **
|
|
16
|
+
3. **Place the Inline Chatbot Component:**
|
|
17
|
+
- For an in-page chatbot that sits wherever you place it in the page layout, use `layout="inline"`:
|
|
18
|
+
```html
|
|
19
|
+
<vam-chatbot
|
|
20
|
+
layout="inline"
|
|
21
|
+
client-id="<your-client-id>"
|
|
22
|
+
class="my-inline-chatbot"
|
|
23
|
+
></vam-chatbot>
|
|
24
|
+
```
|
|
25
|
+
- Inline layout reserves its page space immediately at `100%` width with a default height of `640px`, then keeps that footprint while loading, ready, or temporarily unavailable. Use CSS variables and exposed shadow parts for customization. Scope inline-only overrides with `[layout="inline"]`:
|
|
26
|
+
```css
|
|
27
|
+
vam-chatbot[layout="inline"].my-inline-chatbot {
|
|
28
|
+
--chatbot-inline-height: 720px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
vam-chatbot[layout="inline"].my-inline-chatbot::part(panel) {
|
|
32
|
+
border-radius: 0;
|
|
33
|
+
box-shadow: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
vam-chatbot[layout="inline"].my-inline-chatbot::part(header) {
|
|
37
|
+
background: #0500ff;
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
4. **Provide an Auth Token (Optional):**
|
|
17
42
|
- For protected deployments (for example, your portal domain), pass a bearer token for `POST /chat/session`.
|
|
18
43
|
- For public embeds where your backend allows unauthenticated session minting, this can be omitted.
|
|
19
44
|
- Static token via attribute:
|
|
@@ -36,3 +61,5 @@ These steps will help you integrate the VAM chatbot into your webpage seamlessly
|
|
|
36
61
|
|
|
37
62
|
- The widget uses a 2-step chat flow (`POST /chat/session` then streamed `POST /chat/stream`) and requires your site origin to be allowlisted for your tenant.
|
|
38
63
|
- If configured, `authTokenProvider` is called before each message stream starts so expiring tokens can be refreshed on-demand.
|
|
64
|
+
- Missing or invalid `layout` values default to the existing floating layout.
|
|
65
|
+
- Exposed `::part(...)` hooks include `root`, `panel`, `header`, `header-title`, `header-actions`, `reset-button`, `close-button`, `body`, `inline-state`, `loading-state`, `error-state`, `conversation`, `prompts`, `prompt-button`, `message`, `bot-message`, `user-message`, `error-message`, `message-avatar`, `message-bubble`, `carousel`, `sources`, `source-link`, `source-toggle`, `promoted-topics`, `support-actions`, `feedback-form`, `footer`, `footer-branding`, `prompt-drawer-button`, `input`, `submit-button`, `launcher`, `launcher-popup`, and `launcher-button`.
|