@opiniom/web

Lit-based web component chat widget for OpinioM. Renders in a Shadow DOM for full style isolation — drop it into any page without CSS conflicts.

Install

npm install @opiniom/web @opiniom/core @opiniom/types

Quick Start

import { createClient } from "@opiniom/core";
import { mount } from "@opiniom/web";

const client = await createClient({
  projectKey: "pk_live_abc123",
  jwt: customerSignedJwt,
});

const widget = mount({ client });

A floating chat bubble appears in the bottom-right corner. Click it to open the chat panel.

Mount Options

const widget = mount({
  client: opiniomClient,         // Required - from @opiniom/core
  widgetConfig: config,          // Optional - override server config
  mode: "floating",              // "floating" (default) | "inline"
  container: "#chat-container",  // Required when mode is "inline"
  theme: {                       // Optional runtime theme overrides
    bubbleBgSelf: "#6366f1",
    cssVars: {
      "--om-primary": "#6366f1",
    },
  },
});

Mounted Widget API

// Remove the widget from the page
widget.unmount();

// Update theme at runtime
widget.setTheme({
  bubbleBgSelf: "#10b981",
  cssVars: { "--om-primary": "#10b981" },
});

Inline Mode

Embed the chat directly inside a container element:

<div id="chat-container" style="height: 600px;"></div>

<script type="module">
  import { createClient } from "@opiniom/core";
  import { mount } from "@opiniom/web";

  const client = await createClient({
    projectKey: "pk_live_abc123",
    jwt: token,
    mode: "inline",
  });

  mount({
    client,
    mode: "inline",
    container: "#chat-container",
  });
</script>

CDN Usage

Load directly from the CDN without a bundler:

<script type="module">
  import { createClient } from "https://cdn.example.com/v1/opiniom-core.es.js";
  import { mount } from "https://cdn.example.com/v1/opiniom-web.es.js";

  const client = await createClient({
    projectKey: "pk_live_abc123",
    jwt: "your-jwt-token",
  });

  mount({ client });
</script>

Components

The widget is composed of these Lit web components (all rendered in Shadow DOM):

| Component | Description | |---|---| | om-app | Root container | | om-launcher | Floating chat bubble button | | om-panel | Chat window | | om-header | Panel title bar with close button | | om-conversation-list | List of conversations | | om-thread | Message list with scroll and pagination | | om-message | Individual message with reactions and attachments | | om-composer | Message input with file upload |

Theming

The widget reads theme configuration from your OpinioM dashboard (colors, fonts, layout). Override at runtime:

widget.setTheme({
  cssVars: {
    "--om-primary": "#6366f1",
    "--om-bg-panel": "#1a1a2e",
    "--om-text-primary": "#ffffff",
    "--om-radius": "12px",
  },
});

Style Isolation

The widget renders inside a Shadow DOM, so your page's CSS won't affect it and it won't affect your page. No class name conflicts, no specificity wars.

Bundle Size

| Format | Size (gzip) | |---|---| | ESM | ~19 KB |

Related Packages

| Package | Description | |---|---| | @opiniom/core | Framework-agnostic core client | | @opiniom/react | React provider, hooks, and components | | @opiniom/types | TypeScript type definitions |

License

MIT