> ## Documentation Index
> Fetch the complete documentation index at: https://docs.selektable.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Multi-Product visualization

> Visualize multiple products together in a single scene

# Multi-Product visualization

When multi-product mode is enabled on a widget, customers can select 2-5 products to visualize together. This is useful for showing how items complement each other. For example, a sofa with a matching coffee table and rug.

<Note>
  Multi-product mode is configured in the widget settings in the dashboard, not through the SDK. The SDK passes individual product context; the widget handles multi-product selection in its UI.
</Note>

## How it works

1. Enable **Multi-Product** in your widget configuration (set max products: 2-5)
2. The customer opens the widget and uploads a photo
3. The widget UI lets them add additional products before generating
4. All selected products are rendered together in the scene

## Providing product data

Even with multi-product enabled, you open the widget with a single product. The customer adds more products through the widget UI:

```javascript theme={null}
Selektable.open('widget_room', {
  productId: 'sofa-001',
  productTitle: 'Modern Blue Sofa',
  productImage: 'https://myshop.com/images/sofa.jpg',
  productImages: [
    { id: 1, src: 'https://myshop.com/images/sofa.jpg', alt: 'Blue Sofa' }
  ]
});
```

The widget will show the initial product and provide an interface for the customer to browse and add more products from your store.

## Cart integration with multi-product

When multi-product is enabled and the customer adds to cart, the `onAddToCart` callback is called once per product:

```javascript theme={null}
Selektable.open('widget_room', {
  productId: 'sofa-001',
  productTitle: 'Modern Blue Sofa',
  productImage: 'https://myshop.com/images/sofa.jpg',

  onAddToCart: async function (product, quantity) {
    // This is called for each product the customer adds
    // product.id might be 'sofa-001', 'table-002', or 'rug-003'
    const response = await fetch('/api/cart', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        productId: product.id,
        quantity: quantity
      })
    });

    return { success: response.ok };
  },

  onViewCart: function () {
    window.location.href = '/cart';
  }
});
```