In this tutorial, you'll create an app with a simple site widget extension in Wix Blocks.
You can access Wix Blocks through the Wix Studio workspace.
Your newly-created app opens in Wix Blocks.
We'll now build an interactive site widget in Blocks.
To get started, select Blank canvas.
The Wix Blocks editor opens with a default widget.
Let's start by adding a text element to the widget.
Click Add Elements at the top of the editor, and then click Quick Add > Title.
Your widget now looks something like this:
Since we'll be interacting with the elements using code, we need some way to identify them. We do that using element IDs. You can see an element's ID when you hover over it or select it. When an element is selected you can change its ID using the Properties & Events panel.
Change the text element's ID to be message
.
To interact with an element in code, you first need to write code to select it. Now that our element has a unique identifier, selecting it with code is easy. We use the $w()
selector function to select an element by ID. We simply pass the element's ID, preceded by a hashtag (#
). So, to select an element with the ID elementId
, we write $w('#elementId')
.
Once an element is selected, we can use its properties and functions to interact with it. So, we can use the text element's text property to change the message like this:
$w('#message').text = 'Hello World';
Place this code in the onReady
event handler that appears in the Code Panel by default. Code in the onReady
event handler runs during the widget loading process when all the elements in the widget have finished loading.
The code should look like this:
1
Next, let's run some code in response to a button on our widget being clicked.
First, we'll need to add a button to the widget.
Click Add Elements on the top of the editor, and then click Quick Add > Button.
Give it the ID button
.
We’ll change what the button says, just like we did for the text element. To change the text of a button, make sure to use the label property. The code to change the button's text should look like this together with the previous code:
1
Finally, we'll add code that responds to the button being clicked. We again start by using the $w()
function to select the button. Then we use the onClick()
function to define what happens when the button is clicked. In this case, let's change the contents of the text element when the button is clicked.
Place the following code below the existing code:
1
So, the complete code looks like this:
1
Click Preview at the top of the editor to preview your widget.
When previewing the widget, click the button on the widget to see the text change.
We'll now install the app on a site to see how the widget behaves in the site editor.
The widget is now added to the site. You can drag it, resize it, and modify its design using the widget's action bar.
You now have a fully working app that can be installed on Wix sites. Take some time to play around with the widget in Blocks and try to add more features to your app.
Use the following resources to continue building your app: