Methods

`open(widgetId, options?)`

Opens the widget modal. If the widget hasn’t been loaded yet, shows a loading spinner while the iframe loads. If the widget was preloaded, opens instantly.

Selektable.open('widget_abc123', {
  productId: 123,
  productTitle: 'Blue Sofa',
  productImage: 'https://example.com/sofa.jpg'
});

Parameters:

The widget ID from your dashboard (e.g., widget_abc123).

options

ProductOptions

Product data and cart callbacks. See Product Options for the full reference.

Behavior:

Locks page scroll while the widget is open
Sends identity, locale, and product context to the iframe
If called while the widget is already open, does nothing
If called while the widget is loading, waits for load to complete

`close(widgetId)`

Closes an open widget and unlocks page scroll.

Selektable.close('widget_abc123');

The widget ID to close.

Behavior:

Hides the iframe (keeps it in DOM for fast re-opening)
Sets widget state back to ready
Unlocks page scroll
If the widget isn’t open, does nothing

Customers can also close the widget by clicking the close button inside the widget UI. This sends a widget:modal-close message that the SDK handles automatically.

`preload(widgetId)`

Creates the widget iframe in the background without showing it. When open() is called later, the widget appears instantly.

// On page load
Selektable.preload('widget_abc123');

// Later, on button click. Opens instantly
Selektable.open('widget_abc123', { ... });

The widget ID to preload.

Behavior:

Creates a hidden iframe in the DOM
The iframe loads the widget UI in the background
If an iframe already exists for this widget, does nothing
Does not lock scroll or show any overlay

`discover()`

Scans the DOM for elements with data-selektable-widget attributes and registers them as widget context elements.

Selektable.discover();

No parameters. Behavior:

Finds all [data-selektable-widget] elements
Associates each element with its widget instance
Does not create iframes or open widgets. It only registers context elements for later use
Called automatically on page load (DOMContentLoaded)

Use this after dynamically adding widget elements to the page (e.g., in SPAs). Data attributes recognized:

Attribute	Description
`data-selektable-widget`	Widget ID (required)
`data-product-id`	Product ID
`data-product-title`	Product title
`data-product-images`	JSON array of product images
`data-product-url`	Product page URL

<div data-selektable-widget="widget_abc123"
     data-product-id="456"
     data-product-title="Blue Sofa"
     data-product-images='[{"id":1,"src":"https://example.com/sofa.jpg","alt":"Sofa"}]'>
</div>

`track(eventName, properties?)`

Tracks a named event with optional properties. Currently supports the $conversion system event for tracking purchases and leads.

Selektable.track('$conversion', {
  orderId: 'order-123',
  totalCents: 4999,
  currency: 'EUR',
  items: [
    { productId: '456', quantity: 1, priceCents: 4999, totalCents: 4999 }
  ]
});

eventName

string

required

The event name. Use $conversion for purchase and lead tracking.

properties

Record<string, unknown>

Event properties. For $conversion, see the property reference.

Behavior:

Only $conversion events are processed; other event names are silently ignored
Automatically includes store ID, visitor ID, and session ID
Deduplicates by orderId within the browser session (prevents double-tracking on page refresh)
Fire-and-forget — does not return a value or block page navigation
Requires the embed script to be loaded on the page

Supported events:

Event	Description
`$conversion`	Purchase or lead conversion. See Conversion tracking.

Client SDK

Examples

Methods

Methods

`open(widgetId, options?)`

`close(widgetId)`

`preload(widgetId)`

`discover()`

`track(eventName, properties?)`

​Methods

​open(widgetId, options?)

​close(widgetId)

​preload(widgetId)

​discover()

​track(eventName, properties?)

Methods

`open(widgetId, options?)`

`close(widgetId)`

`preload(widgetId)`

`discover()`

`track(eventName, properties?)`