@wexio/messenger-widget-vue 1.0.23

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Wexio
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,219 @@
+# Welcome to @wexio/messenger-widget-vue 👋
+
+[![Version](https://img.shields.io/npm/v/@wexio/messenger-widget-vue.svg)](https://www.npmjs.com/package/@wexio/messenger-widget-vue)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
+[![Documentation](https://img.shields.io/badge/docs-wexio.io-blue.svg)](https://learn.wexio.io/docs/web-widget)
+
+Native Vue 3 component for the [Wexio](https://wexio.io) web messenger. Thin reactive wrapper around the underlying `<wexio-widget>` custom element — same `WidgetShell` runtime as the script-injected iframe and the React component. Same chat, same visitor identity, same backend; the only difference is **where the Vue tree mounts**.
+
+🏠 [Website](https://wexio.io)
+📚 [Developer Docs](https://learn.wexio.io/docs/web-widget)
+
+## 📂 Description
+
+- [Installation](#installation)
+- [Quick start](#quick-start)
+- [Build configuration](#build-configuration)
+- [Identifying users](#identifying-users)
+- [Props](#props)
+- [Events](#events)
+- [Types](#types)
+- [SSR](#ssr)
+- [Browser support](#browser-support)
+- [Author](#author)
+- [License](#-license)
+
+## Installation
+
+```bash
+yarn add @wexio/messenger-widget-vue
+```
+
+or
+
+```bash
+npm install @wexio/messenger-widget-vue
+```
+
+`vue >= 3.3` is a peer dependency — the widget uses the host's Vue runtime.
+
+## Quick start
+
+```vue
+<script setup lang="ts">
+import { WexioWidget } from "@wexio/messenger-widget-vue";
+</script>
+
+<template>
+  <main>
+    <!-- your app -->
+    <WexioWidget public-key="pk_live_..." />
+  </main>
+</template>
+```
+
+That's it — the widget mounts a floating launcher, handles its own theme/locale/state, and the operator dashboard sees the visitor immediately.
+
+## Build configuration
+
+Vue's template compiler warns about unknown DOM elements by default. Mark `wexio-widget` as a custom element so the warning is suppressed and Vue doesn't try to component-resolve it:
+
+### Vite
+
+```js
+// vite.config.js
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag === "wexio-widget",
+        },
+      },
+    }),
+  ],
+});
+```
+
+### Vue CLI
+
+```js
+// vue.config.js
+module.exports = {
+  chainWebpack: (config) => {
+    config.module
+      .rule("vue")
+      .use("vue-loader")
+      .tap((opts) => ({
+        ...opts,
+        compilerOptions: {
+          isCustomElement: (tag) => tag === "wexio-widget",
+        },
+      }));
+  },
+};
+```
+
+### Nuxt 3
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  vue: {
+    compilerOptions: {
+      isCustomElement: (tag) => tag === "wexio-widget",
+    },
+  },
+});
+```
+
+## Identifying users
+
+Pass a verified `user` prop to log a known visitor in. Provide ONE proof — a Google FedCM `id_token`, a host-signed `jwt`, or the legacy `userId` + `userHash` HMAC pair:
+
+```vue
+<script setup lang="ts">
+import { WexioWidget, type VisitorIdentity } from "@wexio/messenger-widget-vue";
+
+const user: VisitorIdentity = {
+  jwt: serverSignedJwt, // host-signed identity token (recommended)
+  name: "Ada Lovelace",
+  email: "ada@example.com",
+};
+</script>
+
+<template>
+  <WexioWidget public-key="pk_live_..." :user="user" />
+</template>
+```
+
+> **Use a reactive `ref` for `user` when identity changes** — the wrapper watches it and re-runs `identify()` on change. Pass `null` to log the visitor out.
+
+## Props
+
+| Prop            | Type                          | Description                                                                                                                                |
+| --------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `public-key`    | `string`                      | Wexio integration public key (`pk_live_...`). Omit to render in demo mode.                                                                |
+| `locale`        | `string`                      | UI locale (BCP-47, e.g. `"en"`, `"pt-BR"`, `"uk"`). Overrides the operator's `localeStrategy`.                                            |
+| `prefill-name`  | `string`                      | Unverified prechat prefill.                                                                                                                |
+| `prefill-email` | `string`                      | Unverified prechat prefill.                                                                                                                |
+| `prefill-phone` | `string`                      | Unverified prechat prefill.                                                                                                                |
+| `user`          | `VisitorIdentity \| null`     | Known-user identity proof. Pass `null` to log out.                                                                                         |
+
+## Events
+
+| Event    | Payload                                | When                                                |
+| -------- | -------------------------------------- | --------------------------------------------------- |
+| `resize` | `{ width: number; height: number }`    | Panel dimensions changed (open ↔ closed). |
+| `close`  | —                                      | Visitor closed the panel.                            |
+
+```vue
+<template>
+  <WexioWidget
+    public-key="pk_live_..."
+    @resize="onResize"
+    @close="onClose"
+  />
+</template>
+
+<script setup lang="ts">
+function onResize(size: { width: number; height: number }) {
+  console.log(size.width, size.height);
+}
+function onClose() {
+  console.log("visitor closed the panel");
+}
+</script>
+```
+
+## Types
+
+### VisitorIdentity
+
+```ts
+interface VisitorIdentity {
+  googleIdToken?: string;  // Google FedCM id_token (preferred)
+  jwt?: string;            // Host-signed JWT
+  userId?: string;         // Legacy HMAC pair…
+  userHash?: string;       // …(HMAC-SHA256(userId, integrationSecret))
+  name?: string;
+  email?: string;
+  phone?: string;
+  attributes?: Record<string, unknown>;
+}
+```
+
+## SSR
+
+The wrapper renders an empty `<wexio-widget>` element on the server. The actual widget initialises on first client-side mount (`onMounted`). For Nuxt / SSR apps, no special handling is needed — the custom element runs only in the browser.
+
+## Browser support
+
+Modern evergreen browsers — anything that supports Shadow DOM and ES2020. Internet Explorer is not supported.
+
+## Use with other frameworks
+
+The underlying widget runtime is a Web Component, so it works in any modern framework:
+
+- [`@wexio/messenger-widget-react`](https://www.npmjs.com/package/@wexio/messenger-widget-react) — React
+- [`@wexio/messenger-widget-angular`](https://www.npmjs.com/package/@wexio/messenger-widget-angular) — Angular
+- [`@wexio/messenger-widget-ember`](https://www.npmjs.com/package/@wexio/messenger-widget-ember) — Ember
+
+## Author
+
+👤 **Wexio** ([https://wexio.io](https://wexio.io))
+
+## Show your support
+
+Give a ⭐️ if this package helped you!
+
+## 📝 License
+
+This project is [MIT](./LICENSE) licensed.
+
+---
+
+_Created with ❤️ by [Wexio](https://wexio.io)_

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import type { DefineComponent } from "vue";
+
+/** Known-user identity proof. Provide ONE of `googleIdToken`, `jwt`,
+ *  or the legacy `userId` + `userHash` pair. `name` / `email` /
+ *  `phone` populate the People profile; `attributes` is an open bag
+ *  of context fields. */
+export interface VisitorIdentity {
+  googleIdToken?: string;
+  jwt?: string;
+  userId?: string;
+  userHash?: string;
+  name?: string;
+  email?: string;
+  phone?: string;
+  attributes?: Record<string, unknown>;
+}
+
+export interface WexioWidgetProps {
+  /** Wexio integration public key (`pk_live_...`). Omit for demo mode. */
+  publicKey?: string;
+  /** UI locale (BCP-47, e.g. "en", "pt-BR", "uk"). Overrides the
+   *  operator's `localeStrategy`. */
+  locale?: string;
+  /** Unverified prechat prefill. */
+  prefillName?: string;
+  /** Unverified prechat prefill. */
+  prefillEmail?: string;
+  /** Unverified prechat prefill. */
+  prefillPhone?: string;
+  /** Known-user identity proof. Pass `null` to log out. */
+  user?: VisitorIdentity | null;
+}
+
+export interface WexioWidgetEmits {
+  /** Fires every time panel dimensions change (open ↔ closed). */
+  resize: [size: { width: number; height: number }];
+  /** Fires when the visitor closes the panel. */
+  close: [];
+}
+
+/**
+ * Vue 3 wrapper around the `<wexio-widget>` web component.
+ *
+ * Forwards camelCase props to kebab-case attributes on the underlying
+ * custom element; re-emits the element's `wexio:resize` / `wexio:close`
+ * CustomEvents as Vue events.
+ *
+ * Importing this module SIDE-EFFECT registers `<wexio-widget>` — no
+ * separate script tag needed.
+ */
+export declare const WexioWidget: DefineComponent<
+  WexioWidgetProps,
+  {},
+  {},
+  {},
+  {},
+  {},
+  {},
+  WexioWidgetEmits
+>;
+
+export default WexioWidget;

package/dist/index.js

@@ -0,0 +1,113 @@
+/**
+ * `@wexio/messenger-widget-vue` — Vue 3 wrapper around the `<wexio-widget>`
+ * web component.
+ *
+ * Mounts a Shadow-DOM-isolated Wexio messenger inside a Vue tree. Forwards
+ * camelCase props to the underlying custom element's kebab-case
+ * attributes, and re-emits the element's `wexio:resize` / `wexio:close`
+ * CustomEvents as Vue events (with the `.detail` unwrapped).
+ *
+ * Importing this module side-effect registers `<wexio-widget>` as a
+ * custom element. The web-component bundle ships in this package's
+ * `dist/widget.js`; the consumer's bundler resolves it relative to
+ * the package main.
+ *
+ * Vue treats `<wexio-widget>` as an unknown DOM element by default —
+ * configure your build so the compiler skips it:
+ *
+ *   // vite.config.js
+ *   import vue from "@vitejs/plugin-vue";
+ *   export default defineConfig({
+ *     plugins: [vue({
+ *       template: { compilerOptions: { isCustomElement: (tag) => tag === "wexio-widget" } },
+ *     })],
+ *   });
+ */
+
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
+
+import "./widget.js";
+
+export const WexioWidget = defineComponent({
+  name: "WexioWidget",
+  props: {
+    /** Wexio integration public key (`pk_live_...`). Omit for demo mode. */
+    publicKey: { type: String, default: undefined },
+    /** UI locale (BCP-47). Overrides the operator's `localeStrategy`. */
+    locale: { type: String, default: undefined },
+    /** Force the widget mode. Public consumers should not set this —
+     *  it auto-resolves to `production` when `publicKey` is set,
+     *  `demo` otherwise. */
+    mode: { type: String, default: undefined },
+    /** Unverified prechat prefill. */
+    prefillName: { type: String, default: undefined },
+    /** Unverified prechat prefill. */
+    prefillEmail: { type: String, default: undefined },
+    /** Unverified prechat prefill. */
+    prefillPhone: { type: String, default: undefined },
+    /** Known-user identity proof. Pass `null` to log out. */
+    user: { type: [Object, null], default: undefined },
+  },
+  emits: {
+    resize: (payload) =>
+      payload &&
+      typeof payload.width === "number" &&
+      typeof payload.height === "number",
+    close: () => true,
+  },
+  setup(props, { emit }) {
+    const elRef = ref(null);
+
+    const onResize = (event) => {
+      if (event && event.detail) emit("resize", event.detail);
+    };
+    const onClose = () => emit("close");
+
+    onMounted(() => {
+      const el = elRef.value;
+      if (!el) return;
+      el.addEventListener("wexio:resize", onResize);
+      el.addEventListener("wexio:close", onClose);
+      if (props.user) el.identify?.(props.user);
+    });
+
+    onBeforeUnmount(() => {
+      const el = elRef.value;
+      if (!el) return;
+      el.removeEventListener("wexio:resize", onResize);
+      el.removeEventListener("wexio:close", onClose);
+    });
+
+    // Identity is set imperatively rather than as a reactive attribute —
+    // mirrors the React component's `user` prop semantics. `null` /
+    // `undefined` logs the visitor out.
+    watch(
+      () => props.user,
+      (next) => {
+        const el = elRef.value;
+        if (!el || !el.identify) return;
+        el.identify(next ?? null);
+      },
+    );
+
+    return () =>
+      h("wexio-widget", {
+        ref: elRef,
+        "public-key": props.publicKey,
+        locale: props.locale,
+        mode: props.mode,
+        "prefill-name": props.prefillName,
+        "prefill-email": props.prefillEmail,
+        "prefill-phone": props.prefillPhone,
+      });
+  },
+});
+
+export default WexioWidget;