Add Interactions to Your Velo Site | Velo by Wix

Lets explore how you can start adding

interactions to your WIX site. With Velo, you can use code to add all sorts of interactions, like hovering over an element, clicking on a button,

toggling a switch, and much more.

An interaction includes an element, an event that triggers the interaction, and an effect that happens when the event is triggered. Interactions are simple to implement and can really enhance the visual and functional experience for your site visitors. Lets create a simple text reveal interaction with a button click as the event.

To get started, go to the editor

and turn on dev mode.

Now you can set up your page

so it has all the elements you'll need for the interaction. For this example, we've added some text elements and a button down here in

the Properties and Events panel.

Assign your elements clear ID so they're easy to use in code.

Now you'll want to set any default

values you need for the interaction. In our example, we want to start with the second paragraph, collapsed or hidden, so it's not seen until the event is triggered.

Now that the page is all set up, let's talk about how to add your code.

Whenever you write code for an interaction, you'll need to create an event handler function that will be triggered by the event you choose. Inside that function, you'll write the code that determines what effect should happen when the event occurs. Here's what that looks like in this example. When a site visitor clicks on the Read More button, we want the second paragraph, which is collapsed when the page loads, to expand. Since our event is a click, we'll add an OnClick event handler to the Read More button.

You'll notice how we use the $w

selector function to select the read more button in Velo. The $w selector function lets you select an element so you can work with it in code.

Inside the event handler, we'll add the code that tells the additional text to

expand when the button is clicked and there it is again. The $W selector function.

Here we'll use it to select and

work with our additional text element.

To see your effect in action, preview

the page, then trigger the interaction.

And that's all there is to it.

There are endless ways you can use interactions from Basic to more advanced to customize the visitor experience on your site

and bring it to life. To learn more ways to expand your

site's capabilities with Velo, click here or visit our Learning Center@learn-code.wix.com.