---
title: "Preview mockup slider | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/workflows/ui-framework/widgets/preview-mockup-slider/"
---

# Preview mockup slider

> This widget shows the personalization result of products configured in the [PIM module](https://customerscanvas.com/docs/hub/admin-guide/pim.md). You can use this widget at the **Approval** step for products with or without mockups.

```json
{
    "name": "preview-slider",
    "type": "preview-mockup-slider",
    "params": {...}
}
```

The `preview-mockup-slider` widget only uses mockups of the preview type. To provide the personalization result, define the following properties:

* The `productId` property - an ID of a PIM product defined in BackOffice.
* The `stateId` property - an ID of a state file with the personalized design obtained from the Design Editor or asset folder.
* The `previewSize` property - an object containing `width` and `height`.

![Preview mockup slider.](./images/preview-mockup-slider-without-mockup.png)

```json
{
    "name": "preview-slider",
    "type": "preview-mockup-slider",
    "params": {
        "productId": "{{ $['design-selector']._.productId }}",
        "stateId": "{{ $['editor'].stateId }}",
        "previewSize": {
            "width": 1200,
            "height": 1200
        }
    }
}
```

## Methods

You can use the `createPreviewResource()` method if you need to save the personalization result and pass it to another widget. This method returns a link to the preview saved in Asset Storage.

## Params

| Name | Type | Description | Default value |
|--|--|--|--|
| `productId`|number\|string|ID of a PIM product in BackOffice| |
| `productVersionId`|number\|string|_(Optional)_. ID of a PIM product version |undefined|
| `productVariantId`|number\|string|_(Optional)_. ID of the selected product variant |undefined|
| `stateId`|string|ID of the personalized design| |
| `previewSize`|object|Defines the width and height of preview images| |
| `previewSize.width`|number|The preview width, in pixels|800|
| `previewSize.height`|number|The preview height, in pixels|800|