Add a Site Widget Extension Using Wix 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 Widgets and Design panel. Here you can create new widgets or find existing ones.
  2. Click + Add 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.

  1. Click 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 (optional)

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 to rename, duplicate, or delete a preset.
  4. Make design changes to your widget.

Step 4 | Configure the widget's action bar and behavior (optional)

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 Configuration tab. The action bar opens.
  2. Select the 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 (optional)

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 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 (optional)

Add code to your widget to provide custom functionality and interactions using APIs. You can do this by adding properties, events, and functions to your site widget.

  1. Navigate to the Widgets and Design panel.
  2. Open the widget code panel.
  3. Click API to add properties, functions or events to your Widget API.
  4. Click 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.

Step 7 | Build your App

  1. Click Build.

  2. Select an app version and click Build.

  3. Select a site to install and test your app on.

  4. To modify your widget's installation settings, like automatically adding it to new pages, click the Wix Block logo, then go to App > Installation Settings.

    Alternatively, you can do this via the Extensions page in the Dev Center. Search for Blocks, choose Widget (Wix Blocks), then click on + Create On Blocks.

See also

Did this help?