Velo by Wix is an innovative product that lets you build robust web applications with zero setup. Work in Wix's Editor, add custom functionality and interactions using Velo APIs, and enjoy serverless coding in both the front-end and backend. With Velo, your web app can be up and running in a fraction of the time it would normally take you.
To introduce you to Velo, we created our own version of a "Hello, World!" example: a simple currency converter site that uses the wix-fetch API to connect to a 3rd service. Site visitors choose source and target currencies from dropdowns and enter an amount to convert. The results are displayed in a text box.
Follow the steps below to get familiar with the basic structure and syntax of Velo. You can also scroll to the bottom to see the complete code for this exercise.
Enable Velo in the Wix Editor to let you work with code in your site.
Add page elements in the Wix Editor:
- On the left side of the Editor, click Add.
- Add the page elements illustrated below to your site.
Copy Code* When you add each element, set its ID in the [Properties](https://support.wix.com/en/article/velo-working-with-the-properties-panel) panel that appears on the right side of the Code panel. Use the name shown below for each element, minus the hashtag. See the table below for a full list of the elements and where to find them in the Add menu.
|Element||Location in Add Menu||Description||ID|
|Dropdown||Input||For selecting the source currency||sourceCurrency|
|Dropdown||Input||For selecting the target currency||targetCurrency|
|Text Input||Input||For entering the amount to convert||sourceAmount|
|Text Box||Input||To display the converted amount||targetAmount|
|Button||Button||To trigger the currency conversion when clicked||calculateButton|
All the code for this example is added to a single page on the site. In this section we divided the code into short blocks followed by explanations. To see the complete code for this example without comments, scroll down to the end of the tutorial.
To add the code:
- Double-click Home Page Code at the bottom of the Editor to open the code panel.
- Add the following code to the top of the Page tab before the onReady function:
- Add the code below to the onReady function. Code inside the onReady function runs when the page loads.
$w function can select elements on a page by ID or by type, allowing us to run functions and define the properties of the elements. Use this syntax to select an element by ID,
$w("#myElementId"), and this syntax to select by type,
Here we select the button and define an
onClick event handler to calculate the target amount.
- Add code to define the functions:
Here we select all the dropdowns by type. By calling
$w with the element type "Dropdown", we select all dropdowns on the page.
We use template literals to define the full URL, which includes the source and target currencies.
We multiply the retrieved rate by the initial amount and assign it to the
targetAmount text box.
Now it's time to test your site:
- Click Preview at the top right of the Editor.
- Enter an amount in the source currency input.
- Select a target currency from the dropdown.
- Click the calculate button and see the converted currency result in the target amount text box.
- Publish your site to make it live and in production.
That's it! In just a few minutes, you created a web application in Velo! No setup, no managing server infrastructure, just integrating Velo APIs with the Wix visual builder.
Now that you've had a taste of Velo, check out what else you can do:
- Easily call backend code from the frontend using web modules.
- Work with Wix's Editor.
- Add features and customize your site using Velo APIs. Here are some examples of what you can do:
- Visit the Velo by Wix website to onboard and continue learning. Check out Velo's documentation and the API Reference.
Here is the complete code for this example, without comments:
Was this helpful?