Installation

Package Manager

Install via npm or any compatible package manager:

npm install @vizochok/widget

yarn add @vizochok/widget

pnpm add @vizochok/widget

Then import and use in your application:

import { VizochokWidget } from '@vizochok/widget';

const widget = new VizochokWidget({
  apiKey: 'pk_your_public_key',
  storeId: 'your-store-id',
});

widget.mount();

CDN / Script Tag

For sites without a build system, load the widget directly from a CDN:

<script src="https://cdn.jsdelivr.net/npm/@vizochok/widget@latest/dist/vizochok-widget.umd.js"></script>
<script>
  const widget = new VizochokWidget({
    apiKey: 'pk_your_public_key',
    storeId: 'your-store-id',
  });
  widget.mount();
</script>

The UMD build exposes a global VizochokWidget constructor.

Pin a specific version in production (e.g., @vizochok/[email protected]) instead of @latest to avoid unexpected breaking changes.

Bundle Size

Build	File	Size
ESM	`vizochok-widget.esm.js`	~11 KB gzip
UMD	`vizochok-widget.umd.js`	~12 KB gzip

The SDK has zero runtime dependencies. All styles are bundled as a template literal string and injected into a Shadow DOM <style> element at mount time.

TypeScript Support

The package ships with full TypeScript declarations (dist/types.d.ts). All public interfaces are exported:

import type {
  VizochokWidgetConfig,
  CartItem,
  CartChangedEvent,
  ProductItem,
  SessionSummary,
  WidgetError,
  ThemeMode,
} from '@vizochok/widget';

No additional @types/ package is needed.

Browser Compatibility

The widget uses standard Web APIs and is compatible with all modern browsers:

Browser	Minimum Version
Chrome	63+
Firefox	67+
Safari	13.1+
Edge	79+
Mobile Safari	13.4+
Chrome Android	63+

The widget relies on Shadow DOM v1 for CSS isolation and WebSocket for real-time communication. Internet Explorer is not supported.

Module Formats

The package provides two build outputs:

ESM (vizochok-widget.esm.js) — for modern bundlers (Vite, Webpack 5, Rollup, esbuild). Referenced via the module field in package.json.
UMD (vizochok-widget.umd.js) — for script tags and legacy bundlers. Referenced via the main field in package.json.

Most bundlers will automatically pick the correct format based on your import syntax.

Getting Started

Integration Guides

Widget SDK

Webhooks

Concepts

Package Manager

CDN / Script Tag

Bundle Size

TypeScript Support

Browser Compatibility

Module Formats

Next Steps

Configuration

Quick Start

​Package Manager

​CDN / Script Tag

​Bundle Size

​TypeScript Support

​Browser Compatibility

​Module Formats

​Next Steps

Configuration

Quick Start

Package Manager

CDN / Script Tag

Bundle Size

TypeScript Support

Browser Compatibility

Module Formats

Next Steps