Build a Site Widget in Blocks

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

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 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 before adding elements.

  1. Click add-elements-icon 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 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 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 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 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 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 to your panels to customize them.

Step 6 | Add code to your widget

Add code 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 widget code panel.
  3. Click api-icon API to add properties, functions or events to your Widget API.
  4. Click properties-events-icon 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 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. 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.
  2. Click the three dots and select Editor Experience > Edit Installation Settings.
  3. Edit the settings.
  4. To switch to another widget, select a different widget and repeat the process.
Did this help?