> 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: Create a Settings Panel for a Site Widget or Plugin (Wix CLI and Self-Hosting)

## Article: Create a Settings Panel for a Site Widget or Plugin (Wix CLI and Self-Hosting)

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/create-a-settings-panel-for-a-site-widget-or-plugin-wix-cli-and-self-hosting.md

## Article Content:

# Create a Settings Panel for a Site Widget or Plugin (Wix CLI and Self-Hosting)

When creating a [self-hosted site widget](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/add-self-hosted-site-widget-extensions-with-custom-elements.md), a [self-hosted site plugin](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/add-self-hosted-site-plugin-extensions-with-custom-elements.md), a [site widget built with the CLI](https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/about-site-extensions.md#custom-element-site-widget-extensions), or a [site plugin built with the CLI for Apps](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/site-plugins/add-a-site-plugin-extension-in-the-cli.md), you also need to create a settings panel, enabling users to customize the widget or plugin in the editor.

The settings panel is displayed when users click the **Settings** button in the widget or plugin’s action bar. It's rendered as an iframe, giving you the flexibility to build it using any tools or frameworks you choose.

> **Note**: For site widgets created with Wix Blocks, you can build [custom panels](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/about-panels-in-blocks.md) directly within the Blocks editor.

## Design the settings panel

When designing your settings panel's UI, ensure it is intuitive and user-friendly. Consider using the [Wix Design System](https://dev.wix.com/docs/build-apps/develop-your-app/design/about-the-wix-design-system.md) to maintain a cohesive design.

Use components such as:

* [`SidePanel`](https://www.wix-pages.com/wix-design-system/?path=/story/components-overlays--sidepanel#Settings_panel) to create a structured layout.
* [`FormField`](https://www.wix-pages.com/wix-design-system/?path=/story/components-form--formfield) and input components to collect user input effectively.

These tools help you design a panel that aligns with the overall Wix editor experience.

## Code the settings panel

In the panel’s code, use Wix's [JavaScript SDK](https://dev.wix.com/docs/sdk.md) to [access widget properties](https://dev.wix.com/docs/sdk/host-modules/editor/widget/introduction.md) and [retrieve environmental data from the editor](https://dev.wix.com/docs/sdk/host-modules/editor/info/introduction.md), as well as access and manage Wix business solutions.

To apply changes made in the settings panel to the widget, use the Widget API’s [`setProp()`](https://dev.wix.com/docs/sdk/host-modules/editor/widget/set-prop.md) function. Widget properties are bound to your custom element’s attributes, so any change in the properties automatically updates the corresponding attribute. To handle attribute updates so they are reflected in your widget in the editor, use the [`attributeChangedCallback()`](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes) in your custom element's code.

Here is a sample code snippet showing how to update a custom element’s attribute:

```js
import { editor, widget } from '@wix/editor';
import { createClient } from '@wix/sdk';

const client = createClient({
  host: editor.host(),
  modules: { widget }
});

// Get the value of the settings panel's input control
const id = 'color_input';
const element = document.getElementById(id);
const val = element.value; 

// Update the custom element's 'color' attribute
client.widget.setProp('color', val);
```

## Integrate Wix's native color and font pickers

Enhance the user experience by integrating Wix's native color and font pickers. These tools allow users to select from their site’s theme colors and fonts, ensuring consistency with the site's design.

Learn more about [using Wix's color and font pickers](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/integrate-wix-s-native-color-and-font-pickers-in-a-site-widget-s-settings-panel.md).

## Connect widget colors and fonts to a site theme

Wix sites expose theme styles as CSS variables, which include tokens for colors and fonts. These variables enable your widget to automatically adopt the site’s theme, ensuring seamless visual integration.

Learn more about [connecting colors and fonts to a site theme](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/connect-a-custom-element-s-colors-and-fonts-to-a-site-theme.md).

## Identify your widget's app instance

An [app instance](https://dev.wix.com/docs/build-apps/develop-your-app/access/app-instances/about-app-instances.md) represents a specific installation of your app on a Wix site, identified by a unique `instanceId`.

You may need the instance ID for various purposes, such as:

* **Storing Site-Specific Data**: Use the `instanceId` as a foreign key to save data like user preferences or analytics.
* **Configuring Settings**: Apply site-specific configurations such as design settings and integration preferences.

For security reasons, the app instance ID isn’t directly accessible in site widgets or settings panels. Instead, you can securely extract it by sending a Wix access token to a backend API. The backend can decode the token, retrieve the instance ID, and perform any necessary business logic.

For implementation details, see:

* [Identify the App Instance in a Self-Hosted Site Widget](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/self-hosting/supported-extensions/site-extensions/site-widgets-and-plugins/identify-the-app-instance-in-a-self-hosted-site-widget.md)
* [Identify the App Instance in a Site Widget Built with the CLI](https://dev.wix.com/docs/wix-cli/guides/extensions/site-extensions/site-widgets/identify-the-app-instance-in-a-site-widget.md)