{"_id":"@agentdeskbot/vue","_rev":"2-0f5fe518f30fba4d1552312d79da0aae","name":"@agentdeskbot/vue","dist-tags":{"latest":"1.0.0"},"versions":{"0.1.0":{"name":"@agentdeskbot/vue","version":"0.1.0","keywords":["agentdesk","chat","widget","vue","vue3","nuxt","support","bot"],"author":{"name":"AgentDesk"},"license":"MIT","_id":"@agentdeskbot/vue@0.1.0","maintainers":[{"name":"uttampurush","email":"purushothamprajapati7473@gmail.com"}],"homepage":"https://github.com/Purushotham-Prajapati-24/AgentDesk#readme","bugs":{"url":"https://github.com/Purushotham-Prajapati-24/AgentDesk/issues"},"dist":{"shasum":"7edd1137002b1dbefcd823b228bf2539d2360e83","tarball":"https://registry.npmjs.org/@agentdeskbot/vue/-/vue-0.1.0.tgz","fileCount":8,"integrity":"sha512-EMgpUwsNed1m0ufdwEHgzWkb6EZ7CDAY1QROXF4kVb9l/cJUEbFsj5vNePLeDbK4uCoUX3mNuQh5sMKZ0JbVIA==","signatures":[{"sig":"MEQCIFjwSk9gNXtWw5Dj5bA0hpiuNgglvI6Toc5tTO5f9/4hAiBXV687oNZA+g7KHeni+nVI0Hk0WFBT3vjEo0zyRsimgA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@agentdeskbot%2fvue@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":69610},"main":"./dist/index.cjs","types":"./dist/index.d.ts","module":"./dist/index.js","engines":{"node":">=18"},"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"gitHead":"dccb8f5a814000a9e97e855c90adb319e2f28bb4","scripts":{"dev":"tsup --watch","lint":"eslint src --ext .ts,.tsx","test":"vitest run","build":"tsup","typecheck":"tsc --noEmit"},"_npmUser":{"name":"uttampurush","email":"purushothamprajapati7473@gmail.com"},"repository":{"url":"git+https://github.com/Purushotham-Prajapati-24/AgentDesk.git","type":"git","directory":"packages/vue"},"_npmVersion":"10.8.2","description":"AgentDesk AI chat widget — Vue 3 SDK","directories":{},"sideEffects":false,"_nodeVersion":"20.20.2","dependencies":{"@agentdeskbot/core":"^0.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3","tsup":"^8","typescript":"^5"},"peerDependencies":{"vue":">=3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue_0.1.0_1781547102609_0.5080162422255485","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@agentdeskbot/vue","version":"1.0.0","description":"AgentDesk AI chat widget — Vue 3 SDK","keywords":["agentdesk","chat","widget","vue","vue3","nuxt","support","bot"],"license":"MIT","author":{"name":"AgentDesk"},"homepage":"https://github.com/Purushotham-Prajapati-24/AgentDesk#readme","bugs":{"url":"https://github.com/Purushotham-Prajapati-24/AgentDesk/issues"},"repository":{"type":"git","url":"git+https://github.com/Purushotham-Prajapati-24/AgentDesk.git","directory":"packages/vue"},"engines":{"node":">=18"},"main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"sideEffects":false,"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit","lint":"eslint src --ext .ts,.tsx","test":"vitest run"},"peerDependencies":{"vue":">=3.0.0"},"devDependencies":{"tsup":"^8","typescript":"^5","vue":"^3"},"dependencies":{"@agentdeskbot/core":"^0.1.0"},"_id":"@agentdeskbot/vue@1.0.0","gitHead":"7f6c5384595a7ce1f7db383613ae20110e06124d","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-mTUxjfSY/1smATQtqVD301pzjImIQAw9p++97T2t1U5erjL+L5XZL3wW2P6x5NmjaYf/jYrkF41+DykWXHZU9Q==","shasum":"b6a907a36f02911c7e8167bf07a2225c2130c768","tarball":"https://registry.npmjs.org/@agentdeskbot/vue/-/vue-1.0.0.tgz","fileCount":8,"unpackedSize":96450,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBf+dh6861UD0a8/eUwrRfJ0ifjBJuCgzuo5mzeodA84AiBMRfRD5mAFXTK5i3rdj/q3twMMfAigDWsd4mk9w0+uUA=="}]},"_npmUser":{"name":"uttampurush","email":"purushothamprajapati7473@gmail.com"},"directories":{},"maintainers":[{"name":"uttampurush","email":"purushothamprajapati7473@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_1.0.0_1781810893210_0.4025611071806414"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-15T18:11:42.425Z","modified":"2026-06-18T19:28:13.476Z","0.1.0":"2026-06-15T18:11:42.765Z","1.0.0":"2026-06-18T19:28:13.352Z"},"bugs":{"url":"https://github.com/Purushotham-Prajapati-24/AgentDesk/issues"},"author":{"name":"AgentDesk"},"license":"MIT","homepage":"https://github.com/Purushotham-Prajapati-24/AgentDesk#readme","keywords":["agentdesk","chat","widget","vue","vue3","nuxt","support","bot"],"repository":{"type":"git","url":"git+https://github.com/Purushotham-Prajapati-24/AgentDesk.git","directory":"packages/vue"},"description":"AgentDesk AI chat widget — Vue 3 SDK","maintainers":[{"name":"uttampurush","email":"purushothamprajapati7473@gmail.com"}],"readme":"<div align=\"center\">\r\n\r\n# `@agentdeskbot/vue`\r\n\r\n**Drop-in Vue 3 & Nuxt 3 SDK for the AgentDesk AI chat widget.**\r\n\r\nEmbed a fully-typed, RAG-grounded support bot in your Vue app in under 30 seconds — no manual `onMounted` boilerplate, no plugin setup required, SSR-safe for Nuxt out of the box.\r\n\r\n[![npm version](https://img.shields.io/npm/v/@agentdeskbot/vue?color=cb3837&logo=npm&logoColor=white)](https://www.npmjs.com/package/@agentdeskbot/vue)\r\n[![npm downloads](https://img.shields.io/npm/dm/@agentdeskbot/vue?color=cb3837&logo=npm&logoColor=white)](https://www.npmjs.com/package/@agentdeskbot/vue)\r\n[![bundle size](https://img.shields.io/bundlephobia/minzip/@agentdeskbot/vue?color=success)](https://bundlephobia.com/package/@agentdeskbot/vue)\r\n[![license](https://img.shields.io/npm/l/@agentdeskbot/vue?color=blue)](./LICENSE)\r\n[![Vue](https://img.shields.io/badge/Vue-3.x-42b883?logo=vue.js&logoColor=white)](https://vuejs.org)\r\n[![Nuxt](https://img.shields.io/badge/Nuxt-3.x-00DC82?logo=nuxtdotjs&logoColor=white)](https://nuxt.com)\r\n[![TypeScript](https://img.shields.io/badge/TypeScript-5.x-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/)\r\n\r\n</div>\r\n\r\n---\r\n\r\n## Table of Contents\r\n\r\n- [Features](#features)\r\n- [Quick Start](#quick-start)\r\n- [Installation](#installation)\r\n- [Usage by Framework](#usage-by-framework)\r\n  - [Plain Vue 3](#plain-vue-3)\r\n  - [Vue 3 with global plugin](#vue-3-with-global-plugin)\r\n  - [Nuxt 3](#nuxt-3)\r\n  - [Cross-origin / Self-hosted Embeds](#cross-origin--self-hosted-embeds)\r\n- [Props API](#props-api)\r\n- [Events](#events)\r\n- [Advanced](#advanced)\r\n  - [Multiple bots on the same page](#multiple-bots-on-the-same-page)\r\n  - [Programmatic control](#programmatic-control)\r\n  - [Manual script-tag fallback](#manual-script-tag-fallback)\r\n- [How it works](#how-it-works)\r\n- [Troubleshooting](#troubleshooting)\r\n- [Migrating to v0.1.0](#migrating-to-v010)\r\n- [Related Packages](#related-packages)\r\n- [License](#license)\r\n\r\n---\r\n\r\n## Features\r\n\r\n- **One component, zero config** — `<AgentDeskWidget bot-id=\"…\" />` is everything you need.\r\n- **Optional global plugin** — Install once, use the component anywhere without per-file imports.\r\n- **Nuxt 3 ready** — Drop-in client plugin that keeps the widget out of SSR.\r\n- **Strictly typed** — Full TypeScript surface with IntelliSense, including prop types and emit payloads.\r\n- **Zero runtime deps outside Vue** — `vue` is externalized; no other peer deps required.\r\n- **Tree-shakable** — `\"sideEffects\": false`; ESM and CJS bundles ship with `.d.ts` declarations.\r\n- **Idempotent injection** — Deduplicates scripts so re-mounts (HMR, `<KeepAlive>`) don't double-load the widget.\r\n- **Origin-validated events** — `postMessage` listeners verify `event.origin` and `botId` before emitting.\r\n\r\n---\r\n\r\n## Quick Start\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nimport { AgentDeskWidget } from '@agentdeskbot/vue';\r\n</script>\r\n\r\n<template>\r\n  <main><!-- your app --></main>\r\n  <AgentDeskWidget bot-id=\"YOUR_BOT_ID\" />\r\n</template>\r\n```\r\n\r\nThat's it. The widget will mount as a floating launcher bubble in the bottom-right corner of your page.\r\n\r\n---\r\n\r\n## Installation\r\n\r\n```bash\r\n# npm\r\nnpm install @agentdeskbot/vue\r\n\r\n# yarn\r\nyarn add @agentdeskbot/vue\r\n\r\n# pnpm\r\npnpm add @agentdeskbot/vue\r\n```\r\n\r\n**Peer dependencies** *(automatically installed alongside in modern setups)*\r\n\r\n| Package | Required | Supported versions |\r\n| --- | --- | --- |\r\n| `vue` | ✅ | `>= 3.0.0` |\r\n\r\n> **Vue 2 users:** This package targets Vue 3 only. For Vue 2, use the [manual script-tag approach](#manual-script-tag-fallback) below.\r\n\r\n---\r\n\r\n## Usage by Framework\r\n\r\n### Plain Vue 3\r\n\r\n```vue\r\n<!-- src/App.vue -->\r\n<script setup lang=\"ts\">\r\nimport { AgentDeskWidget } from '@agentdeskbot/vue';\r\n</script>\r\n\r\n<template>\r\n  <main><!-- your app --></main>\r\n  <AgentDeskWidget bot-id=\"YOUR_BOT_ID\" />\r\n</template>\r\n```\r\n\r\n### Vue 3 with global plugin\r\n\r\nRegister once in your app's entry point and use `<AgentDeskWidget>` anywhere — no per-file imports needed.\r\n\r\n```ts\r\n// src/main.ts\r\nimport { createApp } from 'vue';\r\nimport { AgentDeskPlugin } from '@agentdeskbot/vue';\r\nimport App from './App.vue';\r\n\r\ncreateApp(App)\r\n  .use(AgentDeskPlugin)\r\n  .mount('#app');\r\n```\r\n\r\n```vue\r\n<!-- Any component — no import required -->\r\n<template>\r\n  <AgentDeskWidget bot-id=\"YOUR_BOT_ID\" />\r\n</template>\r\n```\r\n\r\n#### Plugin options\r\n\r\n```ts\r\nimport { AgentDeskPlugin } from '@agentdeskbot/vue';\r\n\r\napp.use(AgentDeskPlugin, {\r\n  // Set to false to register the plugin without auto-registering the\r\n  // global <AgentDeskWidget> component. Useful when you want to manage\r\n  // component registration manually.\r\n  globalComponent: true, // default\r\n});\r\n```\r\n\r\n| Option | Type | Default | Description |\r\n| --- | --- | --- | --- |\r\n| `globalComponent` | `boolean` | `true` | When `true`, registers `<AgentDeskWidget>` globally. Set to `false` to skip global registration. |\r\n\r\n### Nuxt 3\r\n\r\nCreate a **client-only** plugin so the widget is never executed during SSR. The `.client.ts` suffix tells Nuxt to only load this module on the browser.\r\n\r\n```ts\r\n// plugins/agentdesk.client.ts\r\nimport { AgentDeskPlugin } from '@agentdeskbot/vue';\r\n\r\nexport default defineNuxtPlugin((nuxtApp) => {\r\n  nuxtApp.vueApp.use(AgentDeskPlugin);\r\n});\r\n```\r\n\r\nThen use the component normally in any page or layout:\r\n\r\n```vue\r\n<!-- app.vue or layouts/default.vue -->\r\n<template>\r\n  <div>\r\n    <NuxtPage />\r\n    <AgentDeskWidget bot-id=\"YOUR_BOT_ID\" />\r\n  </div>\r\n</template>\r\n```\r\n\r\n> **Why a `.client.ts` plugin?** Nuxt runs every plugin in `plugins/` on the server first. The widget touches `window` and `document` during mount, so it must be deferred to the client. The `.client.ts` suffix is Nuxt's official escape hatch for this.\r\n\r\n### Cross-origin / Self-hosted Embeds\r\n\r\nIf your AgentDesk backend runs on a **different domain** than the page embedding the widget, point `api-origin` and `script-src` at the correct hosts:\r\n\r\n```vue\r\n<AgentDeskWidget\r\n  bot-id=\"YOUR_BOT_ID\"\r\n  api-origin=\"https://support.yourapp.com\"\r\n  script-src=\"https://support.yourapp.com/widget.js\"\r\n/>\r\n```\r\n\r\n| Prop | When you need it |\r\n| --- | --- |\r\n| `apiOrigin` | The widget is embedded on `app.com` but the chat backend lives on `support.yourapp.com`. |\r\n| `scriptSrc` | Same as above, but for the actual `widget.js` bundle URL. |\r\n\r\n---\r\n\r\n## Props API\r\n\r\n| Prop (CamelCase) | Prop (kebab-case) | Type | Default | Required | Description |\r\n| --- | --- | --- | --- | --- | --- |\r\n| `botId` | `bot-id` | `string` | — | ✅ | The Bot ID from your AgentDesk dashboard. |\r\n| `mode` | `mode` | `'launcher' \\| 'inline'` | `'launcher'` | — | `'launcher'` = floating bubble. `'inline'` = fills nearest positioned ancestor. |\r\n| `scriptSrc` | `script-src` | `string` | `'https://agentdeskbot.vercel.app/widget.js'` | — | URL to compiled `widget.js`. Override for custom or self-hosted deployments. |\r\n| `apiOrigin` | `api-origin` | `string` | `'https://agentdeskbot.vercel.app'` | — | Base URL of your AgentDesk backend. Required for custom or self-hosted deployments. |\r\n| `configUrl` | `config-url` | `string` | `{apiOrigin}/api/widget/config/{botId}` | — | Fully-qualified override for widget config fetch endpoint. |\r\n| `theme` | `theme` | `string` | — | — | Optional theme name for the widget (e.g. `'webchat-v1'`). *Mount-only.* |\r\n| `cspNonce` | `csp-nonce` | `string` | — | — | Optional CSP nonce to apply to the script tag and dynamic styles. *Mount-only.* |\r\n| `position` | `position` | `'bottom-right' \\| 'bottom-left' \\| 'top-right' \\| 'top-left'` | `'bottom-right'` | — | Optional fixed position for launcher bubble and widget pane. |\r\n| `className` | `class-name` | `string` | — | — | Optional custom HTML class name to apply to host element container. |\r\n\r\n> Both `camelCase` and `kebab-case` are fully supported for all props in Vue templates (e.g., `:bot-id` and `:botId` are equivalent).\r\n\r\n### `WidgetMode` reference\r\n\r\n```ts\r\nimport type { WidgetMode } from '@agentdeskbot/vue'; // re-exported from @agentdeskbot/core\r\n\r\ntype WidgetMode = 'launcher' | 'inline';\r\n```\r\n\r\n- **`'launcher'`** — A floating bubble anchored to the bottom-right corner of the viewport. Clicking it expands the chat surface.\r\n- **`'inline'`** — The widget fills the nearest positioned ancestor element (`position: relative | absolute | fixed`). Useful for embedding the chat directly inside a page section, side panel, or modal.\r\n\r\n---\r\n\r\n## Events\r\n\r\nThe component emits six lifecycle events corresponding to widget actions and network status. Internally, these events are received from the widget's `postMessage` channel, origin-validated, and re-emitted:\r\n\r\n```vue\r\n<script setup lang=\"ts\">\r\nfunction handleOpen() {\r\n  analytics.track('agentdesk_widget_opened');\r\n}\r\n\r\nfunction handleClose() {\r\n  analytics.track('agentdesk_widget_closed');\r\n}\r\n\r\nfunction handleReady() {\r\n  console.log('Widget is ready');\r\n}\r\n\r\nfunction handleError(err: { message: string }) {\r\n  console.error('Widget load error:', err.message);\r\n}\r\n\r\nfunction handleMessageSent(msg: { text: string }) {\r\n  analytics.track('agentdesk_message_sent', { text: msg.text });\r\n}\r\n\r\nfunction handleInjected() {\r\n  console.log('Widget element injected into the DOM');\r\n}\r\n</script>\r\n\r\n<template>\r\n  <AgentDeskWidget\r\n    bot-id=\"YOUR_BOT_ID\"\r\n    @open=\"handleOpen\"\r\n    @close=\"handleClose\"\r\n    @ready=\"handleReady\"\r\n    @error=\"handleError\"\r\n    @message-sent=\"handleMessageSent\"\r\n    @injected=\"handleInjected\"\r\n  />\r\n</template>\r\n```\r\n\r\n| Event | Payload | Description |\r\n| --- | --- | --- |\r\n| `@open` | — | Emitted when the user opens the chat widget. |\r\n| `@close` | — | Emitted when the user closes the chat widget. |\r\n| `@ready` | — | Emitted when configuration loads successfully and widget is ready. |\r\n| `@error` | `{ message: string }` | Emitted when configuration fails to load or socket connection is lost. |\r\n| `@message-sent` | `{ text: string }` | Emitted when the user/customer sends a message. |\r\n| `@injected` | — | Emitted when the custom element host is injected into the DOM. |\r\n\r\n> The SDK stores its own internal event listeners in the `setup()` closure and tears them down in `onBeforeUnmount`, so re-mounting the component (HMR, `<KeepAlive>`, route changes) is fully idempotent.\r\n\r\n---\r\n\r\n## Advanced\r\n\r\n### Multiple bots on the same page\r\n\r\nThe SDK deduplicates scripts by `botId`, so mounting two `<AgentDeskWidget>` instances with **different** `botId` values will inject two independent widget bundles:\r\n\r\n```vue\r\n<template>\r\n  <AgentDeskWidget bot-id=\"SALES_BOT_ID\" mode=\"inline\" />\r\n  <AgentDeskWidget bot-id=\"SUPPORT_BOT_ID\" mode=\"launcher\" />\r\n</template>\r\n```\r\n\r\nMounting the same `botId` twice (e.g. across HMR boundaries or after a route change) is a no-op — only the first injection runs, and both components' listeners are registered to receive events.\r\n\r\n### Recommended Multi-Bot Patterns\r\n\r\nWhen mounting multiple bots on the same page:\r\n\r\n1. **Avoid Launcher Overlaps:** Do not mount more than one bot in `launcher` mode at the same position. If you must have multiple launchers, use the `position` prop to space them out (e.g., one on the `bottom-right` and one on the `bottom-left`).\r\n2. **Prefer Inline Mode:** For secondary assistants or context-specific support, prefer `mode=\"inline\"` to render the bot within a sidebar, dashboard tab, or modal, keeping the main floating launcher clean.\r\n3. **Event Attribution:** Use `@message-sent` and `@open` event listeners on each widget to attribute user interactions and analytics tracking to the specific `bot-id`.\r\n\r\n### Programmatic control\r\n\r\nThe component renders an empty host `<span>` and owns the widget lifecycle internally. If you need imperative APIs (open/close, send messages), use the [manual script-tag approach](#manual-script-tag-fallback) and call into the custom element directly:\r\n\r\n```ts\r\nconst el = document.querySelector('agentdesk-widget') as HTMLElement & {\r\n  open?: () => void;\r\n  close?: () => void;\r\n};\r\n\r\nel.open?.();\r\n```\r\n\r\n### Manual script-tag fallback\r\n\r\nIf you can't (or don't want to) install the Vue package, drop the script directly into your HTML:\r\n\r\n```html\r\n<script\r\n  src=\"https://agentdeskbot.vercel.app/widget.js\"\r\n  data-bot-id=\"YOUR_BOT_ID\"\r\n  data-theme=\"webchat-v1\"\r\n  data-mode=\"launcher\"\r\n  async\r\n></script>\r\n```\r\n\r\nThe same `data-*` attributes used by the Vue SDK are honored by the script.\r\n\r\n---\r\n\r\n## How it works\r\n\r\nUnder the hood, the Vue component:\r\n\r\n1. **Deduplicates** — On `onMounted`, it scans `document` for existing `script[data-agentdesk]` tags and bails early if one for the current `botId` is already present.\r\n2. **Injects** — Otherwise it appends a `<script>` element pointing to `widget.js` and tags it with `data-agentdesk` and `data-bot-id`.\r\n3. **Listens** — It registers a single global `message` event listener on `window` and forwards events to active components matching the `botId` and origin checks.\r\n4. **Cleans up** — On `onBeforeUnmount` or `onDeactivated` (for KeepAlive), it removes its listener registry. If the last component referencing a `botId` unmounts, the script tag and custom element are removed from the DOM.\r\n\r\n```\r\nVue tree mount\r\n   └─ <AgentDeskWidget :bot-id=\"…\" />\r\n        ├─ injects <script data-agentdesk data-bot-id=\"…\" src=\"https://agentdeskbot.vercel.app/widget.js\" />\r\n        ├─ registers component callback in global dispatch Set\r\n        └─ renders <span data-agentdesk-vue-host aria-hidden=\"true\" />\r\n```\r\n\r\n---\r\n\r\n## Troubleshooting\r\n\r\n<details>\r\n<summary><strong>\"document is not defined\" or window errors in Nuxt</strong></summary>\r\n\r\nYou forgot the `.client` suffix on your plugin file. Rename it so Nuxt only loads it on the client:\r\n\r\n```diff\r\n- plugins/agentdesk.ts\r\n+ plugins/agentdesk.client.ts\r\n```\r\n\r\nVue plugins that touch browser DOM globals (like `window` and `document`) must be client-only. Nuxt recognizes `.client.ts` as the official way to skip server-side execution.\r\n</details>\r\n\r\n<details>\r\n<summary><strong>widget.js returns 404 or fails to load</strong></summary>\r\n\r\nBy default, the SDK requests `https://agentdeskbot.vercel.app/widget.js`. If you are using a self-hosted or white-labeled deployment, specify your custom absolute URL using the `script-src` prop:\r\n\r\n```vue\r\n<AgentDeskWidget\r\n  bot-id=\"YOUR_BOT_ID\"\r\n  script-src=\"https://support.yourapp.com/widget.js\"\r\n/>\r\n```\r\n</details>\r\n\r\n<details>\r\n<summary><strong>Content Security Policy (CSP) blocks the widget script</strong></summary>\r\n\r\nIf your page enforces a strict CSP, inline scripts or dynamically injected scripts might be blocked. You can propagate a CSP cryptographic nonce directly to the injected script tag using the `csp-nonce` prop:\r\n\r\n```vue\r\n<AgentDeskWidget\r\n  bot-id=\"YOUR_BOT_ID\"\r\n  csp-nonce=\"random_cryptographic_nonce_string\"\r\n/>\r\n```\r\nThis nonce is applied to the injected `<script>` tag and passed down to dynamically loaded styles.\r\n</details>\r\n\r\n<details>\r\n<summary><strong>Widget loads but configuration fetch fails</strong></summary>\r\n\r\nIf the widget loads but displays a loading/connection error, check the browser console network tab. By default, it requests `{apiOrigin}/api/widget/config/{botId}`. You can override this endpoint entirely using the `config-url` prop:\r\n\r\n```vue\r\n<AgentDeskWidget\r\n  bot-id=\"YOUR_BOT_ID\"\r\n  config-url=\"https://api.mysupport.com/custom/widget-config\"\r\n/>\r\n```\r\n</details>\r\n\r\n<details>\r\n<summary><strong>Callbacks or events do not fire in cross-origin deployment</strong></summary>\r\n\r\nFor security, the message listener validates `event.origin` against the page origin, `api-origin` prop, and `script-src` prop.\r\nIf you are running the widget backend on `api.support.com` but embedding it on `app.com`, ensure you pass the correct `api-origin` and `script-src` props:\r\n\r\n```vue\r\n<AgentDeskWidget\r\n  bot-id=\"YOUR_BOT_ID\"\r\n  api-origin=\"https://api.support.com\"\r\n  script-src=\"https://api.support.com/widget.js\"\r\n/>\r\n```\r\n</details>\r\n\r\n<details>\r\n<summary><strong>Widget loads twice in development</strong></summary>\r\n\r\nVue's `<Suspense>` and HMR can re-mount components. The SDK is designed to handle this — it deduplicates scripts by `botId`. If you still see two widgets, make sure you aren't rendering two different `<AgentDeskWidget>` components with the same `botId` on the page.\r\n</details>\r\n\r\n<details>\r\n<summary><strong>Vue 2 project</strong></summary>\r\n\r\nThis package requires Vue 3. For Vue 2, use the [manual script-tag approach](#manual-script-tag-fallback) — the underlying `widget.js` IIFE is framework-agnostic.\r\n</details>\r\n\r\n---\r\n\r\n## Migrating to v0.1.0\r\n\r\n> **Breaking change (v0.1.0):** The widget's `postMessage` target origin is now strictly `window.location.origin` (previously `*`). If you were listening for `agentdesk-widget-open` / `agentdesk-widget-close` events directly via `window.addEventListener('message', …)`, your listener must be on the same origin as the page mounting the widget, or it will silently drop events.\r\n\r\nThe official React and Vue SDKs handle this for you — no action is required unless you wrote a custom adapter.\r\n\r\n---\r\n\r\n## Related Packages\r\n\r\n| Package | Description |\r\n| --- | --- |\r\n| [`@agentdeskbot/core`](https://www.npmjs.com/package/@agentdeskbot/core) | Shared TypeScript types (used internally). |\r\n| [`@agentdeskbot/react`](https://www.npmjs.com/package/@agentdeskbot/react) | React & Next.js SDK for the same widget. |\r\n\r\n---\r\n\r\n## License\r\n\r\n[MIT](./LICENSE) © AgentDesk\r\n","readmeFilename":"README.md"}