@delivapp/chat-widget

Embeddable DelivApp ordering chat widget — drop it on any website via a <script> tag or install from npm. It renders inside a Shadow DOM, so it never clashes with the host page's styles, and it talks to the DelivApp chat API (/v1/chat/*).

Install

Script tag (any website)

The script-tag flow uses anonymous auth (DelivApp resolves the tenant from the page origin), so no token handling is needed on the page:

<script
  src="https://cdn.delivapp.example/delivapp-chat.global.js"
  data-base-url="https://chat.delivapp.example"
  data-auth="anonymous"
  data-auth-url="https://auth.delivapp.example/auth/api/social/anonymous"
  data-platform="web"
  data-primary="#007AFF"
  data-position="bottom-right"
  data-title="DelivApp"
  async></script>

It auto-mounts on load. To control it yourself, omit data-auth and call window.DelivAppChat.init(...).

npm (SPA / bundlers)

npm install @delivapp/chat-widget

import { DelivAppChat } from '@delivapp/chat-widget';

const widget = DelivAppChat.init({
  baseUrl: 'https://chat.delivapp.example',

  // Auth — choose one:
  getToken: async () => await fetchConsumerJwtFromMyBackend(), // host mints the JWT
  // auth: 'anonymous', authUrl: 'https://auth.delivapp.example/auth/api/social/anonymous', platform: 'web',

  theme: { primary: '#007AFF', position: 'bottom-right', title: 'DelivApp', avatarUrl: '/logo.png' },
  strings: { placeholder: 'Напишите сообщение…', send: 'Отправить' }, // localize any label
  language: 'he', // optional; also auto-detects RTL. Or force it with `dir: 'rtl'`.

  onReady: () => {},
  onOpen: () => {},
  onClose: () => {},
  onMessage: (reply) => {},
  onCartChange: (cart, cartId) => {}, // fires on any cart change: items, delivery type, address (with lat/lng)

  // In-place checkout: when set, the checkout button does NOT redirect — the host takes over.
  // Omit it to use the default link (opens the checkout URL in a new tab).
  onCheckout: ({ cartId, url }) => {
    router.push(`/checkout?cart=${cartId}`); // switch to your checkout page seamlessly
  },
});

widget.open(); // open() / close() / toggle() / restart() / destroy() / getCartId()

Authentication

The JWT signing secret never lives in the browser. Two modes:

• getToken — your backend mints a DelivApp consumer JWT; the widget calls your getter and refreshes it just before expiry (and on a 401).
• anonymous — the widget fetches a token from DelivApp auth (authUrl) using the page origin plus the x-api-platform header; DelivApp resolves the tenant from the origin. No keys required.

Configuration

| Option | Description | | --- | --- | | baseUrl | Chat API base URL (required). | | getToken / auth + authUrl | Authentication (see above). | | platform | x-api-platform value for anonymous auth (default web). | | cartId | Optional fixed cart id; otherwise one is generated and persisted. | | language | Language hint (ISO code). Selects the built-in string pack (en/he/ru; English elsewhere) and auto-detects text direction. | | dir | Text direction 'ltr' / 'rtl'. Defaults to auto-detect from language (RTL for he/ar/fa/ur/…). Script tag: data-dir. | | theme | Colors primary, onPrimary, background, text, accent (checkout); plus position (bottom-right/bottom-left), title, avatarUrl. Script tag: data-primary, data-on-primary, data-background, data-text, data-accent. | | strings | Override any UI label (on top of the language pack); templates use {min}/{max}/{name}/{count}. | | onReady/onOpen/onClose/onMessage | Lifecycle & integration hooks. | | onCartChange | (cart, cartId) => void. Fires whenever the cart changes — items, quantities, extras (cart.items[].extraItems[] carry ids), coupon, delivery type, or delivery address (cart.address includes lat/lng once geocoded). Receives the full current cart and the cart id. | | onCheckout | ({ cartId, url }) => void. When set, the checkout button calls this instead of navigating — for in-place checkout on your own site. When omitted, the button links to url (new tab). |

Develop

npm install
npm run build      # → dist/ : ESM + CJS + .d.ts (npm) and delivapp-chat.global.js (script tag)
npm run typecheck

Open demo/index.html to try the widget against a running chat API — it loads the local build from ../dist/delivapp-chat.global.js, so run npm run build first (or npm run dev to rebuild on every change). To test the published package instead, point the demo's <script src> at a pinned CDN version, e.g. https://cdn.jsdelivr.net/npm/@delivapp/[email protected]/dist/delivapp-chat.global.js.

The demo form also exercises the language / direction controls (LTR/RTL), in addition to colors, auth mode, and in-place checkout.