The Velo Example sites are designed to illustrate the power of Velo and to give you ideas that you can use in your own site.
You can use these examples in one of two ways:
-
As a template: You can save an example site to your own Wix account and then use it as a base on which to build your site. If the example works with any of the Wix Apps they may have data associate with the app already added to them, so you will need to remove that data from the app and then add your own.
-
As a source of ideas: You can browse through the example sites to see how all the pages, elements, collections, and code come together and to get ideas of what you can do on your site.
If you see a layout or code you like, you can build it from scratch in your site, copying and pasting it into your site. See below for instructions on how to copy and paste different things from an example site.
Each example site is the published version of the site. To open the site in your Editor, click "Edit this site" at the top of the page.
Important If the example includes Wix App collections make sure to publish the site and then to refresh your browser before continuing.
The next thing you should do is to enable Velo Dev Mode. This gives you access to all of the powerful Velo features.
Click Dev Mode in your site's toolbar and turn on Enable Developer Mode in the dropdown.
Click around the example site to see how things are set up. This will help you better understand how the examples work.
Remember, once you open the example site in the Editor, it is a fully functioning site. You can always undo or go back to a previous version if you’ve messed something up while playing around with it.
Next, you'll want to better understand how the example was built both in the Editor and using code.
The Velo Sidebar shows all of the files that make up the example site. Many of the example sites have pages and database collections. Some also have lightboxes and public and backend code files. You will see all of them in this sidebar. Just click any item in the sidebar to open it.
Some of the example sites have public and/or backend files. You will find these files in the sidebar.
The Databases section of the sidebar contains the example site's collections. Click a collection to open it in the Content Management System (CMS).
Some of these collections were created manually for the example site, while others come directly from the Wix Apps.
- The Wix App collections are listed under the name of the app. For example, the example sites that work with the Stores app have a Stores section in the Database part of the Velo sidebar. You can click the header of the Stores section to see its two collections, Collections and Products. Since the information in these collections comes directly from the Wix App they are read-only and can only be modified via the app.
- Any collections that were created specifically for the example site are listed at the bottom of the Database part of the Velo sidebar. You can add new items to these collections or edit the existing items like any other collection. You can also add new collections to the database.
Another thing you'll notice when you enable Velo Dev Mode is the Properties & Events panel, which is displayed on the right side of the Code Panel and lets you work with Velo on the elements in your site.
Click an element on any page in an example site (including the page itself) to see its properties in the Properties & Events panel. These properties include the element's ID, which is used when writing code that controls that element, and event handlers. If you copy and paste any code in the example you'll need to make sure the properties work with the pasted code.
Some of the elements in the example sites are connected to datasets. Datasets act like a bridge between a collection and a page element, allowing the element to display content from the collection or take input from a user and store it in a collection.
Make sure to read this section, below, before copying and pasting elements or datasets.
Some of the pages in the example sites have code that was written using JavaScript and the Velo API. You can see this code in the Code Panel, which appears at the bottom of your Editor. You can just drag it up from the bottom of the screen to open it.
If you decide to copy code, elements, or datasets from an example site into another page or site, it is important to know that you will usually need to make some changes to them after you paste. This section explains the things to look out for and how to make sure everything continues to work after you paste them.
You can copy page elements from any page in an examples site and then paste them elsewhere, either in the examples site or in any other site you have.
It is important to pay attention to whether the elements you are pasting are connected to datasets. When you hover over an element that is connected to a dataset, you will see a cloud icon next to its element ID.
If the element is connected to a dataset, you can paste it on the same page and it will retain its connection to the dataset. If you paste it on any other page, you will need to reconnect it to another dataset.
Depending on where you paste the element, its ID may change. See below for information on changes you may need to make in the code to keep the code working with the pasted element.
You can copy a dataset from a page in an examples site and then paste it elsewhere, either in the examples site or in any other site you have.
It's important to note that when you paste a dataset, it loses all its connections to the page elements. This means that you will need to recreate the connections to the page elements on your page.
Important: Make sure to read this article about copying and pasting datasets before you being working with them in the examples sites.
Make sure to pay attention to the placement of the code you are copying within the code that surrounds it.
For example, if you copy code that is in the page's onReady() function, you need to make sure to paste it into the onReady() function of the destination page.
If the code you copy refers to page elements, you need to make sure the IDs used in the code match the IDs of the elements in the page where you paste the code. You can do this in one of two ways:
- Change the ID in the code to match the element's ID.
- Change the element's ID to match the ID in the code.
Some of the example sites have collections that were created specifically for that site. Often these sites also include code that refers to one of these collections.
Before you can copy and paste this kind of code, you'll need to make sure you have a similar collection in your own site. You can do this in one of two ways:
- Recreate the collection in your own site using the same name and the same fields. This way, code you paste into your page will work.
- Create a new collection using a different name and fields and then change any references to the new collection and fields in your code.
All Wix app collections have the same names and default fields. Some apps let you customize the information you store in them, which affects the structure of their collections. For example, if you add product options to a Wix Stores app, the options are reflected in the ProductOptions field in the Products collection.
If the site you are pasting your code into has the same Wix app as the examples site with the same configuration, you can freely copy and paste code that refers to Wix App collections. If your app is set up with different options and the code refers to these options, you will need to modify the code to match your changes.
In the example below, the code refers to the Wix Stores Products collection. Its name is always "Stores/Products" on all sites, so as long as you have the Wix Stores app, you can just copy the code to your page.
In this example, the code refers to specific product options that were defined in the Stores app.
If you want to use this code in your site, and you defined different product options in the Stores app, you need to adjust the code accordingly.
It is important to pay attention to whether the code you are copying from the examples site is a static event handler. Typically, the name of the static event handler function follows this convention: elementID_eventType. Below is an example of a static event handler in the actual code of an examples site. Its event is mouseIn, and it is wired to an image item whose ID is productImg.
After you paste a static event handler function to another page or site, you will need to wire the function to the element on your page. To do this, you select the element in your page, and in the Properties & Events panel, you choose the event type. It is important to make sure the event name in the Properties panel matches the event name in the function.
For example, if you had pasted the above code sample to a new page, you would select the Image element and then add a mouseIn event to it, naming it productImg_mouseIn like in the image below.
Sometimes you may need to add private information such as an API key to your site's code. For example, Velo allows you to integrate 3rd-party services with your site, such as Stripe and SendGrid. Some 3rd-party services require an API key for authentication. The service provides you with the key, which you add to the code that calls their service.
API keys and other Secrets are a sensitive resource, since they usually allow you to perform restricted operations. Never add secrets to your page, site, and public code, since anyone can access them. Backend code is secured, but you should follow security best practices and store your secrets separately from the code. Here's why:
- Code Sharing: You may want to collaborate and share your code with others or manage it in a public repository, increasing the potential for accidental leakage of secrets.
- Code Reuse: Since code is often reused, your hardcoded secrets may be copied, increasing risk of exposure.
- Public Exposure: Hardcoded secrets are visible on your screen, exposing them to potential passerby.
Instead of hardcoding your secrets, you can use the Secrets Manager and the Velo Secrets API to safely work with secrets in your code.
Follow this general procedure for working with API keys or other secrets using the Secrets Manager:
- Get private information such as an API key from a 3rd-party service.
- Store the private information as a new secret in the Secrets Manager. Assign a name to the secret.
- In your backend code, instead of hardcoding the API key, use the getSecret() function with the secret name assigned in the Secrets Manager. When the code runs, the value of the secret is extracted from the Secrets Manager.
Copy Code