Create a Reusable Widget
These are the basic steps for creating reusable widgets packaged in an app:
In the Wix Editor, turn on developer tools. From the menu, select Code > Turn on Developer Tools.
On the left side of App Builder, hover over My Widgets, open the ... menu, and select Create New. This opens an App Builder page that includes a single new widget. Rename it to keep track of your work.
A single instance of App Builder enables you to develop a single app, which typically, would be a collection of related widgets. All of the widgets you create on this page are part of that app, and when you build the app you build all of its widgets. When you import the app to a website in the Wix editor you import that package of widgets, and you can choose which to add to the site.
Select Save to save your app. Give it a meaningful name, such as MyHeaders. In the Alpha release you cannot rename your apps, so choose wisely. You can return to the App Builder from any site you own. Hover over My Apps, open the ... menu, find your app and select Edit in App Builder.
Design your widget using all of the available elements and features of Wix, and add code as needed for the widget functionality. You can create a simple widget without code, or add code, as shown in our tutorial.
(Optional) Add more widgets to your app by clicking Add new widget in the expanded Widgets list.
Save, preview and build your app.
Choose Save to save your app, including all of its widgets. Save saves your work, but does not enable you to import or install widgets, nor does it trigger an update for widget consumers.
Choose Preview to test the widget in the contained environment of App Builder, before importing it to web sites. When you preview your widget, you can see and change your widget properties in the API Properties panel, so you can check the widget's behavior. You can try your widgets on other sites only after you build your app.
Choose Build to create a version of the app that you can import to your Wix websites. If you make changes to the app you can build an updated version that will be available to any site on which it was installed, including sites you transferred to another owner. Read more about the app update experience here.
Use the widget on your site
Import apps and use their widgets in the Wix Editor.
Open The Wix Editor, turn on developer tools, expand My Apps, select Import an App, and import the app whose widgets you want to use.
Expand the app, hover over the widget you want, and select Add to page. You can add the same widget to a page as many times as you want, just like any other Wix element.
If you added properties to the Widget API, your widget has a Settings panel. Change the properties in the settings panel and preview the site to see the changes in action.
(Optional) Change the appearance of elements in the widget, or remove them altogether. If you want to bring those elements back, select Add Elements, and choose the ones you want, or choose Show all elements to return all of the original elements. If you want to reset the widget to its original look, choose Reset to latest official look.
Change code, functionality and design.
Your update will be available to every site on which any version of your app was installed. To update an existing app, open the App Builder page for the app, expand Widgets, and select the widget you want to edit. Make your changes, then save, preview and build. Be sure to notify site owners of pending updates and what they include.
Each time you build an app in the App Builder, site owners will see a red dot near the app name in Wix Editor. Hover over the dot to see the Update App options:
Update & Keep Current Design, which updates functionality but does not overwrite your design customizations.
If you choose Update & Keep Current Design, but decide later that you want to update the look, select the widget, open Add Elements, and click Reset to latest official look. This overwrites your design.
Update & Replace Design, which replaces your app with the new version, including the new design.
Find all the information you need to get started on your next web component.