Skip to main content

​
Package Manager

Install via npm or any compatible package manager: 
npm install @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

BuildFileSize
ESMvizochok-widget.esm.js~11 KB gzip
UMDvizochok-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:
BrowserMinimum Version
Chrome63+
Firefox67+
Safari13.1+
Edge79+
Mobile Safari13.4+
Chrome Android63+
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.

​
Next Steps

Configuration

Learn about all available config options

Quick Start

Get a working widget in 5 minutes