User changes variant (Beta)

webflow.subscribe("selectedvariant", callback)

Run a callback function when a user selects a different variant on the component canvas.

Knowing which variant is selected can help your extension update a panel UI or synchronize external state with the active variant.

Syntax

1
webflow.subscribe(
2
  event: 'selectedvariant',
3
  callback: (variant: Variant) => void
4
): Unsubscribe;

Parameters

event : "selectedvariant"

The name of the event to subscribe to, in this case selectedvariant to be notified when the selected variant changes.

callback: (variant: Variant) => void

The function to call each time that the event occurs. The function receives the newly selected Variant object. Use this function to define what happens when the event is triggered. It runs on the initial subscription and on each time the selected variant changes.

The returned Variant object has the following properties:

Returns

Unsubscribe

This is a special function that the webflow.subscribe() method returns after subscribing to the event. Call this function to stop receiving notifications.

Example

1
const unsubscribeVariant = webflow.subscribe('selectedvariant', (variant) => {
2
  console.log('Variant changed:', variant.name);
3
  console.log('Variant ID:', variant.id);
4
});
5
6
// Stop listening after 10 seconds
7
setTimeout(unsubscribe, 10000);