> This page is for Designer API.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.webflow.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.webflow.com/_mcp/server.

# 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.

> **Beta**
>
> These methods are in public beta and may change with future releases.

### Syntax

```typescript
webflow.subscribe(
  event: 'selectedvariant',
  callback: (variant: Variant) => void
): 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:

| Property     | Type      | Description                                                                         |
| ------------ | --------- | ----------------------------------------------------------------------------------- |
| `id`         | `string`  | The unique identifier of the variant.                                               |
| `name`       | `string`  | The display name of the variant.                                                    |
| `isSelected` | `boolean` | Whether the variant is currently selected, which is always `true` in this callback. |

### 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

```typescript
const unsubscribeVariant = webflow.subscribe('selectedvariant', (variant) => {
  console.log('Variant changed:', variant.name);
  console.log('Variant ID:', variant.id);
});

// Stop listening after 10 seconds
setTimeout(unsubscribe, 10000);
```

[Try this example](https://webflow.com/oauth/authorize?response_type=code\&client_id=19511de1ec410f9228d8dcbc9420e67916dea80d86d18f0c9a533eb475ea0f62)