Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

wix-widget

Wix Widget 1 0 0

Gets the widget's current design preset.

The `getDesignPreset()` function returns a Promise that resolves to the widget's current preset name. To use this function on an inner (nested) widget, use [`getNestedWidget()`](#getNestedWidget).
> **Note**: 
> The `getDesignPreset()` function doesn't work in preview mode.

import wixWidget from 'wix-widget';

// ...

wixWidget.getDesignPreset()
.then ((designPreset) => {
    // Code to execute with the designPreset string 
})

// For example, designPreset can be "preset-1-wide"

Get a widget's design preset

getDesignPreset

string

A string of one or more nested widget selectors, which can include a few levels of nesting from outer to inner, separated by spaces. For example: `("#nestedWidget1")`, or `("#nestedWidget1 #nestedWidget2")`.

Selector

Gets the `wix-widget` module scoped to an [inner (nested) widget](https://support.wix.com/en/article/wix-blocks-creating-and-managing-widgets-within-widgets).

The `getNestedWidget()` function lets you use `wix-widget` functions on inner (nested) widgets. It receives a selector of an inner widget and returns a promise that resolves with an object representing the scope of the inner widget. 
> **Note**: 
> The `getNestedWidget()` function doesn't work in preview mode.

import wixWidget from 'wix-widget';

//...

wixWidget.getNestedWidget("#nestedWidget1 #nestedWidget2") //nestedWidget2 is inside nestedWidget1
    .then((nestedWixWidget) => nestedWixWidget.getDesignPreset())
    .then((nestedWidgetPreset) => {
        // do something with the design preset of nestedWidget2
    });

Get a nested widget's preset

getNestedWidget

object

Fulfilled - The `wix-widget` module scoped to the nested widget

Gets the widget's [properties](https://support.wix.com/en/article/wix-blocks-widget-api-properties).

The `getProps()` function returns a Promise that resolves to an object with all of the widget's properties. To use this function on an inner (nested) widget, use [`getNestedWidget()`](#getNestedWidget).
> **Note**: 
> The `getProps()` function doesn't work in preview mode.

import wixWidget from 'wix-widget';

// ...

wixWidget.getProps()
  .then(props => {
    // Code to execute with the props object
  })
  
// Props object can be, for example: {country: "us", upperLimit: 7}

Get a widget's properties

getProps

Fulfilled - Object with all of the widget's properties.

preset

Sets the widget's design preset.

The `setDesignPreset()` function returns a Promise that resolves when the design preset is set. To use this function on an inner (nested) widget, use [`getNestedWidget()`](#getNestedWidget).
> **Note**: 
> The `setDesignPreset()` function doesn't work in preview mode.

import wixWidget from 'wix-widget';

// ...

wixWidget.setDesignPreset('Mobile');

Set a widget's design preset

setDesignPreset

void

Fulfilled - when the design preset is set.

Object with some or all of the widget's properties.

props

Sets the widget's [properties](https://support.wix.com/en/article/wix-blocks-widget-api-properties). You can also assign a partial subset of the widget's properties.

The `setProps()` function returns a Promise that resolves when the properties are set. To use this function on an inner (nested) widget, use [`getNestedWidget()`](#getNestedWidget).
> **Note**: 
> The `setProps()` function doesn't work in preview mode.

import wixWidget from 'wix-widget';

// ...

wixWidget.setProps({saleIndicator: "No Sale"})
.then (() => {
    // Code to execture after setting the props
})

Set a widget's properties

setProps

# Introduction
> **Important**:
> - This module is available only in Wix Blocks. [Wix Blocks](https://support.wix.com/en/article/wix-blocks-check-out-our-articles) is an editor for building Wix apps.
> - This module doesn't work in preview mode. 

The `wix-widget` API is used within the code of panels built with the [Blocks Panel Builder](https://support.wix.com/en/article/creating-custom-panels-for-your-widgets-action-bar-buttons).
It enables your panel to interact with your Blocks widgets by controlling their properties, design presets, and more.  
To use this API, import `wixWidget` from the `wix-widget` module:

```javascript
import wixWidget from 'wix-widget';
```

Introduction

getDesignPreset( )