> 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: Build a Site Widget in Blocks

## Article: Add a Site Widget Extension Using Wix Blocks

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/site-widgets/build-a-site-widget-in-blocks.md

## Article Content:

# Build a Site Widget in Blocks

<blockquote class="caution">

**Editor compatibility**

Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).

</blockquote>

A site widget is a core component of the user interface (UI) of your Wix Blocks app. Widgets are the parts of your app that visitors directly interact with, usually composed of various elements like buttons, input fields, images, and more.

This article explains how to add a site widget to your app using Wix Blocks.

## Before you begin

- You must be logged into your [Wix Studio](https://support.wix.com/en/article/wix-studio-switching-to-wix-studio) account.
- Use an existing app or [create a new one](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/get-started/create-a-blocks-app.md).
- Open the Wix Blocks editor through [Custom Apps](https://manage.wix.com/account/custom-apps) in your Studio workspace.

## Step 1 | Add your widget in Wix Blocks

1. Navigate to the **App Interface** panel. Here you can create new widgets or find existing ones.
2. Click **Create Extension**.
3. Select **Widget** to start creating an empty widget, or use one of the pre-designed widget options. 

Alternatively, you can ask the [Blocks AI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/get-started/about-the-blocks-ai.md) to generate your widget.

## Step 2 | Add elements to your widget

Elements are the UI components that make up your widget. You can add text, media, shapes, and other elements to your widget. If you are designing your widget from scratch, make sure to go over our [design guidelines](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-design/blocks-widget-design-guidelines.md) before adding elements. 

1. Click ![add-elements-icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/e173767638933ba8a4328239fb25cd35.png) **Add Elements** to open the **Elements** panel.
2. Drag and drop the elements you want to your widget.

## Step 3 | Add design presets to your widget

[Design presets](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-design/create-and-manage-design-presets.md) allow you to create multiple designs for the same widget. The functionality remains the same, only the design changes.

1. Navigate to the **Design Presets section** of the **Widgets and Design** panel.
2. Click **+ Add Design Preset**.
3. Click the ![more-actions-icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/fb4a1f1113ca092107a5a9b355ea9235.png) **More Actions** icon to rename, duplicate, or delete a preset.
4. Make design changes to your widget.

## Step 4 | Configure the widget's action bar and behavior 

Each element of your widget has an [action bar](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-configuration/configure-action-bars-in-blocks.md) that you can customize. For example, you can add a main action button, animations, and other elements to the action bar. The entire widget also has an action bar, for configuring settings and adding and removing elements. These action bars are used by a site builder who installs the app, to configure the widget and its elements. 

1. Navigate to the **Editor Experience > Configuration** tab. 
2. Select the widget or element whose action bar you want to customize.
3. Add actions to your action bar by clicking **+ Add** and selecting which actions you want to add.
4. Modify the action buttons and connect them to custom panels or dashboard pages that you created. 
5. [Modify the behavior](https://support.wix.com/en/article/wix-blocks-configuring-widget-and-elements-display-names-and-behavior) of your widget by selecting whether the widget can be **duplicated** or **resized** from the **behavior** panel.

## Step 5 | Create custom panels 

You can change the user interface and [create panels](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-configuration/about-the-editor-experience-in-blocks.md) that are unique to your widget, which direct the flow and how the widget is used.

1. Navigate to the **Editor Experience > Custom Panels** tab.
2. Click **Create Panel** and name your panel.
3. Add elements to your panel by clicking the **+ Add Element button**. For example, you can add elements such as thumbnails, buttons, dropdowns, and so on.
4. Optionally [add code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/editor-experience-panels/add-code-to-custom-panels-in-blocks.md) to your panels to customize them.

## Step 6 | Add code to your widget

[Add code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/code-in-blocks/about-widget-code-in-blocks.md) to create your widget's custom functionality and interactions, or create your widget's public API. 

1. Navigate to the **Widgets and Design** panel.
2. Open the ![code-icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/68fe013a0ebaf13bd5b776c0f94b7ac3.png) **widget code** panel.
3. Click ![api-icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/27b596c6cfb78844bc7d2a62b9aa2802.png) **API** to add properties, functions or events to your [Widget API](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/widget-api/about-the-widget-api.md).
4. Click ![properties-events-icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/ac47cc098b9635a7bf95cc96c4077d9b.png) **Properties & Events** to add properties, events, and functions to your widget elements.
5. Write your code in the code editor in the bottom part of your screen.
6. Click **Preview** to test your code.

Alternatively, you can ask the [Blocks AI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/get-started/about-the-blocks-ai.md) to generate the code for your widget. 

## Step 7 | Set installation settings

Determine how your widget is presented in the editor with the [Blocks installation settings](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/deploy-and-manage-blocks-apps/configure-blocks-installation-settings.md). For example, which preset is the default preset and whether the widget is presented in the editor's **Add +** panel.

1. Hover over the widget name in the **App Interface**.
1. Click the three dots and select **Editor Experience** > **Edit Installation Settings**.
1. Edit the settings.
1. To switch to another widget, select a different widget and repeat the process.