> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Wix Style Parameters

## Article: Wix Style Parameters

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/deprecated/iframe/wix-style-parameters.md

## Article Content:

# Wix Style Parameters

You can store certain customizations that a user changed, like your app’s color, inside the Wix site (instead of saving it on your database).

The ```wix-param``` key works with color/font parameters, numbers, and booleans.

## How it works

Use our custom style parameter key, wix-param. Here’s the basic flow:

1.  **Set a key name to identify this data**: For example, the key name for your app’s background color can be: ```backgroundColor```.
2.  **Set the starting values in the UI control and in the extension itself**: For example, for the app’s color, you’ll save these values in the color picker and in the app’s CSS – see our example below for more guidance.
3.  **For fonts and colors – we’ll reflect the user’s changes in the app**: When the user changes the value, we’ll automatically change the value in the Wix site, so there’s no need for you to listen for an ```onChange``` event.
4.  **For booleans and numbers, listen for the STYLE\_PARAMS\_CHANGE event**: When the user changes the value,  we’ll automatically change the value in the Wix site. You should reflect these changes in your app.  Use the ```addEventListener method```.

> **Note:** You can only use wix-param in UI controls that support it.

## Supported UI controls

### Color and Font Parameters

*   ColorPicker
*   ColorPickerWithOpacity
*   FontPicker
*   Font and color picker

### Number Parameters

*   ToggleButton
*   RadioButton
*   Dropdown
*   Slider

### Boolean Parameters

*   Checkbox
*   ToggleSwitch

## Color Values

When setting colors in your app, you can use any value between color-1 to color-25 (color-1, color-2, color-3, etc). To decide the color value, use our [color reference guide](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/deprecated/iframe/design-your-site-extensions.md).

## Font Values

When setting fonts in your app, you can use the values listed in the table below. To decide the font value, use our font reference guide.

|Font theme you chose for your starting scheme |Font Reference Number (use in the UI control) | Font theme (use in the website extension) |
| ----------------------- | ----------------------------------------- | ---------- |
| Heading 1               | font\_0                                   | Title      |
| Heading 2               | font\_2                                   | Page-title |
| Heading 3               | font\_3                                   | Heading-XL |
| Heading 4               | font\_4                                   | Heading-L  |
| Heading 5               | font\_5                                   | Heading-M  |
| Heading 6               | font\_6                                   | Heading-S  |
| Paragraph 1             | font\_7                                   | Body-L     |
| Paragraph 2             | font\_8                                   | Body-M     |
| Paragraph 3             | font\_9                                   | Body-S     |

## Example

Here's how to implement ```wix-param```. The examples below use AngularJS, but the concepts apply to React templates/JSX and jQuery too.

We'll use the Font & Color Picker as an example.

1.  **Set up the font and color picker**: In your app settings panel, add the font and color picker UI control.

```javascript
<wix-control name="UI.fontAndColorPicker" props="{
            title: 'Description',
            //set up the starting color and font in your app
            startWithTheme: 'font_8',
            startWithColor: 'color-2',
            //We save these values inside the Wix site
            wix-param-font: 'myBodyFont',
            wix-param-color: 'myBodyColor',
    }"></wix-control>
```

2.  **Set the same starting values in the extension itself**: You can use the color and font style parameters inside an internal CSS within your website extension. It’s a simple template engine that uses {{value}} to interpolate the style parameters.
    1.  Add the wix-style attribute in the <style> element.
    2.  Separate the style key name and the fallback (default) value with a space, for example:  {{style.wix-param-key fallback\_value}}.

> **Note:**
>  
> Using AngularJS? Since AngularJS reads {{ }} as an expression, add the ng-non-bindable directive to the <style> element.

```javascript
<style wix-style>
   h1 {
//Font theme is paragraph 2
       font:{{style.myBodyFont Body-M}} 
       color:{{style.myBodyColor color-2}} 
   }
   footer {
       //Background color
       background-color: {{color-1}}; 
   }
</style>
<body>
   <h1>Wix Title</h1>
   <footer>
       <h2>Footer</h2>
   </footer>
</body>
```

> **Note:** You can get all the style parameters that were set in the app’s settings. To do so, use ```Wix.Styles.getStyleParams```.

```javascript
//get the style parameters
 
  Wix.addEventListener(Wix.Events.STYLE_PARAMS_CHANGE, function(data) {
      console.log(data);
  });
 
//returns an object with all of the style parameters
 
{
booleans: {
          showDescription: true
          showTitle: true
}
Colors:{
          titleColor:{
                          themeName:"color-5"
                          value:"#302D2D"
                          }
}
fonts: {
          btnFont:{
                        displayName:"Paragraph 2"
                        editorKey:"font_8"
                        family:"din-next-w01-light"
                        fontStyleParam:true
                        preset:"Custom"
                        Size:15
                        Style:{
                                bold:false
                                italic:false
                                underline:false
                     }
            value:"font:normal normal normal 15px/18px din-next-w01-light,
            din-next-w02-light,din-next-w10-light,sans-serif;"
 
}
}
Numbers:{
               Animation: 2
}
```