How It Works

Shadow DOM isolation

The widget renders in Shadow DOM, which means:

• Widget styles do not leak into the host page.
• Host page styles do not affect widget internals.
• No class name or selector conflicts.

Auto-created floating button also uses its own Shadow DOM container.

Lazy loading strategy

To keep page load fast:

• Screenshot library (html-to-image) loads only when needed.
• Annotation editor loads only when user asks to annotate.
• Both are prefetched in idle time via requestIdleCallback.
• React and Vue packages lazy-load core bundle on first interaction.

CDN delivery model

Vanilla script integration uses two layers:

1. Loader (widget.js), tiny and always fresh.
2. Hashed widget bundle (vanilla.[hash].js), immutable and long-cache.

This allows instant updates while preserving aggressive caching for heavy bundle assets.