This sets up your developer environment which includes a built-in code editor (IDE) at the bottom of your page, and a Code sidebar with advanced developer functionalities such as access to your site’s page code, backend and public code files, databases, code packages, and other tools and features to extend your development experience.
## Step 2 | Add elements to a page
In this step, we add elements to the Home page of our site, and change the default text of the elements using the UI.
To do this:
1. In the left sidebar, click Add Elements .
2. Add the following elements to your site:
- Text
- Button
3. Use the UI to change the default text of the elements to whatever you like. We changed the text of our button to 'Click Me', and our text element to 'Hello World!'. Later in the tutorial we show how to change the text of our text element using code.
## Step 3 | Select UI elements in your code
To select these UI elements in your code, do the following:
1. Click the button element. You can now see the button element’s ID in the Properties & Events panel next to the built-in code editor.
2. Change the button’s ID. We call ours 'btnClick'. It’s best practice to change all of your element IDs to more descriptive text so that you can easily identify them when you start writing code. We also changed our text element ID to 'txtMessage'.
3. To use the elements in our code, we need to look at the [Wix API Reference](https://www.wix.com/velo/reference/api-overview). The reference contains various APIs to interact with site elements, your site’s database content, Wix business solutions, and more. In our example, we use the [$w](https://www.wix.com/code/reference/$w.html#$w) selector function to select elements on a page by ID or by type.
We select our elements by ID as follows:
- Button: $w('#btnClick')
- Text: $w('#txtMessage')
> **Note:** To access and modify elements on your site, you must use the $w selector function. You can't use Web APIs or 3rd party libraries such as jQuery to access or manipulate the DOM.
## Step 4 | Add an event handler
Now that you know how to select UI elements in your code, let’s add an [`onClick()`](https://www.wix.com/velo/reference/$w/button/onclick) event handler to the button. Events run when they are triggered by a specific action on their element. In our example, every time the button is clicked, the event’s code will run.
**To add the event handler:**
1. Go to the code editor at the bottom of your page. Notice the [`onReady()`](https://www.wix.com/velo/reference/$w/onready) function in your page code. We write the code for our event handler inside this function since it runs when all the page elements have finished loading.
2. In the `onReady()` function, add the button element using the $w function and the element ID we gave it earlier, $w('#btnClick'). Notice that when you start typing '$w', you can see a list of all the available elements. This is useful to be able to find your target elements, especially as your site grows.
3. Attach the `onClick()` event handler to the selected button element.
```js
$w.onReady(function () {
$w("#btnClick").onClick(() => {});
});
```
## Step 5 | Define the code in the event handler
Now that we have a button with an `onClick()` event handler, we need to define the code we want to run when the button is clicked. In our example, we want to change the text of the text element when the button is clicked.
To define the code we want to run when the button is clicked, do the following:
1. First add a console log in the `onClick()` event handler function to test that it is working.
```js
$w.onReady(function () {
$w("#btnClick").onClick(() => {
console.log("clicked!");
});
});
```
2. Now let’s run the code in Preview mode to test if it is working. Click **Run** on the top right of the code editor. Once in Preview mode, click your button. If everything is working as expected, you’ll see our console log, 'clicked!' printed in the Developer Console at the bottom of the page.
3. Now that our button’s event handler is working, we define our event. In our case, we want the text element’s text to change from the current 'Hello World!' to 'Hello from Wix Studio!' when the button is clicked.
To do this, we select our text element, $w('#txtMessage'), and then add the Text API’s `.text` property:
```js
$w.onReady(function () {
$w('#btnClick').onClick(() => {
console.log('clicked!');
$w('#txtMessage').text = 'Hello from Wix Studio!’;
})
});
```
## Step 6 | Preview your code in action
Before publishing our site, let’s see a preview of our code in action.
1. To enter Preview mode, you can either click the **Run** button like we did in the previous step, or click the Preview icon  in the top right corner of the editor.
2. In preview mode, click the button. The text element’s text will change to 'Hello from Wix Studio!', and you’ll see our console log, 'clicked!' printed in the Developer Console at the bottom of the page.
Your code is up and running, and you’ve now learned the basics of how to code with Wix.
## Next Steps
Learn more about coding with Wix:
- **Customize your site’s UI:** Interact with site elements and add custom behaviors with the [$w() API](https://www.wix.com/velo/reference/$w).
- **Add advanced backend functionality:** Write server-side code on your site's backend, and [call the backend code from your frontend](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-the-frontend.md). Then test your backend code in the code editor using [Functional testing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/about-functional-testing.md).
- **Integrate with external resources:** Add [npm packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md), and [access 3rd-party services with the fetch API](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/fetching-services/accessing-3rd-party-services-with-the-fetch-api.md).
- **Manage your site data:** Use the [Data API](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/data-api/working-with-the-data-api.md) to work with your database collections using code. Use the Wix CMS, or integrate with popular external databases such as MySQL, Google Cloud, and AWS.
- **Start with pre-built examples:** Use the [Get Started with an Example](https://dev.wix.com/docs/develop-websites/articles/getting-started/get-started-with-an-example.md) feature in Wix Studio to access a page with pre-built code snippets, helping you begin coding and explore Velo's basic features.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Get Started with an Example
## Article: Get Started with an Example
## Article Link: https://dev.wix.com/docs/develop-websites/articles/get-started/get-started-with-an-example.md
## Article Content:
# Get Started with an Example
> **Note:** This feature is only available in Wix Studio and is not yet available to all Wix Studio users.
Wix Studio provides a pre-built example page that demonstrates some of Velo's features:
- **Text Manipulation**: Set and change text content dynamically.
- **Element Visibility**: Show and hide page elements.
- **Expandable Sections**: Create and manage foldable content areas.
This article explains how to access and use this example page.
## Access the example page
To open the example page with code snippets:
1. Open a Wix Studio site that you haven't added code to yet.
2. In the left sidebar, click the Code icon  and then **Start with an example**.
A new page named "Get Started with Code" is created.
> **Tip**: If you've already enabled coding, you can access the example page by clicking  then **Help > Getting Started** in the left sidebar.
## Use the example page
The "Get Started with Code" page demonstrates basic Wix Velo functionality. Here's how to get the most out of it:
1. **Review the examples**: The page features several interactive demonstrations.
2. **Test the behavior**: Preview to see how each example works.
3. **Study the code**: Examine the snippets associated with each example.
4. **Modify and experiment**: Change the code and observe the effects.
5. **Preview your changes**: Check the results after modifying the code.
## Try an example
To see an example in action:
1. Go to the "Get Started with Code" page.
2. Choose an example from the page, such as the "Change text on button click" example. The following screenshot shows this example:
3. In the code editor, review the existing code for the example.
4. Modify the code:
- Find the line that sets the text for the button.
- Change the text inside the quotation marks.
5. Click the preview icon  in the top right corner to see your changes.
6. Click the blue "Click to Change Title" button. The existing text changes when you click the button.
## Next steps
After exploring the examples:
- Use these examples as inspiration for your own Wix Studio site.
- Explore the [Wix Velo API Reference](https://dev.wix.com/docs/velo.md) for all API functionality.
- Visit the [Wix Coding Examples Site](https://dev.wix.com/docs/coding-examples.md) to see even more examples.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About the Wix Site MCP
## Article: About the Wix Site MCP
## Article Link: https://dev.wix.com/docs/develop-websites/articles/get-started/about-the-wix-site-mcp.md
## Article Content:
# About Wix Site MCPs
Every Wix site has its own [built-in](https://support.wix.com/en/article/ai-tools-connecting-wix-sites-to-ai-platforms) MCP (Model Context Protocol) server. Anyone can connect their compatible AI agent to the MCP server of any Wix site. This allows users and site visitors to interact with Wix sites through AI, using natural language requests.
The site MCP server makes it easy for visitors to:
- Get business details like contact information and location.
- Discover the products and services the business has to offer.
- Book services and make reservations.
- Start a purchase process and be directed to the site to complete checkout.
- Learn about a business by getting relevant answers to questions, instead of having to search the site.
## Connect to the MCP server
Every Wix site has a unique endpoint, but they all use the following format:
```shell
__Note:__ The features and workflows listed below are only available in Wix Studio.The Code panel is where you can write code to add custom functionality and interactions to your site. Use the Code panel to add frontend code and CSS styling directly with the built-in code editor, manage your collections, add code packages, and add custom apps or extensions. You can also use the panel to access the platforms, such as the Wix IDE or GitHub integration, for advanced coding features like backend web modules, data hooks, and http functions. To begin coding, select the code icon  and click **Start Coding**.
## Code Editor
The code editor is where you write and edit the code for your site. You can toggle between different code files in the Page Code and Public & Backend sections of the Code sidebar.
### Page Code
The Page Code section opens the frontend code editor for every page on your site.
Toggle between your site pages in the Page Code section of the Code sidebar, in the Pages panel, or in the top bar to edit each page's frontend code (shown below). You can see which page you are currently editing at the top left of the code editor.
+ **Change an element's default values:** By default, an element on your page will have certain initial states. For example, a form might be hidden when your page is loaded, or a button might be disabled. You can change these default values.
+ **Add an event handler:** Click the event that you want as a trigger and the function for the event handler is added to your page code. Then add the code to run with this event.
### Right-Click Menu
You can right-click anywhere in the code editor to open the [right-click menu](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-with-the-code-editor-toolbar-and-right-click-menu-with-wix-editor.md) and display more options.
### Format Code
You can easily format your code by clicking on the **Format code** button in the code editor toolbar. You can also format your code using the "Format code" keyboard shortcut(Alt + Shift + F) or by clicking **Format** in the right-click-menu.
>**Notes:**
> - See the full list of [keyboard shortcuts](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/keyboard-shortcuts.md) you can use while editing your code.
> - The "Search in all files" keyboard shortcut is not yet supported in Wix Studio.
## Velo Syntax and Autocomplete
### Selecting a Specific Element
Velo lets you code using standard JavaScript. It also has a specific syntax, or set of rules, for selecting an element on your page, which is:
```javascript
$w('#elementID')
```
If you know jQuery, this should look familiar. If you don't, here's what you need to know.
**To select an element:**
1. Type $w.
1. Enclose the ID of the element in parentheses and quotes.
1. Add a hashtag before the element ID.
>**Note:**
> You can use either single quotes or double quotes.
To make things even easier, Velo includes code completion. When you type the $, a pop-up window opens listing the elements on your page and the relevant Wix APIs.
Select the element you want. The reference to the element is added to your code with all the necessary syntax.
**Tips:** * You can press Ctrl+space at any time to view the code completion pop-up. * Element IDs are case sensitive. '#Button1' is not the same as '#button1'. * If you add a new .js file in your page code, code completion lists the elements from the last page you were on.You can find the ID of any element by hovering over it or selecting it. You can change the ID of any element in the Properties & Events panel. #### Selecting Multiple Elements If you want to select multiple elements by ID, use the same syntax as above to refer to your elements and separate each element with a comma, like this: ```javascript $w('#elementID1, #elementID2, #elementID3') ``` #### Selecting all Elements of a Specific Type To select all the elements of a specific type, use the ID of the element type without the hashtag, like this: ```javascript $w('Button') ``` The ID of the element type is the name of the element as it appears in the [Velo API](https://www.wix.com/velo/reference/$w.html). #### JavaScript Templates In addition to autocomplete that relates directly to Velo, the Code panel also includes autocomplete for standard JavaScript templates and keywords. For example, if you type the word "for," the autocomplete list includes templates for "for statements" as well as the keyword "for." Each template includes a link to a standard JavaScript API where you can read more information.
When you select a JavaScript template, the full syntax for the template is added to the Code panel. For example, if you select the "for statement," the following template gets added to your code:
```js
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
```
## Working with Elements in the Code Editor
When a page loads in a browser, it's possible for the code on the page to run before the page finishes loading. This can cause an error if your code tries to reference an element in the page before it's loaded.
All the elements on your page should load before you try to access them using code. Make sure to include all code that uses the `$w` selector in the following function:
```javascript
$w.onReady(function() {
//TODO: write your page related code here...
});
```
This is only required if you add code on your own using the `$w` selector. Any code you add to a function using the Properties & Events panel runs only after the page loads. Learn more about `$w.onReady` [here](https://dev.wix.com/docs/velo/velo-only-apis/$w/on-ready.md).
All of the elements in the code editor have **properties**, **methods**, and **event handlers** that you can use to work with your elements and add functionality to your site.
Add a period after the `$w` selector to see the full list of these items.
Once you select and item, the necessary syntax is added to the end of your selector. You can move through the options using the up and down arrow keys to see a brief description of the functionality. Click the "Read more" link for more information.
### Properties
Properties contain information about your elements. Some of these are read-only, while others have values you can also set.
For example, the text element has an `isVisible` property that returns whether the element is actually visible on-screen. This property is read-only. The text element also has the `text` property that contains the current text in the text element. This is a property you can both read and set.
### Methods
Methods perform actions on your elements.
For example, the button element has a `hide` method that causes the button not to appear on your site.
Some methods have additional options that affect how the action occurs. For example, you can add animation to the `hide` method by specifying it in the parenthesis, like this:
```js
$w("#button1").hide("fly");
```
Learn more about methods in the [Velo API reference](https://www.wix.com/velo/reference/$w.html).
### Event Handlers
[Event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) let your elements respond to user actions (events). When you add an event handler to an element, you need to specify an action when the event occurs. Do this in the **callback function** for your event.
For example, let's say you have a button that says "Take the Tour" on it. You want to add functionality so that when a visitor hovers over the button the text changes to "Let's Go!". You would add code to your site that looks like this:
```javascript
$w("#button1").onMouseIn(()=> //onMouseIn is the event handler.
// The callback function starts here.
{
$w("#button1").label = "Let's Go!";
//This is the code that runs when the event occurs.
}
// The callback function ends here.
);
```
### Warnings and Errors
As you write your code in the Code panel, you may see warning and error indications in the form of a red or yellow wavy line beneath the relevant code. To view a warning or error message, hover over the underlined the code.
- **Warnings:** A warning in your code is an informational message that brings your attention to some code that you might want to change. Warnings do not stop your code from running and can often be safely ignored. Warnings are indicated by a yellow wavy underline.
A common warning message occurs when you have an unnecessary 'else' after 'return'. This most often occurs when you use the following coding pattern:
```js
function myFunction() {
if(someCondition) {
//do some stuff
return 0;
} else {
//do other stuff
return 1;
}
}
```
If `someCondition` is true, the function will return. That means that we don't need the `else` to stop the code from executing when `someCondition` is `true`.
You can safely ignore this warning or change your code to the following pattern:
```js
function myFunction() {
if(someCondition) {
//do some stuff
return 0;
}
//do other stuff
return 1;
}
```
- **Errors:** An error in your code means that your code will not function properly. Depending on the type of error, your code will either not work as expected or not run at all. Make sure to fix all errors in your code before publishing your site for your site visitors to use. Errors are indicated by a red wavy underline.
Here are some common situations where you might find errors in your code:
* Error message: "#text1" is not a valid selector (see image above)
If you change the ID of an element that you are using in some of your page code, the `$w()` selections in your code will cause errors. For example, if you have a text element with the ID **text1** and you change the ID to **statusMessage**, all instances where you selected the element using `$w('#text1')` will now be errors.
Note: you can use the Search and Replace functionality to fix this error throughout your code.
* Error message: 'import' and 'export' may only appear at the top level
When you import an API module, the `import` statement must appear at the top level of your code before the module is used. That means you cannot import the module inside a function as shown below. In general, it is recommended that you place all `import` statements on the first lines of your code, before any variable declarations and function definitions.
* In certain cases, the error indication does not appear at the point of your actual mistake, but occurs on the first line on which your mistake causes an error. For example, if you leave out the closing curly brace (`}`) in one of the functions of your page code, an error will most probably occur on whatever the next line of code happens to be. In the code shown below, a closing curly brace is missing from line 6, but the error does not occur until line 8.
## Databases
The Databases section of the sidebar contains your database collections. These collections store your site's content and are managed in the [Content Management System (CMS)](https://support.wix.com/en/article/cms-formerly-content-manager-about-your-collection-fields).
+ Add a new collection by clicking the plus  icon that appears when you hover over **My Collections**, and then clicking **Create collection**.
+ Manage an existing collection by clicking the More Actions  icon that appears when you hover over a collection name. You can update a [collection's permissions and privacy](https://support.wix.com/en/article/how-do-i-work-with-data-permissions), add a new [dynamic page](https://support.wix.com/en/article/cms-about-dynamic-pages) based on a collection, [remove a collection](https://support.wix.com/en/article/cms-formerly-content-manager-deleting-a-collection), or add and remove [data hooks](https://support.wix.com/en/article/velo-using-data-hooks) to a collection.
+ Connect external databases in [**External Databases**](https://support.wix.com/en/article/velo-integrating-external-databases-with-your-wix-site). You can manage their content here like any other collection.
+ When certain Wix Apps are added to your site, database collections are automatically added to your site and appear under [**Wix App Collections**](https://support.wix.com/en/article/cms-formerly-content-manager-working-with-wix-app-collections). Collections for each app are grouped together and are read-only. You can edit the collections in the relevant app manager in your Dashboard.
>**Note:**
> You may need to save or publish the site and refresh your browser to view the Apps collections in the Database.
## Packages & Apps
This section allows you to add complex functionality to your site with packages and apps.
### Packages
You can use a code library that suits your needs and incorporate it into your own code. Each reusable library of code is known as a package. There are 2 types of [pre-built packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-packages.md) that you can install in the **Packages** section of the sidebar - [npm Packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md) and [Velo Packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md).
+ Install a package by clicking the plus  icon that appears when you hover over **npm** or **Velo Packages**, or click **Install packages from npm** and **Install Velo Package**.
+ Uninstall a package by hovering over the package you want to uninstall, click the **More Actions**  icon, and select **Uninstall**.
### Apps
You can create a custom app with Wix Blocks. Click the plus  icon, and then **Create New App** to get started.
### Custom Extensions
Custom extensions, also known as service plugins, allow you to add your own custom logic to out-of-the-box apps and to integrate services from 3rd party providers. Learn more about [custom app extensions using service plugins](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis).
## GitHub Integration
In the GitHub section of the sidebar, you can connect your site to GitHub to write, test, and publish code locally on your computer for your Wix site. To get started, select **Connect to GitHub**. Learn more about [GitHub integration](https://support.wix.com/en/article/velo-about-git-integration-wix-cli).
## Developer Tools
Your code will run in your published site or test site, but you may want to [test your code](https://support.wix.com/en/article/testing-and-debugging-code-with-developer-tools#testing) before you publish to make sure it works as expected.
The Developer Tools section of the Code sidebar contains tools for:
+ [Monitoring your code's performance](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/monitoring-your-published-site/working-with-the-monitoring-dashboard.md).
+ [Viewing logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md#debugging-with-wix-logs).
+ [Connecting your site to Google Cloud Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md).
+ [Securing your code's secrets](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md).
+ [Sending a triggered email](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/about-triggered-emails.md).
You can test your code before you publish by previewing your site or creating a test site. The code runs the same in Preview Mode and Test Site Mode as it does in the published version. You may also want to [debug your code](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) before publishing to identify any potential issues.
## Saving Versions of Your Code
When you save your site or your site is [autosaved](https://support.wix.com/en/article/about-autosave), the corresponding code is saved with that [version](https://support.wix.com/en/article/site-versions-with-developer-tools) of your site. If you go to the Site History and revert to a saved version of your site, the code that was saved with that version is restored as well.
## Help
The Help section offers links to additional resources:
+ Check out the [API Reference](https://www.wix.com/velo/reference/api-overview) to explore how to use APIs with your site and to learn basic concepts.
+ Find examples of the functionality you need with [video tutorials](https://www.wix.com/learn/library/coding) and [code examples](https://dev.wix.com/docs/coding-examples.md).
+ Connect with Wix developers in [Discord](https://discord.gg/GhdmDN926z) or the [Velo Forum](https://community.wix.com/velo/forum).
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Wix Editor: Working with the Code Sidebar
## Article: Working with the Code Sidebar
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-editor-working-with-the-code-sidebar.md
## Article Content:
# Wix Editor: Working with the Code Sidebar
The code sidebar shows all of the files that make up your site, including pages, popups, folders, files, packages, and database collections. Working in this sidebar, you can perform a variety of actions that affect your site as detailed below.
To begin coding, select **Dev Mode** at the top of the editor and click **Turn on Dev Mode**.
The sidebar displays different content depending on which sidebar button you select.
**Tip:** Code that you add to the **masterPage.js** runs on every page in your site. This can impact your site's performance so it's important to consider if you need the code to run on every page. If you have code that needs to run on some, but not all pages you may want to put it in a [Public](https://support.wix.com/en/article/working-with-the-site-structure-sidebar-9621920#public) file and [import](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/java-script-support.md) it as needed.## Code Files The Code Files section contains the following sections: ### Public You may have a function that you need to use in multiple pages and you don't want to repeat it on each page. You can write that function once in a **public** file and then call it from any page, or from any backend or public file as needed. The Public section is where you put JavaScript files that contain the code you want to use on any page in your site. You need to export functions from public files and then import them in the files where you want to use them, public or backend. When you add a new .js file to the Public section it contains comments that provide instructions and examples for exporting and importing functions. You can refer to those comments for more information. As your site's functionality grows, it may be easier to keep your code organized in files that you call as you need them in your page code. You can divide your public files into folders to further organize them. * You add a new file or folder to the Public section by clicking the plus icon  that appears when you hover over the section name. * You add a new file to a folder or delete a folder by clicking the ellipsis icon  that appears when you hover over the folder name. * You rename or delete a file by clicking the ellipsis icon  that appears when you hover over the file name.
**Note:** Your page and site code, which are also publicly accessible, do not appear in the Public section.### Backend The Backend section of the sidebar lists files that are not publicly accessible from your site. Since the backend code isn't visible, you can place sensitive information in the Backend that might otherwise be a [security risk](https://dev.wix.com/docs/develop-websites/articles/best-practices/security-best-practices.md). You can create JavaScript files, [web modules](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-the-frontend.md), and other files for use in the backend, and you can organize these files in folders. There are several special JavaScript files that may be present in your site's Backend section. For example, the **data.js** file contains the code for [data hooks](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/hooks/about-data-hooks.md), and the **routers.js** file contains the code for [routers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) and [data binding router hooks](https://support.wix.com/en/article/about-data-binding-router-hooks). These files are added automatically when you work with these features. You can also add a Jobs Scheduler file to [schedule recurring jobs](https://support.wix.com/en/article/velo-scheduling-recurring-jobs) and an **events.js** file to [handle backend events](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md). * You add a new file or folder to the Backend section by clicking the plus icon  that appears when you hover over the section name. * You add a new file to a folder or delete a folder by clicking the ellipses icon  that appears when you hover over the folder name. * You rename or delete a file by clicking the ellipses icon  that appears when you hover over the file name. ### Packages Sometimes you need to add complex functionality to your site that has already been implemented by someone else. You can use a code library that suits your needs and incorporate it into your own code. Each reusable library of code is known as a package. There are 2 types of pre-built packages that you can install from the **Packages** section of the sidebar: * [Velo Packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md) * [npm Packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-in-the-editor.md) Velo packages can be divided into 2 categories: * [Built by Wix](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md) * [Built by you](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-custom-apps.md) You can install a package by clicking the plus  icon that appears when you hover over the **Packages** section. Once you've installed a package you can manage the package on your site in the Package Manager by clicking the settings  icon that appears when you hover over the **Packages** section. You can uninstall a package by hovering over the package you want to uninstall, click the Show More  icon, and select **Uninstall**. ## Search Your Code Click the magnifying glass sidebar button to open Search Your Code and search all the code files on your site. You can search with options to match case, match whole word, or use regular expressions.
## Databases
The Database section of the sidebar contains your [Content Collections](https://support.wix.com/en/article/about-database-collections). Click a collection to open it in the Content Management System (CMS).
You can add a new collection or work with [external collections](https://dev.wix.com/docs/develop-websites/articles/databases/external-databases/overview/adding-and-deleting-an-external-database-collection.md) by clicking the plus  icon that appears when you hover over the section name.
You can add a new dynamic page based on a collection, update a [collection's permissions](https://support.wix.com/en/article/how-do-i-work-with-data-permissions), [remove a collection](https://support.wix.com/en/article/cms-formerly-content-manager-deleting-a-collection), or add and remove [hooks](https://support.wix.com/en/article/velo-using-data-hooks) to a collection by clicking the ellipsis  icon that appears when you hover over a collection name.
When you add certain Wix Apps to your site, database collections are automatically added to your site. These collections appear in your sidebar. [Wix App collections](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/collections/working-with-wix-app-collections-and-code.md) contain information about the items in your Wix app. Collections for each app are grouped together in the sidebar and are read-only. You can edit the collections in the relevant App manager in your Dashboard.
>**Note**
> You may need to save or publish the site and refresh your browser to view the Apps collections in the Database.
## Developer Tools
The Developer Tools section contain the following sections:
### Logs
The [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) feature allows you to view information about [logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-wix-logs.md). It records events, such as console logs, HTTP functions, and web module functions as log entries.
You can view and track logs in real time or you can connect your Wix Logs to [Google Cloud Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md), an external monitoring tool to perform log analysis and generate visual depictions of site data for you to gain meaningful insights.
### Monitoring
When using backend code with your site, you will want to monitor the code's performance to ensure the best experience for your site visitors.
The [Monitoring dashboard](https://support.wix.com/en/article/velo-monitoring) assists you with the following:
* Track the performance of your backend code over time.
* Detect when your site is not functioning as expected.
* Troubleshoot and determine the causes of a site not functioning smoothly.
* Ask for additional resources when needed.
### Security
The Security section of the Developer Tools tab contains your [Secrets Manager](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md).
Sometimes you may need to add private information to your site's code. For example, you may require an API key for some 3rd-party service you choose to integrate with. You never want to expose your secrets to your page, site, or public code. Instead, you can use the Secrets Manager to safely work with secrets in your code.
### Automation
In the Automation section you can find the [Triggered Emails](https://support.wix.com/en/article/velo-creating-a-triggered-email) feature.
Triggered Emails allow you to send personalized messages to site visitors who have triggered a specific event.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Working in the Code Editor
## Article: Working in the Code Panel
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md
## Article Content:
# Velo: Working in the Code Editor
You write the code for your site in the code editor at the bottom of the page in both Wix Studio and Wix Editor.
>**Tips:**
> * You can drag the code editor up from the bottom of the page to open it.
> * See our list of [keyboard shortcuts](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/keyboard-shortcuts.md).
## Code Editor Tabs
The code editor displays your site's code files in tabs.
How code files open in tabs depends on the type of file you are opening.
What files can I open in a new tab?
* **Page Code files**. Because you can't select more than one page at a time to view in the Editor, you also can't have multiple page code tabs open simultaneously. There is one tab that displays the page code for the currently selected page. Selecting a page in the **Page Code** section opens that page's code in this tab. When you select a different page, this same tab will display the newly selected page's code. * **masterPage.js**. You can open **masterPage.js** alongside page code files. * **Code Files**. All the files in the **Code Files** section can be opened in their own tab.How do I open a new tab?
When you click a file in the **Code sidebar** it opens in a new tab in the code editor. When you first open a file, you'll notice that its name is italicized in the tab.
The italics means that the file has not yet been modified. That also means that if you click another file in the **Code sidebar** it will open in the same tab, replacing the file you first clicked.
The file name will change to being un-italicized when you either:
* Modify the file
* Double click the filename in the tab or the Code sidebar
Once the filename isn't italicized, if you click another file in the Sidebar, it will open in a new tab.
## Right-Click Menu
In addition to the buttons in the code editor toolbar, you can right-click anywhere in the code editor to bring up the [right-click menu](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-with-the-code-editor-toolbar-and-right-click-menu-with-wix-editor.md) and display more options.
## Velo Syntax and Autocomplete
#### Selecting a specific element
Velo lets you code using standard JavaScript. It also has a specific syntax, or set of rules, for selecting an element on your page, which is:
```javascript
$w('#elementID')
```
If you know jQuery, this should look familiar. If you don't, here's what you need to know.
**To select an element:**
1. Type $w.
2. Enclose the ID of the element in parentheses and quotes.
3. Add a hashtag before the element ID.
>**Note:**
> You can use either single quotes or double quotes.
To make things even easier, Velo includes code completion. When you type the $, a pop-up window opens listing the elements on your page and the relevant Wix APIs.
Use the up and down arrow keys to select the element you want, and then press Enter. Alternatively, you can click the element in the list. The reference to the element is added to your code with all the necessary syntax.
**Tips:** * You can press Ctrl+space at any time to view the code completion pop-up. * Element IDs are case sensitive. '#Button1' is not the same as '#button1'. * If you add a new .js file in Public, code completion lists the elements from the last page you were on.You can find the ID of any element by hovering over it or selecting it. You can change the ID of any element in the Properties & Events panel. #### Selecting multiple elements If you want to select multiple elements by ID, use the same syntax as above to refer to your elements and separate each element with a comma, like this: ```javascript $w('#elementID1, #elementID2, #elementID3') ``` #### Selecting all elements of a specific type To select all the elements of a specific type, use the ID of the element type without the hashtag, like this: ```javascript $w('Button') ``` The ID of the element type is the name of the element as it appears in the [Velo API](https://www.wix.com/velo/reference/$w.html). #### JavaScript Templates In addition to autocomplete that relates directly to Velo, the code editor also includes autocomplete for standard JavaScript templates and keywords. For example, if you type the word "for," the autocomplete list includes templates for "for statements" as well as the keyword "for." Each template includes a link to a standard JavaScript API where you can read more information.
When you select a JavaScript template, the full syntax for the template is added to the code editor. For example, if you select the "for statement," the following template gets added to your code:
for (let index = 0; index < array.length; index++) {
const element = array[index];
}
All you need to do is to add the code you want to run in the loop.
## Making Sure the Element Has Loaded Before You Reference It
When a page loads in a browser, it's possible for the code on the page to run before the page finishes loading. This can cause an error if your code tries to reference an element in the page before it's loaded.
Because of this, you need to make sure that all the elements on your page have loaded before you try to access them using code. You do this is by including all your code that uses the `$w` selector in the following function:
```javascript
$w.onReady(function() {
//TODO: write your page related code here...
});
```
This is only required if you add code on your own using the `$w` selector. Any code you add to a function using the Properties & Events panel runs only after the page loads.
Learn more about `$w.onReady` [here](https://dev.wix.com/docs/velo/velo-only-apis/$w/on-ready.md).
## Working with Your Elements
All of the elements in the Editor have **properties**, **methods**, and **event handlers** that you can use to work with your elements and add functionality to your site.
After you select an element, type a period to see the full list of these items.
Use the up and down arrow keys to select the item you want, and then press Enter. The necessary syntax is added to the end of your element selector. As you move through the options, a brief description of the functionality is displayed. Click the "Read more" link for more information.
The autocomplete pop-up also includes standard Javascript methods that you can call on your element.
### Properties
Properties contain information about your elements. Some of these are read-only, while others have values you can also set.
For example, the text element has an `isVisible` property that returns whether the element is actually visible on-screen. This property is read-only. The text element also has the `text` property that contains the current text in the text element. This is a property you can both read and set.
### Methods
Methods perform actions on your elements.
For example, the button element has a `hide` method that causes the button not to appear on your site.
Some methods have additional options that affect how the action occurs. For example, you can add animation to the `hide` method by specifying it in the parenthesis, like this:
$w("#button1").hide("FlyOut");
Here also you'll need to look at the [Velo API](https://www.wix.com/velo/reference/$w.html) to learn all the options.
### Event Handlers
[Event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) let your elements respond to user actions (events). When you add an event handler to an element, you also need to specify what you want to happen when the event occurs. You do this in the **callback function** for your event.
For example, let's say you have a button that says "Take the Tour" on it. You want to add functionality so that when a visitor hovers over the button the text changes to "Let's Go!". You would add code to your site that looks like this (we've added comments to explain each part of the code):
```javascript
$w("#button1").onMouseIn(()=> //onMouseIn is the event handler.
// The callback function starts here.
{
$w("#button1").label = "Let's Go!";
//This is the code that runs when the event occurs.
}
// The callback function ends here.
);
```
Don't forget that you can also add event handlers to your elements using the [Properties & Events panel](https://support.wix.com/en/article/using-the-properties-panel). Unless you have a specific reason for wanting to add event handlers manually, we recommend using the Properties & Events Panel.
>**Note:**
> Event code that you add to your site using the Properties and Events panel will not work if you copy/paste it to any other page or site, even if you copy the associated element.
## Warnings and Errors
As you write your code in the code editor, you may see warning and error indications. Warnings are indicated in yellow, and errors in red. The indications take the form of a colored wavy line underneath the relevant code and an icon to the left of the line number.
To view the warning or error message, hover over the icon.
### Warnings
A warning in your code is an informational message that brings your attention to some code that you might want to change. Warnings do not stop your code from running and can often be safely ignored. Warnings are indicated by a yellow triangle and yellow wavy underline.
A common warning message occurs when you have an unnecessary 'else' after 'return'. This most often occurs when you use the following coding pattern:
function myFunction() {
if(someCondition) {
//do some stuff
return 0;
}
else {
//do other stuff
return 1;
}
}
If `someCondition` is true, the function will return. That means that we don't need the `else` to stop the code from executing when `someCondition` is `true`.
You can safely ignore this warning or change your code to the following pattern:
function myFunction() {
if(someCondition) {
//do some stuff
return 0;
}
//do other stuff
return 1;
}
### Errors
An error in your code means that your code will not function properly. Depending on the type of error, your code either will not work as expected or might not run at all. Make sure to fix all errors in your code before publishing your site for your site visitors to use.
Here are some common situations where you might find errors in your code.
* Error message: "#text1" is not a valid selector (see image above)
If you change the ID of an element that you are using in some of your page code, the `$w()` selections in your code will cause errors. For example, if you have a text element with the ID **text1** and you change the ID to **statusMessage**, all instances where you selected the element using `$w('#text1')` will now be errors.
Note: you can use the Search and Replace functionality to fix this error throughout your code.
* Error message: 'import' and 'export' may only appear at the top level
When you import an API module, the `import` statement must appear at the top level of your code before the module is used. That means you cannot import the module inside a function as shown below. In general, it is recommended that you place all `import` statements on the first lines of your code, before any variable declarations and function definitions.
* In certain cases, the error indication does not appear at the point of your actual mistake, but occurs on the first line on which your mistake causes an error. For example, if you leave out the closing curly brace (`}`) in one of the functions of your page code, an error will most probably occur on whatever the next line of code happens to be. In the code shown below, a closing curly brace is missing from line 6, but the error does not occur until line 8.
## Media Manager Integration
Velo allows you to use images that you've stored in the Wix Media Manager in your code. When you work with elements that include an image property, such as `src`, a pop-up window opens, giving you the option to use an image from the Media Manager. This window appears automatically as you type "src".
## Testing Your Code
Your code will run on your published site or test site. However, you may want to [test your code](https://support.wix.com/en/article/testing-and-debugging-code-with-developer-tools#testing) before publishing it to ensure it works as expected.
You can test your code before you publish by previewing your site or creating a test site. The code runs the same in Preview Mode and Test Site Mode as it does in the published version. You may also want to [debug your code](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) before publishing to identify any potential issues.
## Saving Versions of Your Code
When you save your site or your site is [autosaved](https://support.wix.com/en/article/about-autosave), the corresponding code is saved with that [version](https://support.wix.com/en/article/site-versions-with-developer-tools) of your site. If you go to the Site History and revert to a saved version of your site, the code that was saved with that version is restored as well.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Keyboard Shortcuts
## Article: Keyboard Shortcuts
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/keyboard-shortcuts.md
## Article Content:
# Velo: Keyboard Shortcuts
|Action |Mac |Windows |
|---|---|---|
|Format code|⌥⇧F|Alt + Shift + F
|Search in file|⌘F|Ctrl + F
|Search in all files|⇧⌘F|Ctrl + Shift + F
|Undo|⌘Z|Ctrl + Z
|Redo|⇧⌘Z|Ctrl+ Shift + Z
|Comment in/out|⌘/|Windows + /
|Add cursor|⌥ click|Alt + click
|Add cursor above|⌥⌘↑|Alt + Ctrl + ↑
|Add cursor below|⌥⌘↓|Alt + Ctrl + ↓
|Move line up|⌥↑|Alt+↑
|Move line down|⌥↓|Alt+↓
|Duplicate line down|⌥⇧↓|Alt + Shift + ↓
|Duplicate line up|⌥⇧↑|Alt + Shift + ↑
|Create/extend a vertical non-contiguous selection|⌥⇧ click|Alt + Shift + click
|Toggle fold
(Region at cursor)|⌘KL|Ctrl + K + L
|Fold all regions|⌘K0|Ctrl + K + 0
|Unfolds all regions|⌘KJ|Ctrl + K + J
|Fold level X|⌘K2
(for level 2)|Ctrl + K + 2
* * *
### File Search Shortcuts
|**Action** |Mac |Windows |
|---|---|---|
|Find next|⌘G|F3
|Find previous|⇧⌘G|Shift + F3
|Replace|⇧⌘1|Ctrl + Shift + 1
|Replace all|⌥⌘⏎|Ctrl + Alt + Enter
|Match case|⌥⌘C|Alt + C
|Match whole word|⌥⌘W|Alt + W
|Use regular expression|⌥⌘R|Alt + R
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Using JSDoc
## Article: Using JSDoc
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/using-jsdoc.md
## Article Content:
# About Type Checking and Autocomplete Using JSDoc Tags
[JSDoc](https://jsdoc.app/) is a popular markup language used to document JavaScript code, applying type checking and autocomplete as you write your code.
You can use JSDoc in a Wix environment in the same way as you would in any JavaScript environment.
Adding JSDoc to your custom code allows you to benefit from [type checking and code autocomplete](#type-checking-and-autocomplete).
## Supported IDEs
You can add and benefit from JSDoc using:
+ The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor).
+ The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio).
+ Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) (Wix Studio and Wix Editor).
You can [import JSDoc](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/import-jsdoc.md) only in the editor.
## JSDoc tags and definitions
JSDoc tags are added to JavaScript files as comments.
Each line of JSDoc defines an item using the following format:
```js
/**
* @JSDoc tags
| Variable | Description | | -------- | ----------- | | `jsdoc-tag` | [JSDoc tag](https://jsdoc.app/) that defines what the item is.For example, use `@typedef` to define a new type, `@property` to define the property of an object, and `@param` to define a parameter. | | `type` | Data type of the item. For example, `object`. | | `item-name` | How the item is referred to. | | `description` | Description of the item.
Optional. |
Important: Web.md modules (files with the suffix `.jsw`) support autocomplete, but not type checking.## See also - [Import JSDoc](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/import-jsdoc.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Import JSDoc ## Article: Import JSDoc ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/import-jsdoc.md ## Article Content: # Set up Type Checking and Autocomplete by Importing JSDoc Types You can import JSDoc types to use in your JavaScript code. Apply a JSDoc type to a parameter to enable [type checking and autocomplete](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/using-jsdoc.md#type-checking-and-autocomplete).
Important: Importing JSDoc is supported only in the code editor, not in the Wix IDE or your local IDE.## Step 1 | Define and export a type You can skip this step if you want to use a type defined by Wix. To define and export a type using JSDoc: 1. Use [JSDoc tags and definitions](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/using-jsdoc.md#jsdoc-tags-and-definitions) to define a type. For example: ```js /** * @typedef {object} employee * @property {string} name Employee's name. * @property {string} seniority The number of years the employee has worked at the company. * @property {number} hours The number of hours the employee works a week. */ ``` 1. You can expose your type to your site's files as either a global type or a restricted type: - **Global type**: You can use your defined type in any JavaScript file without further changes. - **Restricted type**: You can define different types with the same name in different files. To restrict your type, add `export {};` below your JSDoc declaration. For example: ```js /** * @typedef {object} employee * @property {string} name Employee's name. * @property {string} seniority The number of years the employee has worked at the company. * @property {number} hours The number of hours the employee works a week. */ export {}; ``` ## Step 2 | Access a JSDoc type The way that you import the JSDoc type depends on where and how the type is exposed: - [Self-defined global type](#self-defined-global-type) - [Self-defined restricted type](#self-defined-restricted-type) - [Wix editor elements](#wix-editor-elements) - [Backend event handlers](#backend-event-handlers) - [Router functions](#router-functions) ### Self-defined global type Use the type without importing it. For example: ```js /** * @param {employee} employee */ export function salaryCalculator(employee) { return `Salary for ${employee.name}: ${employee.hours * employee.seniority * 100}`; } ``` ### Self-defined restricted type Import your type using `import('
Example: onBookingCreated
.md
To add JSDoc to wix-bookings.v2 event, onBookingCreated():
- Open the API reference for
onBookingCreated..md Find theEventObjectName.
- Add the following JSDoc annotation above the event handler function in the
events.jsfile:/** @param {import('api-module-name').Events.BookingCreated} event */
/** @param {import('api-module-name').Events.BookingCreated} event */
export function wixBookings_onBookingCreated(event) {
// Handle your event
}
|Runs your code in Preview mode. |**Properties & Events**|Shows and hides the [Properties & Events](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) editor. |**Maximize**
|Maximizes the code editor on the screen. |**Restore**
|If the code editor has been maximized, restores it to its previous height. |**Minimize**
|Minimizes the code editor to its collapsed state. |**More**|Links to help content and a list of keyboard shortcuts. Also contains a radio button for switching the code editor theme between light (default) and dark. ## Code Editor Right-Click Options |Item |Description | |---|---| |**Format**|Makes your code neater and easier to read by fixing its indentation, removing extra lines, and applying other standard formatting styles.| |**Find**
[](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/07/21/3a849248-6e4a-4ff4-8b2b-a50389ccddb9.png)|Opens the Find editor, which contains the following options:| ||**Find** box. Specify the term you are searching for.| ||**Match Case**. Select this button if you want your search to be case sensitive.
| ||**Match Whole Word**. Select this button if you want to limit your search to whole words only.
| ||**Regular Expression**. Select this button if you want to use a regular expression as your search term.
| ||**Replace** box. Specify the term you want to use to replace the search term.| ||**Previous.** Jumps to the previous instance of the search term.| ||**Next.** Jumps to the next instance of the search term.| ||**Replace**. Replaces the current instance of the search term with the replace term.| ||**All**. Replaces all instances of the search term with the replace term.| |**Undo**|Undoes your previous action in the code editor. The Undo action in the code editor is independent of the Undo action in the main Editor.| |**Redo**|Re-does the last action you undid in the code editor. The Redo action in the code editor is independent of the Redo action in the main Editor.| --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About the Colors in the Code Editor ## Article: About the Colors in the Code Panel ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/about-the-colors-in-the-code-editor.md ## Article Content: # Velo: About the Colors in the Code Editor Velo applies syntax highlighting to the code that you write in the code editor. That means certain parts of your code appear in different colors and font weights depending on their purpose. Syntax highlighting makes it easier for you read and write your code. In this article, we describe the highlighting of some of the most common syntactic elements. We use the following form and page code that calculates the area of a circle based on a given radius.
### Keywords
Keywords are words that have a special meaning in a programming language. For example, in JavaScript, `let`, `function`, and `return` are all keywords.
### Function Names in Function Declarations
Function declarations include a function name. The function name is used when calling the function in other parts of your code. For example, the `calculateArea` function defined on line 11 in the example below is called on line 5.
### Parameter Names in Function Declarations
Function declarations may include one or more function parameters. The function parameters serve as the names of the arguments passed to the function. For example, the `calculateArea` function defined on line 12 in the example below contains one parameter named `radius`. That parameter name is used on line 13 when calculating the area. When the function is called on line 5, the `value` of the `radiusInput` is the argument passed to the `radius` parameter of the `calculateArea` function.
### String Literals
String literals come in three different varieties in JavaScript:
* Double quoted strings
`"literal value"`
* Single quoted strings
`'literal value'`
* Template strings
`` `literal value ${nonliteral}` ``
In Velo, you will often use string literals to select elements using the `$w()` function as shown on line 4 in the example below. You might also use literal values to set the value of an element's property as shown on line 6, set the value of a variable, or pass them as arguments to functions.
### Number Literals
Number literals are used to set the value of an element's property, set the value of a variable as shown on line 1 in the example below, or pass them as arguments to functions as shown on line 13.
### Comments
Comments are parts of your code that are not executed when the code is run. Usually, you add comments to explain what a particular part of your code is doing.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About the Properties & Events Panel
## Article: Working with the Properties & Events Panel
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md
## Article Content:
# About the Properties & Events Panel
The Properties & Events panel allows you to add properties and functionality to your page elements. With the panel you can:
- Access the [Velo API reference](https://dev.wix.com/docs/velo/api-reference/$w/introduction.md) for the selected element.
- View and manually update the ID of the selected element.
- Set default values for the properties of the selected element.
- Add an event handler function declaration to your code to interact with the selected element.
## Default state properties Certain boolean properties for your selected element appear under the Default Values section of the panel. They allow you to set an element’s state when the page loads. This limits the need to set an element’s initial state with code, keeping your code cleaner and more concise. Set the element’s initial state by selecting or clearing the checkbox to the left of the property. The available default state properties are: - **Hidden:** Hides the element from your site visitors when your page loads. You can use code to unhide the element upon an action or after a set amount of time. Hidden elements take up space on your page and appear faded in the editor until they are selected. An element's hidden state can also depend on whether its parent element is hidden or collapsed. - **Collapsed:** Collapses the element and hides it from your site visitors when your page loads. You can use code to expand the element upon an action or after a set amount of time. Collapsed elements don’t take up space on your page and appear with diagonal hatching lines in the editor until they are selected. Collapsing and expanding can cause other elements to shift on your page. An element's collapse state can also depend on whether its parent element is hidden or collapsed. - **Enabled:** Enables interactive elements such as [buttons](https://dev.wix.com/docs/velo/api-reference/$w/button/introduction.md) and [text inputs](https://dev.wix.com/docs/velo/api-reference/$w/text-input/introduction.md). Elements with this property are initially in an enabled state. Clear the checkbox to disable the element when the page loads. You can use code to later enable the element when you want visitors to interact with it. Disabled elements appear faded in the editor. >**Notes:** > - The properties displayed in the panel change depending on the selected element. > - To get or set properties with code, see the [Velo API reference](https://dev.wix.com/docs/velo/api-reference/$w/introduction.md) for a full list of an element’s properties. ## Event handlers Event handlers appear under the **Event Handlers** section of the Properties & Events panel. Event handlers allow you to add code that defines what happens when site visitors interact with this element. Clicking on an event handler in the panel adds the event handler’s function declaration to your page code for you. ```js $w('#myButton').onClick((event) => { // Add code here }) ``` Like properties, event handlers are specific to the element. Common event handlers that appear in the panel for many elements include: - `onBlur()` - `onClick()` - `onDblClick()` - `onFocus()` - `onMouseIn()` - `onMouseOut()` - `onViewportEnter()` - `onViewportLeave()` Other event handlers can appear in the panel depending on the element that is selected. For example, when a [Gallery element](https://dev.wix.com/docs/velo/api-reference/$w/gallery/introduction.md) is selected, the panel includes additional event handlers to some of the ones listed above, such as: - `onCurrentItemChanged()` - `onItemClicked()` - `onPlay()` - `onPause()` See the [Velo API reference](https://dev.wix.com/docs/velo/api-reference/$w/introduction.md) for descriptions of all the event handlers for each element. ## Events AI assistant in Wix Studio The Properties & Events panel in Wix Studio also comes with an AI Assistant button.Important:
If you change the ID of an element, make sure to update any existing code that uses the ID of that element.
**Note**: Some features described in this article aren't yet available to all users.Wix Studio includes a code editor for adding code directly to your site's pages. For a more advanced option, the Wix IDE provides a browser-based environment built on Visual Studio Code. The Wix IDE also features the [Wix AI Assistant](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/about-the-wix-ai-assistant.md), an intelligent companion that offers real-time coding assistance. > **Note:** > The Wix IDE is currently unavailable for sites using [Git Integration](https://support.wix.com/en/article/velo-about-git-integration-wix-cli). ## Understanding your site's file structure Wix sites have a specific file structure that Wix uses to run your code. When you open the Wix IDE, you see the file structure for your site.
Your site's file structure includes these elements:
* The **src** folder, that contains the following folders:
* [backend](https://support.wix.com/en/article/wix-studio-about-the-wix-ide#backend-folder)
* [pages](https://support.wix.com/en/article/wix-studio-about-the-wix-ide#pages-folder)
* [public](https://support.wix.com/en/article/wix-studio-about-the-wix-ide#public-folder)
* [styles](https://support.wix.com/en/article/wix-studio-about-the-wix-ide#styles-folder)
* The `jsconfig.json` file and `.wix` folder found in the repo's root folder.
>**Important:**
>The `jsconfig.json` file and `.wix` folder are used to support type checking and autocomplete in the IDE. You don't need to edit these files. Changes to these files aren't synced to your site and are lost when you close the IDE.
>**Note:**
>Wix doesn't support adding files for web crawlers and bots such as `robots.txt`, `ads.txt`, and `security.txt` to your site. If you add these files, they're ignored by Wix.
Here is an explanation of the different subfolders in the `src` folder:
### Backend folder
This folder contains the backend code files for your site. Some backend code files are automatically added to this folder, for example, when you add a router to your site, a `router.js` file is added to your backend folder. If you don't see the file that you need, you can create it.
The backend folder may contain the following files:
+ **Web Module files:**
These are files that allow you to expose functions in your site's backend that you can run in your frontend code. These files require a `.web.js` file extension. A web module contains one or more [web methods](https://support.wix.com/en/article/about-web-methods).
+ **data.js**.
A file for [adding data hooks](https://support.wix.com/en/article/velo-using-data-hooks) to your site's collections.
+ **routers.js**
A file for implementing [routing and sitemap](https://support.wix.com/en/article/velo-about-routers#routing-code) functionality for your site.
+ **events.js**
A file for implementing your site's [backend event handlers](https://support.wix.com/en/article/velo-backend-events).
+ **http-functions.js**
A file for implementing [HTTP endpoints](https://www.wix.com/velo/reference/wix-http-functions/introduction "_blank") that are exposed on your site.
+ **jobs.config**
A file for [scheduling recurring jobs](https://support.wix.com/en/article/velo-scheduling-recurring-jobs). Jobs consist of backend code that's run at regular intervals.
+ **General backend files**
JavaScript code files. You can import code from these files into any other backend file on your site. These files require a `.js` file extension.
Use the following syntax to import code from backend files:
```js
import { myFunctionName } from 'backend/myFileName';
```
Trying to import from the relative path in your site's files doesn't work.
#### Config folder
If you add a [Velo Package built by Wix](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md) to your site, the backend folder contains a folder called `__config__`. This folder contains an editable `config.json` file for defining specific settings for your package.
#### Service plugin folder
If you add [service plugins](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis) to your site, the backend folder contains a folder called `__spi__`. This folder contains subfolders with the code files for each service plugin.
Learn more about [implementing service plugins](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis#implementing-a-custom-extension-with-a-velo-spi).
permissions.json
>**Important:** >You only need to use this file if you export backend functions from `.jsw` files. We recommend using web methods and exporting backend functions from `.web.js` files instead. Learn more about [web methods](https://support.wix.com/en/article/about-web-methods). The backend folder also contains the `permissions.json` file. This file defines [permissions](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md#permissions) for the functions in your web module files. The file contains a key, `"web-methods"` which contains an object. Each key in that object corresponds to a web module file in your backend folder. Name these keys with the following syntax: `"backend/{path to file}/myFile.jsw"`. The value for each file name key is an object that contains keys named after the functions in that file. Those objects contain keys for each permission level. For example: ```json { "web-methods": { "backend/myFileName.jsw": { "myFunction": { "siteOwner" : { "invoke" : // Boolean }, "siteMember" : { "invoke" : // Boolean }, "anonymous" : { "invoke" : // Boolean } } } } } ``` Set the permissions for each function using the following values: * **Owner-only access**: * `siteOwner.invoke`: `true` * `siteMember.invoke`: `false` * `anonymous.invoke` : `false` * **Site member access**: * `siteOwner.invoke`: `true` * `siteMember.invoke`: `true` * `anonymous.invoke` : `false` * **Anyone can access**: * `anonymous.invoke`: `true` * `siteMember.invoke` : `true` * `anonymous.invoke`: `true` The `"web-methods"` object must also contain a `"*"` key. The value for this key defines the default permissions that are applied to any function whose permissions you don't set manually. Here is a sample `permissions.json` file for a site with a backend file called `helperFunctions.jsw`. The file's functions are called `calculate`, `fetchData`, and `syncWithServer`. In this case anyone can call `calculate`, site members can call `syncWithServer`, and only site owners can call `fetchData`. ```json { "web-methods": { "*": { "*": { "siteOwner": { "invoke": true }, "siteMember": { "invoke": true }, "anonymous": { "invoke": true } } }, "backend/helperFunctions.jsw": { "calculate": { "siteOwner": { "invoke": true }, "siteMember": { "invoke": true }, "anonymous": { "invoke": true } }, "fetchData": { "siteOwner": { "invoke": true }, "siteMember": { "invoke": false }, "anonymous": { "invoke": false } }, "syncWithServer": { "siteOwner": { "invoke": true }, "siteMember": { "invoke": true }, "anonymous": { "invoke": false } } } } } ```
When you [add a dynamic page](https://support.wix.com/en/article/content-manager-about-dynamic-pages#adding-dynamic-pages) to your site, 2 code files are added to this folder corresponding to the dynamic list and dynamic item pages.
When you open a page's code file, you see the same sample code that appears in the Wix Studio code editor.
When you delete a page in the editor, the page's corresponding code file is deleted as well.
> **Warning:**
> Do not rename code files for pages. Wix uses these file names to associate the files with the appropriate pages on your site. If you rename a file, your code is ignored and a new code file is created for the page.
### Public folder
This folder contains the public code files for your site. You can import code from these files into any other file on your site.
Use the following syntax to import code from public files:
```js
import { myFunctionName } from 'public/myFileName';
```
Trying to import from the relative path in your site's files doesn't work.
### Styles folder
This folder contains custom CSS files for your site. Add custom CSS to your site in a file called `global.css`. If you don't see this file, you can create it. The styles defined in this file are applied to all the pages on your site.
Many [Wix Editor Elements](https://www.wix.com/velo/reference/$w) have specially defined class names that you can use to style them. You can also create custom class names to use in your CSS code. To learn about supported elements and their class names, see the [Velo API Reference](https://www.wix.com/velo/reference/$w/styling-elements-with-css). You can also see an element's predefined classes and add custom class names to an element in the [**CSS Classes panel**](https://support.wix.com/en/article/coding-with-the-wix-studio-sidebar#css-classes-panel).
Learn more about [writing CSS code for your site](https://www.wix.com/velo/reference/$w/styling-elements-with-css).
## Using the Wix IDE
To use the Wix IDE, do the following:
1. Click **Code in Wix IDE** in the top right corner of the code editor.
2. The Wix IDE opens in a new browser tab. You can now edit your site's code. Changes saved in the IDE are automatically synced to your site. The IDE's autosave feature is enabled by default. You can [disable autosave](https://code.visualstudio.com/docs/editor/codebasics#_save-auto-save) in the IDE's Settings editor.
**Note:** To use backend functions in your public and page code files, export functions from your backend files using [web methods](https://support.wix.com/en/article/about-web-methods).
3. Test your code using a [test site](https://support.wix.com/en/article/creating-a-test-site) or by [previewing your site](https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#previewing-your-site). You can see messages logged from your code in [Wix Logs](https://support.wix.com/en/article/velo-viewing-live-site-monitoring-events#how-it-works) or by [connecting your site](https://support.wix.com/en/article/velo-connecting-site-monitoring-events-to-google-operations-formerly-stackdriver) to Google Cloud Logs (Cloud Logging).
4. When your code is ready, publish your site to make your changes live.
## Editor-only actions
You need to do certain parts of the Wix development flow in the editor. These include:
+ Adding [NPM](https://support.wix.com/en/article/velo-working-with-npm-packages#installing-a-package), [Velo](https://support.wix.com/en/article/velo-working-with-velo-packages-built-by-wix#setting-up-a-package), and [private](https://support.wix.com/en/article/velo-working-with-your-velo-packages) packages. Once you add these packages in the editor, you can import them in your code files in the IDE.
+ [Adding](https://support.wix.com/en/article/wix-editor-adding-a-page-to-your-site#adding-a-new-page), changing, or deleting pages.
+ [Changing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) element IDs or properties.
+ [Previewing](https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#previewing-your-site) your site or [creating a test site](https://support.wix.com/en/article/creating-a-test-site).
+ [Publishing](https://support.wix.com/en/article/wix-editor-saving-previewing-and-publishing-your-site#publishing-your-site) your site.
+ Creating a [service plugin](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis#implementing-a-custom-extension-with-a-velo-spi).
## Concurrent editing
Two or more site contributors can edit a site's code at the same time in the Wix IDE. Edits made in one instance of the IDE are synced to the other instance in real time.
However, you can't edit your site's code in both the Wix IDE and the Wix Studio Code panel at the same time. You also can't edit your code in the Code panel if other site contributors are editing in the Wix IDE. When you open the Wix IDE, the Code panel switches to read-only mode. The Code panel displays this message:
If you want to edit your site's code in the Code panel, all site contributors must close the Wix IDE. You can then click **Start Coding** in the Code panel.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About the Wix IDE Beta Release
## Article: About the Wix IDE Beta Release
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/about-the-wix-ide-beta-release.md
## Article Content:
# About the Wix IDE Beta Release
The Wix IDE is currently in beta release. While this release is stable and can be safely used for building and modifying production sites, it still lacks important functionality as listed in the [known issues](#known-issues) section. As we continuously improve the Wix IDE, you can stay informed about new updates in the [release notes](#wix-ide-beta-release-notes) below.
As a separate environment from the editor, the Wix IDE allows you to focus on code and instantly see your code changes in Preview mode on a separate tab. Although the tutorial upon opening the Wix IDE is not yet fully tailored to the Wix environment, you can enjoy the IDE features such as refactoring capabilities, go to definition, command palette, split view, improved navigation, and more.
Learn more about working with the [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md). You can also check out the README file in your project's root level.
[IntelliSense](https://code.visualstudio.com/docs/editor/intellisense), VS Code's language support feature, doesn't currently recognize all NPM packages, Velo packages, Wix Blocks apps, backend modules, and editor elements as expected. You may experience false positive error highlighting for valid code that can run successfully. - **Functional testing is unavailable**
[Functional testing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/about-functional-testing.md) isn't currently available in the wix IDE. For functional testing, use the code editor. - **Terminal is not fully supported**
The Wix IDE doesn't require the terminal console to function. While the terminal is available for use, it only offers limited functionality. - **Built-in Git functionality is not supported**
Currently, you can't initialize a local Git repository or publish to GitHub from the Wix IDE. - **Git Integration and Wix IDE can't connect simultaneously**
You can't use both the [Git Integration](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) and the Wix IDE at the same time. If you connect your site to GitHub with Git Integration, the Wix IDE is unavailable until you disconnect your site from GitHub. The reverse is also true. - **Settings and extensions don't persist between sessions**
In the Wix IDE you can modify settings and install extensions from the [Open VSX Registry](https://open-vsx.org/). However, settings and extensions only apply to the IDE of the site you're currently working in, and aren't retained between Wix IDE sessions for the same site. You will have to reset your settings as well as re-install your extensions at the start of each new session. Note that a session concludes after 30 minutes of inactivity. ## Wix IDE beta release notes Stay up to date on our latest changes and additions as we continue to improve the Wix IDE. Your feedback is important to us. Please help us by reporting any issues that you notice while working with the Wix IDE. | Date | Description | | ------------------- | ------------------------------------------------ | | August 2, 2023 | Wix IDE beta available in Wix Studio. | | March 10, 2024 | Element IDs automatically sync with your IDE when you make changes to your site. ID changes were previously out of sync and required you to sync manually. | | March 26, 2024 | The **Display IDs** toggle is now visible in the **Layers** panel of the editor, while working in the Wix IDE.  | --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Git Integration & Wix CLI for Sites ## Article: About Git Integration & Wix CLI ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md ## Article Content: # About Git Integration & Wix CLI for Sites Git Integration & Wix CLI for Sites is a set of tools that allows you to write, test, preview, and publish code for your Wix site using your preferred IDE. Your site code is stored in a GitHub repository, giving you version control and making collaboration easy. ## Code in your preferred IDE Git Integration & Wix CLI for Sites allows you to connect your site to GitHub and develop using your preferred IDE. Wix sets up a repository for your project, which you can clone to your computer or cloud workspace and write code in as you would in any other non-Wix project. Read how to [set up Git integration & Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/setting-up-git-integration-wix-cli.md). ## Test your code with the Local Editor The [Local Editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-the-local-editor.md) allows you to test changes made to your site in real time. The code in your IDE is synced with the Local Editor so you can test your changes before committing them to your repo. You can also change your site's design in the Local Editor and sync it with your IDE. ## Preview and publish with the Wix CLI for Sites The [Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/wix-cli-for-sites-commands.md) is a tool that allows you to work with your site locally from the terminal. You can use it to build a preview version of your site and publish it. You can also use the CLI to install [npm packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md) to your site. ## Work with multiple collaborators at once Git Integration & Wix CLI for Sites extends Wix Studio's [concurrent editing](https://support.wix.com/en/article/studio-editor-collaborating-on-a-site) capabilities. Invite other developers as collaborators on your [site](https://support.wix.com/en/article/inviting-people-to-contribute-to-your-site) and your [GitHub repo](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository). Multiple developers can work on a site's code at once. ## Version control With Git integration, every change to your site's code is tracked in your GitHub repository, giving you a clear history of edits and the ability to revert to previous versions when needed. This makes it easy to manage updates, resolve conflicts, and maintain a stable development workflow—even when working with multiple collaborators. ## Get started - To get started, read how to [Set Up Git Integration & Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/setting-up-git-integration-wix-cli.md). --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Setting Up Git Integration & Wix CLI for Sites ## Article: Setting Up Git Integration & Wix CLI ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/setting-up-git-integration-wix-cli-for-sites.md ## Article Content: # Set Up Git Integration & Wix CLI for Sites [Git Integration & Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) allows you to write, test, preview, and publish code for your Wix site from your preferred IDE. This article explains how to set up Git Integration & Wix CLI for Sites by connecting your site to GitHub, cloning your site's GitHub repository to your computer, and installing the Wix CLI for Sites. > **Note:** You can also clone the repo to a cloud IDE workspace, then install and use the Wix CLI for Sites there. ### Before you begin Make sure you have the following tools installed before you start: * [Git](https://git-scm.com/download) * [Node](https://nodejs.org/en/download/), version 20.11 or later. * [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) or [yarn](https://yarnpkg.com/getting-started/install) * An SSH key [added to your GitHub account](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account). ## Step 1 | Connect your site to GitHub To write your site's code locally from your computer, first create a GitHub repo to store your site's code and connect it to your site.
**Important:** * You can't connect your site to GitHub if you have [Velo Packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md) set up on your site. This feature isn't supported when using Git Integration & Wix CLI for Sites. However, you can connect your site to GitHub if you have [npm packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md) installed on your site. * Once you connect your site to GitHub be careful not to delete your site's repo or revoke the Velo app's access to this repo. These actions may cause your site's GitHub connection to stop working even if you restore the repo or reinstall the app.If you haven't already done so, click  and then **Start Coding** (Wix Studio), or enable [Velo Dev Mode](https://support.wix.com/en/article/about-velo-by-wix#to-enable-velo-on-your-site) (Wix Editor). 1. Go to the GitHub Integration section of your editor: + **Wix Studio:** In the Code sidebar, click **GitHub** then **Connect to GitHub**.  + **Wix Editor:** Click the **GitHub Integration**  icon in the Code sidebar and then **Connect to GitHub**. 3. Click **Continue**.  4. Click **Sign In**. Follow the prompts to sign in to your GitHub account and authorize Velo to create a new repo for you. 5. Choose an owner and enter a name for the new repo to connect to your site. Optionally, you can add a custom description as well. Click **Create**.  6. Click **Install** to start installing the Velo GitHub app on your new repo. This app allows your site to communicate with GitHub. You may need to authenticate your identity in GitHub before continuing. 7. Make sure that both **Only select repositories** and your new repo are selected. Click **Approve and Install**.  8. Copy the displayed terminal commands. You need them for the next section of the setup.
9. Click **Close**.
Your repo name and default branch are displayed in the **GitHub Integration** panel.
Once you connect your site to GitHub, your editor enters [read-only mode](https://support.wix.com/en/article/velo-working-with-editor-x-and-github-integration#about-read-only-mode).
You can always choose to [disconnect your site from GitHub](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/disconnect-your-site-from-git-hub.md).
## Step 2 | Set up your local environment
Once your site's repo is set up, you can clone it to your computer and install the Wix CLI for Sites. The commands used in this procedure accomplish the following:
* Clone your site's repo to your computer.
* Install the repo's dependencies.
* Install the [Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/wix-cli-for-sites-commands.md) globally on your computer.
To set up your local environment, do the following:
1. Open the terminal on your computer.
2. Navigate to the directory where you want to store your repo's files.
3. Run the commands you copied down in the previous section. Depending on your computer's setup, you may need administrator privileges to run the commands.
To see the commands again, open your site's editor and click **Local Dev Setup**.
The default commands use npm as the package manager for installations. You can also use yarn to manage packages. To do this, make the following changes:
* Change `npm install` to `yarn install`.
* Change `npm install -g @wix/cli` to `yarn global add @wix/cli`.
After the installation, the [Local Editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-the-local-editor.md) opens in your default web browser.
4. Open the repo in your favorite local IDE to start writing code.
## Step 3 | Set up the Wix CLI for Sites
The CLI is a package that you install on your computer.
1. Open your computer's terminal.
2. Run `npm install -g @wix/cli` or `yarn global add @wix/cli`.
Once you've installed the CLI globally, you can use it with any Wix site repos on your computer.
## Next Steps
You're ready to start writing your site's code, and [testing it with the Local Editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/test-your-code-in-the-local-editor.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Publishing a Site with Git Integration & Wix CLI for Sites
## Article: Publishing a Site with Git Integration & Wix CLI
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/publishing-a-site-with-git-integration-wix-cli-for-sites.md
## Article Content:
# Publish a Site with Git Integration & Wix CLI for Sites
Once you've used [Git Integration & Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) to edit your site's code and test it, you're ready to move it to your live site. This process includes 2 stages:
1. Pushing your code to your site's GitHub repository.
2. Publishing your site.
## Step 1 | Push your code to GitHub
Your site's editor is synced with the [default branch](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-branches#about-the-default-branch) of your site's GitHub repository. Usually, this is the `main` branch, but you can [change it](https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-branches-in-your-repository/changing-the-default-branch) to any branch you want.
To sync your code with the editor, push a commit to your repo's default branch. You can use other GitHub features like branches, pull requests, and reviews as you normally would.
5. In the **Repository access** section, click **Select repositories**. Select your site's repository from the dropdown list. Click **Save**.
6. Refresh the Wix editor.
## Velo App Uninstalled
The **Velo App on GitHub was uninstalled** modal indicates that you have uninstalled the Velo App from your GitHub account. To reinstall the app, take the following steps:
1. Open the [Velo App](https://github.com/apps/velo-app) page in a new tab in your browser.
2. Click **Configure**.
3. Select where you want to install the app.
4. Select **Only select repositories** and select your site's repository from the dropdown list.
5. Click **Install**.
6. Refresh the Wix editor.
## Velo App Suspended
The **Velo App on GitHub was suspended** modal indicates that you have suspended the Velo App's access to your GitHub account. To unsuspend the app, take the following steps:
1. Open [GitHub](https://www.github.com) in a new tab in your browser.
2. In the upper-right corner, click your profile photo and select **Settings**.
3. On the left sidebar, under **Integrations**, click **Applications**.
4. With the **Installed GitHub Apps** tab selected, find the Velo App and click **Configure**.
5. In the **Danger Zone** section, click **Unsuspend**.
6. Refresh the Wix editor.
## See also
* [Test Your Code in the Local Editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/test-your-code-in-the-local-editor.md)
* [Publish a Site with Git Integration & Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/publishing-a-site-with-git-integration-wix-cli.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Wix CLI for Sites Commands
## Article: Working with the Wix CLI
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/wix-cli-for-sites-commands.md
## Article Content:
# Wix CLI for Sites Commands
This article documents the CLI commands for working with your Wix site.
For a detailed explanation of the process and how to initially set up the Wix CLI for Sites, see [Set Up the Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/setting-up-git-integration-wix-cli.md#step-3--set-up-the-wix-cli).
## Command Overview
| Command | Description |
|--------------------|--------------------------------------------------------------|
| [wix dev](#wix-dev) | Opens a local development environment for your Wix site. |
| [wix install](#wix-install)| Installs a package to your site. |
| [wix update](#wix-update) | Updates a package installed on your site. |
| [wix uninstall](#wix-uninstall) | Uninstalls a package from your site. |
| [wix publish](#wix-publish)| Publishes your site to production. |
| [wix preview](#wix-preview)| Creates a shareable version of your site before going live. |
| [wix login](#wix-login) | Logs in to your Wix account. |
| [wix whoami](#wix-whoami) | Displays the username of the logged-in Wix user. |
| [wix logout](#wix-logout) | Logs out of your Wix account. |
## wix -h
``` bash
wix -h
```
Displays a list of supported CLI commands in the terminal.
You can also run `wix [command] -h` to get detailed help for a command.
## wix dev
```bash
wix dev
```
Opens a site's Local Editor.
### wix dev flags
| Flag | Description |
|-----------------|--------------------------------------------------------------|
| `--tunnel` | Use this flag to allow the editor to connect to the CLI when running it on a cloud IDE. |
## wix install
```bash
wix install [options] **Important:** Publishing your local code leaves your live site and your site's GitHub repo out of sync. If you publish from the repo later without pushing your local code, your local code is overwritten and may be lost.For more information, see [Publish a Site with the Git Integration & Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/publishing-a-site-with-git-integration-wix-cli.md). ## wix preview ```bash wix preview ``` Builds a preview version of a site. You can only use this command if you have previously published your site. You can build the preview from the code in the default branch of a site's repo or from the local code in your IDE. ```bash ? What would you like to preview? › - Use arrow-keys. Return to submit. ❯ Latest commit from origin/main Local code ``` Once the preview site is ready, a URL to the site is displayed in the terminal. ```bash Creating preview deployment... Your preview deployment is now available at http://wix.to/JOaBagO ``` > **Note:** > * This preview isn't a [test site](https://support.wix.com/en/article/about-test-sites) and doesn't appear in the Release Manager. > * The preview uses the live versions of any [HTTP functions](https://www.wix.com/velo/reference/wix-http-functions) exposed on your site. This means you can't use the preview to test changes to HTTP functions. To test HTTP functions, commit and push them to your site's repo and use [functional testing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/test-backend-functions-with-functional-testing.md) in the editor. ## wix login ```bash wix login ``` Logs in to a Wix account. This allows the CLI to perform actions on that account's sites. ## wix whoami ```bash wix whoami ``` Displays the username of the currently logged-in Wix user. ## wix logout ```bash wix logout ``` Logs you out of your Wix account. ## See also * [About Automated Workflows and the Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-automated-workflows-and-the-wix-cli.md) * [Testing your code with the Local Editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/test-your-code-in-the-local-editor.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About the Local Editor ## Article: Working with the Local Editor ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-the-local-editor.md ## Article Content: # About the Local Editor > **Note** > This article refers to 2 different versions of the editor: > > * **Regular Editor**: The editor that's generally used to build Wix sites. > * **Local Editor**: A specialized version of the Regular Editor that's used when developing your site in your local IDE. The Local Editor is a tool for testing code added to your site in your local IDE using [Git Integration & Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md). You can use the Local Editor to test your code in real time and make changes to your site's design that you can sync with your IDE. For detailed instructions on this flow, see [Test Your Code in the Local Editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/test-your-code-in-the-local-editor.md). ## Differences in the Local Editor Working in the Local Editor is different from working in the Regular Editor. Please note the following changes: * The **Publish** button is replaced with the **Save** button. * Code files are read-only. To make changes to your site's code, use your local IDE. * Packages & Apps are read-only. To add, update, or delete packages and apps, use your local IDE. * The Wix IDE is disabled, use your local IDE instead. * If you duplicate a page on your site, the page's code isn't included in the copy. * Changes to [collection fields](https://support.wix.com/en/article/content-manager-about-your-collection-fields) are immediately reflected on your live site, even before you publish. ## Making changes to site design The Local Editor allows you to make changes to your site's design such as adding or modifying elements and pages. These changes generate a new UI version for your site which you need to sync with your IDE. Once the UI version is synced with your IDE, code files for newly added pages appear in your repo. Autocomplete is also enabled for any newly added page elements. ### About UI versions UI versions are snapshots of a site's design. Saving any design changes to a site including adding a new page or adding or modifying elements generates a new UI version. UI versions are generated in both the Local Editor and the Regular Editor. Wix uses UI versions to match the code in your IDE with your site's design. The current UI version for the code in your site's repo is indicated in the [wix.config.json](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/git-hub-repository-file-structure.md) file.
When using `.jsw` (deprecated) web modules, you can't change permissions in the editor when using Git Integration & Wix CLI for Sites. Instead, use the permissions.json file to set function permissions.
The backend folder also contains the **permissions.json** file. This file defines [permissions](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md#permissions) for the functions in your web module files. The file contains a key, `"web-methods"`, whose value is an object that contains keys named after the web module files in your backend folder. Name these keys with the following syntax: `"backend/{path to file}/myFile.jsw"`. The value for each file name key is an object that contains keys named after the functions in that file. Each function key has a value with the following format: ```json "myFunction": { "siteOwner" : { "invoke" : // Boolean }, "siteMember" : { "invoke" : // Boolean }, "anonymous" : { "invoke" : // Boolean } } ``` These values reflect the different levels of web module function permissions. You should set them using the following options: * **Owner-only access**: * `siteOwner.invoke`: `true` * `siteMember.invoke`: `false` * `anonymous.invoke` : `false` * **Site member access**: * `siteOwner.invoke`: `true` * `siteMember.invoke`: `true` * `anonymous.invoke` : `false` * **Anyone can access**: * `anonymous.invoke`: `true` * `siteMember.invoke` : `true` * `anonymous.invoke`: `true` The `"web-methods"` object must also contain a `"*"` key. The value for this key defines the default permissions that are applied to any function whose permissions you don't set manually. Here is an example `permissions.json` file for a site with a backend file called `helperFunctions.jsw`. The file's functions are called `calculate`, `fetchData`, and `syncWithServer`. In this case anyone can call `calculate`, site members can call `syncWithServer`, and only site owners can call `fetchData`. ```json { "web-methods": { "*": { "*": { "siteOwner": { "invoke": true }, "siteMember": { "invoke": true }, "anonymous": { "invoke": true } } }, "backend/helperFunctions.jsw": { "calculate": { "siteOwner": { "invoke": true }, "siteMember": { "invoke": true }, "anonymous": { "invoke": true } }, "fetchData": { "siteOwner": { "invoke": true }, "siteMember": { "invoke": false }, "anonymous": { "invoke": false } }, "syncWithServer": { "siteOwner": { "invoke": true }, "siteMember": { "invoke": true }, "anonymous": { "invoke": false } } } } } ```**Important:** Once you disconnect your site from GitHub and from a repo, you can't reconnect the site to that repo again. If you reconnect your site to GitHub later, a new repo is created.To disconnect from GitHub: 1. Click the **GitHub Integration** icon on the sidebar.  2. Hover over your repo's name and click the More Actions icon.  3. Select **Disconnect from GitHub**.  4. In the modal, click **Disconnect from GitHub**.  --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Test Your Code in the Local Editor ## Article: Test Your Code in the Local Editor ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/test-your-code-in-the-local-editor.md ## Article Content: # Test Your Code in the Local Editor > **Note** > This article refers to 2 different versions of the editor: > > * **Regular Editor**: The editor that's generally used to build Wix sites. > * **Local Editor**: A specialized version of the Regular Editor that's used when developing your site in your local IDE. The [Local Editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-the-local-editor.md) is a tool for testing code added to your site in your local IDE using [Git Integration & Wix CLI for Sites](https://support.wix.com/en/article/velo-about-velo-pro). You can use the Local Editor to test your code in real time and make changes to your site's design that you can sync with your IDE. This article explains how to test your code in the Local Editor and sync any design changes you make. ## Step 1 | Open the Local Editor Open the Local Editor from your computer using the [Wix CLI for Sites](https://support.wix.com/en/article/velo-working-with-the-wix-cli-beta). 1. Open your computer's terminal and navigate to the clone of your site's GitHub repository. 2. Run this command: `wix dev`. A new tab with the Local Editor opens in your default browser. Notice the **Local Editor** in the top bar on the left.  > **Note:** If you're running the CLI on a cloud provider's IDE, such GitHub Code Spaces, add the `--tunnel` flag to the `wix dev` command. This makes the full command `wix dev --tunnel`. ### Reopen a closed Local Editor The Local Editor needs both the terminal and a browser tab open to run. If you close the browser tab, your terminal displays a URL you can use to reopen the editor in your browser. You can also do this by pressing `e` in the terminal.
- 40 character maximum. Only letters (a-z) and numbers.
- No spaces or special characters except hyphens (`-`) and underscores (`_`).
- Cannot begin with `wix`, regardless of case.
- 3,500 character maximum.
- 200 characters maximum.
Add a secret
To add a secret: 1. At the top right of the Secrets Manager, click **Add Secret**. 2. In the **Add secret** modal, fill in the [fields](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md#secret-fields).  3. Click **Add Secret**. The secret is added and stored in the Secrets Manager. The name and description are displayed, and the secret value is hidden. Edit a secret
To edit a secret:Warning: Changing a secret's name or value breaks all code that implements the secret.1. For the secret you want to edit, select **Edit** in the secret's **More Actions**
menu. The **Edit secret** modal appears.
2. - To change the secret's **Name** or **Description**, click the [fields](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md#secret-fields) to edit the text.
- To change the secret's value, click **Retrieve value**, then click inside the secret's **Value** field that appears.
3. Click **Change Secret**.
Delete a secret
To delete a secret:Warning:1. For the secret you want to delete, select **Delete secret** in the secret's **More Actions**
- Deleting a secret breaks all code that implements the secret.
- You cannot restore a deleted secret.
menu. The **Delete secret?** modal appears.
2. Click **Delete Secret** to confirm.
The secret is removed from the Secrets Manager.
**Tip:** If the live log stream does not appear, refresh your site while the Wix Logs page is open in another tab.By default, each log displayed in the Wix Logs page includes the following fields: | Column | Description | [Log object](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/log-object-structure.md) property | | ----------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | **Level** | Log's severity level. Possible values are:
`INFO`, `WARNING`, `ERROR`, or `DEBUG`. | `severity` | | **Time** | Timestamp when the log was triggered. | `receiveTimestamp` | | **Message** | Log's payload message in JSON format. | `jsonPayload.message` | | **Source file** | Path to the source file that generated the log message. | `sourceLocation.file` | 1. You can change the view to suit your needs: - To change the order of columns or display additional ones, such as the operation ID and the data stream, click . - Filter the log messages by: - **Stream**. Filter by preview, live site, or both. - **Level**. Limit the logs by info, warning, error, or debug. - Find specific logs by providing search criteria. 1. To view additional details for a log, hover over it and click **View**. See the [log object structure](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/log-object-structure.md) for an explanation of each field. 1. To copy the object in JSON format, click  and then **Copy JSON**. ## See also - [About Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) - [View logs using Google Cloud Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md) - [View logs using an external monitoring tool](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-an-external-monitoring-tool.md) - [Tutorial | Generate logs to debug a site](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/generate-logs-to-debug-your-site.md) - [Log object structure](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/log-object-structure.md) - [Site monitoring service plugin](https://dev.wix.com/docs/velo/api-reference/wix-site-monitoring/service-plugin-spi/site-monitoring/introduction.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: View Logs using Google Cloud Logs ## Article: Connecting Wix Logs to Google Cloud Logs ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md ## Article Content: # View Logs using Google Cloud Logs You can view your site's [logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) using [Google Cloud Logs](https://cloud.google.com/products/operations), an external monitoring tool that displays, analyzes, and stores your logs. With Google Cloud Logs, you can: - Stream, search, and analyze log data in real time. - Store log data in the cloud. - Trace, sort, and filter aggregated error data. This article explains how to: - [Connect to Google Cloud Logs](#connect-to-google-cloud-logs) - [View your logs using Google Cloud Logs](#view-your-logs-using-google-cloud-logs) - [Disconnect Google Cloud Logs](#disconnect-google-cloud-logs) ## Connect to Google Cloud Logs To connect your site's logs to Google Cloud Logs: 1. In the site dashboard, click **Developer Tools** > **Logging Tools**. 2. In the Google Cloud Logs section, click **Open**. The Google Cloud Logs page opens.
**Important:** - Your site sends logs in the form of JSON objects. Make sure to configure the endpoint to handle JSON objects so that the external monitoring tool can parse them correctly. - Your endpoint must be configured to accept the POST request method.### Use an endpoint by an existing monitoring service You can use an endpoint provided by an existing monitoring service, such as [logz.io](https://logz.io/) or [Loggly](https://www.loggly.com/). Refer to the service's documentation to learn how to create an endpoint. ### Implement your own endpoint Alternatively, you can implement your own endpoint and integrate it with a monitoring tool of your choice. > **Note**: You can create an endpoint for logs on a Wix site using the [HTTP functions API](https://dev.wix.com/docs/velo/api-reference/wix-http-functions/introduction.md), but you can't do so on the same site whose logs you want to view. Your endpoint must include code to convert [log objects](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/log-object-structure.md) into a format that can be parsed by the external monitoring tool. For your convenience, Wix offers an open-source example using [Solarwinds Loggly on Google App Engine](https://github.com/wix/corvid-loggly-telemetry-adapter). The code is specific to this tool, but you can adapt it for the monitoring tool of your choice. ## Step 2: Set your endpoint Once you have an endpoint, set it in the site dashboard: 1. In the site dashboard, click **Developer Tools** > **Logging Tools**. 2. In the **Connect an external logging tool** section, click **Next**. The Connect external logging tool page appears.
`INFO`: Status, performance, or other general information.
`WARNING`: An unexpected or undesired development that may cause problems.
`ERROR`: A serious issue likely to cause problems.
`DEBUG`: Logs that are only useful while debugging and generally not relevant for production. | | `labels` | object | Additional information about the log. | | `labels.siteUrl` | string | Base URL of the site associated with the log. | | `labels.namespace` | string | Name of Wix app associated with the log, such as [Wix Stores](https://www.wix.com/app-market/wix-stores) or [Wix Bookings](https://www.wix.com/app-market/bookings).
The generic namespace `Velo` represents site code not associated with any specific Wix app. **Only the `Velo` namespace is supported. You currently can't enter the name of any other Wix app.** | | `labels.tenantId` | GUID | Unique site identifier. Does not change even if the site name or other site parameters change. | | `labels.viewMode` | string | Viewing mode in which the log originated. Possible values:
`Preview`: [Site preview mode](https://support.wix.com/en/article/studio-editor-saving-previewing-and-publishing-your-site#previewing-a-site).
`Site`: [Published site](https://support.wix.com/en/article/studio-editor-saving-previewing-and-publishing-your-site#publishing-a-site). | | `labels.revision` | string | Unique site revision identifier. You can use the `revision` property together with the [Release Manager](https://support.wix.com/en/article/about-site-monitoring#site-revisions) to monitor and debug new site revisions. | | `operation` | object | Additional information about a potentially [long-running operation](#long-running-site-operations) associated with the log. | | `operation.id` | string | Unique operation identifier. | | `operation.producer` | string | Operation context, such as the page or web module where the operation took place. | | `sourceLocation` | object | Source code location information. Applies to backend log entries with the `Velo` namespace. | | `sourceLocation.file` | string | File that generated the log. | | `sourceLocation.line` | number | Number of line that generated the log. | | `sourceLocation.column` | number | Number of the column on the line that generated the log. | | `jsonPayload` | object | Log payload in JSON format. | | `jsonPayload.message` | string | Payload message. | ### Long-running site operations Some operations, such as a method call or a [scheduled job](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/recurring-jobs/about-scheduling-recurring-jobs.md), generate multiple log entries. The `operation` object allows you to find the logs associated with a specific operation. Use the unique `operation.id` field to identify which operation generated the logs, and the `producer` property to view the context in which the operation took place. ## Example Here's an example log object: ```json { "insertId":"6axgiF6X45ftx7A1bjJBCh", "timestamp": "2019-03-31T06:02:12.008Z", "labels": { "siteUrl": "https://my-site.com", "revision": "12", "namespace": "Velo", "tenantId": "fbd4e3c6-8e55-4098-b0ff-5e478b6c957e", "viewMode": "Preview" }, "sourceLocation": { "file": "backend/backend.web.js", "line": 26, "column" : 16 }, "operation": { "id": "1554017373.14484058793726342", "producer": "backend" }, "jsonPayload": { "message": "Backend event triggered." }, "receiveTimestamp": "2025-01-20T06:02:12.925Z", "id": "455b7bef-8ba2-4914-9808-0f9f98084f71", "severity": "INFO" } ``` ## See also - [About Wix logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) - [View logs using Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md) - [View logs using Google Cloud Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-google-cloud-logs.md) - [View logs using an external monitoring tool](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-an-external-monitoring-tool.md) - [Tutorial | Generate a log to debug your site](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/generate-logs-to-debug-your-site.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Generate Logs to Debug Your Site ## Article: Generating a Log to Debug Your Site ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/generate-logs-to-debug-your-site.md ## Article Content: # Tutorial | Generate Logs to Debug a Site This tutorial demonstrates how to generate logs from site code. We will then view the generated logs using [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md). In this tutorial, we will: 1. Add a button to a site's home page. 1. Create an event handler that generates a log whenever the button is clicked. 1. View the generated log using Wix Logs. > **Note**: In this tutorial, logs are generated from page code. However, you can also generate logs from backend code. ## Step 1 | Add a button to your site Add a button to your site and create an event handler: 1. Add a button labeled `button1` to your site's home page, like this:
Tip: To simplify the process of building yourHere is an example of a JSON object configured to send a status report every Monday morning at 8:00 AM UTC time: ```json { "jobs": [ { "functionLocation": "/utils.web.js", "functionName": "sendStatusReport", "description": "Send a weekly status report.", "executionConfig": { "time": "08:00", "dayOfWeek": "Monday" } } ] } ``` ### Schedule multiple jobs Schedule multiple jobs in the `jobs.config` file by adding additional objects to the `jobs` array. ```json { "jobs": [ { "functionLocation": "/utils.js", "functionName": "sendStatusReport", "description": "Send a morning status report.", "executionConfig": { "cronExpression": "0 8 * * MON" } }, { "functionLocation": "/utils.js", "functionName": "cleanDb", "description": "Delete stale items from the DB on the first of the month.", "executionConfig": { "time": "01:00", "dateOfMonth": 1 } } ] } ``` ## Step 4 | Publish your site You must [publish your site](https://support.wix.com/en/article/wix-editor-publishing-your-site) to save changes to your scheduled jobs. ## See also + [About scheduling recurring jobs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/recurring-jobs/about-scheduling-recurring-jobs.md) + [Jobs: JSON object](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/recurring-jobs/jobs-json-object.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Jobs JSON Object ## Article: Jobs JSON Object ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/recurring-jobs/jobs-json-object.md ## Article Content: # Jobs: JSON Object When scheduling [recurring jobs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/recurring-jobs/about-scheduling-recurring-jobs.md) on your site, you define the jobs in the `jobs.config` file. The `jobs` object in the file is structured as follows: ```json { "jobs": [ { "functionLocation": "jobs.configfile, you can use this third-party Jobs Config tool. It allows you to enter the details of your jobs and builds the jobs object for you. The tool also includes a validator that can check your existingjobs.configfile for errors.
Tip: As an alternative to triggered emails, you can use Wix Automations to reach out to your visitors.## Supported IDEs You can schedule recurring jobs using: + The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor). + The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio). + Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md) (Wix Studio and Wix Editor). ## Monthly email marketing balance Every site has a quota of monthly emails available to send. You can check the current balance under **Monthly balance** in your site's [Email Marketing dashboard page](https://www.wix.com/my-account/site-selector/?buttonText=Open%20Email%20Marketing&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https://www.wix.com/dashboard/{{metaSiteId}}/shoutout/). Triggered emails count toward the [email marketing balance](https://support.wix.com/en/article/email-marketing-understanding-your-monthly-balance) but continue to send without interruption even once the quota is reached. You can also [upgrade your email marketing plan](https://www.wix.com/my-account/site-selector/?title=Select%20a%20Site&buttonText=Select%20Site&actionUrl=https%3A%2F%2Fwww.wix.com%2Fwix-emails-plans%3FmetaSiteId%3D%7B%7BmetaSiteId%7D%7D%26origin%3Dkb) for a larger sending quota. ## Statistics for triggered emails vs email marketing The [Triggered Emails dashboard page](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdeveloper-tools/triggered-emails) maintains [statistics](https://support.wix.com/en/article/viewing-your-email-marketing-statistics) related to the triggered emails you create. Triggered email statistics are based on all emails sent, including test emails you send to yourself. This is different from the statistics for email marketing campaigns in your [Email Marketing dashboard page](https://www.wix.com/my-account/site-selector/?buttonText=Open%20Email%20Marketing&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https://www.wix.com/dashboard/{{metaSiteId}}/shoutout/), which are based on emails sent to unique contacts. Therefore, the statistics for triggered emails may seem inflated compared to email marketing statistics. ## Site collaborators [Site collaborators](https://support.wix.com/en/article/inviting-people-to-contribute-to-your-site#inviting-people-to-collaborate-on-your-site) can create and manage triggered emails. To do so, you must [give them](https://www.wix.com/my-account/site-selector/?buttonText=Manage%20this%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https://www.wix.com/dashboard/%7B%7BmetaSiteId%7D%7D/manage-website/authorization) both **Manage Triggered Emails** and **Manage Email Marketing Campaigns** [permissions](https://support.wix.com/en/article/roles-permissions-overview#roles-and-permissions). ## See also + [Set up a triggered email](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/set-up-a-triggered-email.md) + [Tutorial: Send a triggered email to contacts](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/sending-a-triggered-email-to-contacts.md) + [Tutorial: Send a triggered email to members](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/sending-a-triggered-email-to-members.md) + [Tutorial: Send emails using the SendGrid npm package](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/send-emails-using-the-send-grid-npm-package.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Set Up a Triggered Email ## Article: Creating a Triggered Email ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/set-up-a-triggered-email.md ## Article Content: # Set Up a Triggered Email Set up a [triggered email](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/about-triggered-emails.md) to automatically send customized emails for specific events on your site. ## Step 1 | Navigate to the Triggered Emails dashboard page To access the Triggered Emails dashboard page, you can either: + Select **Developer Tools** from the code sidebar and click **Triggered Emails**. + Select **Developer Tools** from [your site’s dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdeveloper-tools/triggered-emails) and select **Triggered Emails**. ## Step 2 | Create an email Use the editor to create and design a new email: 1. On your [Triggered Emails dashboard page](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdeveloper-tools/triggered-emails), click **+ New Campaign** to create a new email, or click the **More Actions**  icon and select **Duplicate** to duplicate an existing triggered email. 2. Design your email in the editor. ## Step 3 (Optional) | Add variables to personalize text Add variables to personalize the text of your email. The variable is a placeholder that will be replaced by a value you define in the code. 1. With a text element selected in the editor, click **+ Add Variable**:  2. Fill out the fields in the popup: + **Variable name**: Name the variable something meaningful so it’s easy to identify later. For example, `newSubscriberName`. + **Fallback value**: A replacement text that displays here in case you’re missing that specific piece of data. You can apply fallback values in the body of an email, but not in the subject line. For example, with the fallback value `there`, in a case where you don't have the new subscriber's name the email will fallback to "Hey there,". 3. Click **Add**. ## Step 4 | Test, save, or publish the email Once your email is designed you have the option at the top of the editor to preview, save, or publish the triggered email.  + Click **Preview & Test** to send yourself the email to see how it will appear in an inbox and to test any links you included in the email. + Click **Save as Draft** to save your email as a work-in-progress and returns you to the [Triggered Emails dashboard page](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdeveloper-tools/triggered-emails). Draft emails are not sent when the triggering event occurs. + Click **Save & Continue**. If this is the first time ever you're creating a campaign, you'll be asked to fill out [sender details](#step-5-–add-sender-details). That must be completed before publishing. ## Step 5 | Add sender details Sender details are required to send triggered emails. These details contain the information that appears as the sender’s name and email address when an email from your site is received: + **Sender’s name**: This is the name that displays in the recipient's inbox. + **Reply-to email**: This is the email address that will populate as the send-to address in your reader's email when they click Reply.
Important information about the email address included in reply-to email: + Emails sent with a reply-to email with a public domain, such as `@gmail.com` or `@yahoo.com`, tend to land in the spam or promotions category. It's better to use an email address with an authenticated domain, such as `you@yourbusiness.com`. + If you use a public domain address, Wix redirects your email through our own authenticated address `@wixemails.com` or, for free users, `@wixsitemail.com`. When someone replies to your email, their new email will automatically populate the send field with the reply-to email. + You may be asked to confirm your reply-to email. You'll receive an email in your inbox with those instructions.Click **Save** to continue. ## Step 6 | Get the code snippet Before redirecting back to the [Triggered Emails dashboard page](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdeveloper-tools/triggered-emails) you have the opportunity to make changes to the email ID and the audience who will receive the email:  1. Update the unique **Email ID** to one that’s more friendly to work with. For example, `newsletter_signup`. This email ID is used in the code snippet. 2. Click **Email new contacts** or **Email site members** to display the appropriate snippet. 3. Copy the code snippet now or access it later from the [Triggered Emails dashboard page](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdeveloper-tools/triggered-emails). 4. Click **Save**. ## Step 7 | Add the code snippet to an event on your site Take the code snippet you copied from the previous window or hover over a triggered email in the [Triggered Emails dashboard page](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdeveloper-tools/triggered-emails) and click the **View code snippet**  icon and add the snippet to your code. ## See also + [About triggered emails](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/about-triggered-emails.md) + [Tutorial: Send a triggered email to contacts](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/sending-a-triggered-email-to-contacts.md) + [Tutorial: Send a triggered email to members](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/sending-a-triggered-email-to-members.md) + [Tutorial: Send emails using the SendGrid npm package](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/send-emails-using-the-send-grid-npm-package.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Sending a Triggered Email to Contacts ## Article: Sending a Triggered Email to Contacts ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/sending-a-triggered-email-to-contacts.md ## Article Content: # Velo Tutorial: Sending a Triggered Email to Contacts [Triggered Emails](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/about-triggered-emails.md) allow you to create a template for emails that you can send to a newly created contact, using code. Before sending the email, your code can inject information into the template to personalize it with any data that is available in your page code. In this article, we demonstrate how to use the code snippet generated by Triggered Emails to send an email to the newly created contact on the submission of a form. Although this article uses a form submission for demonstration purposes, you can send an email from anywhere in your code. The general idea is to paste the generated snippet into your code where you want the email to be sent. Then edit the snippet so that it uses the ID of the newly created contact and the values you want to insert for the variable placeholders.
**Note:** For a more general-purpose article on sending an email using a 3rd party email service, see [How to Send an Email on Form Submission](https://support.wix.com/en/article/how-to-send-an-email-on-form-submission).### Prerequisites This article assumes you are familiar with [creating an input form](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/user-input/processing-user-input-before-it-is-stored-in-a-collection-with-data-hooks.md). In this example we'll assume you've [created and published](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/triggered-emails/set-up-a-triggered-email.md) the following Triggered Email:
To create a Triggered Email for Contacts, select the Email New Contacts tab.
The code snippet generated by the email looks like this:
```javascript
import {triggeredEmails } from 'wix-crm-frontend';
// ...
const options = {
variables: {
name:
|Type |ID |Usage |
|---|---|---|
|Input - text|nameInput|For entering a name
|Input - email|emailInput|For entering an email address
|Dropdown|interestArea|For selecting area of interest
|Button|signUpButton|For submitting the data
|Dataset|newsletterDataset|For connecting the elements
### Code
Finally, we write the code to send the Triggered Email described above when the form is successfully submitted. The code will send the values from the form to be used in place of the variables in the email template.
**Here's the outline of what we'll need to do:**
1. Add the import statement to the top of the code where we use the snippet. We will also need to import an additional module to create new site contacts.
2. Add an onClick event handler to the button. The code we add to that handler function will create the new contact and email them.
3. Add code that creates the new contact and gives us the contact's ID.
4. Add the snippet code to the handler function and replace the placeholder values.
5. Add some code to handle success and errors.
**Note:** Triggered Emails may not work properly when previewing your site. Publish your site to test the code found below.**1\. Add the import statement to the top of the code where we use the snippet.** Paste the import statement that was at the top of your snippet: `import {triggeredEmails} 'wix-crm-frontend';` to the top of the code in the page where you want to use the snippet. Add `contacts` in between the `{ }` to import that module as well. The final import statement should look like this: import { triggeredEmails, contacts } from 'wix-crm-frontend'; **2.** **Add an onClick event handler to the button. The code we add to that handler function will create the new contact and email them.** Use the Properties & Events panel to add an `onClick()` event handler to the signUpButton that runs each time it's clicked. **3\. Add code that creates the new contact and gives us the contact's ID.** Add this code inside the onClick event handler. This uses the [appendOrCreateContact](https://www.wix.com/velo/reference/wix-crm-frontend/contacts/appendorcreatecontact) API to create the new contact using the information the site visitor entered in the form fields. ```javascript contacts.appendOrCreateContact({ name: { first: $w('#nameInput').value }, emails: [{ email: $w('#emailInput').value }], extendedFields: { interest_area: $w('#interestArea').value } }); ``` The `appendOrCreateContact` function returns an object containing the `contactID`, and `identityType` for the newly created contact. We'll grab the ID and use it in our snippet to identify the new contact and email them. **4\. Add the snippet code to the handler function and replace the placeholder values.** The `appendOrCreateContact` function returns a promise, so we'll add our snippet after it. We'll declare a new variable called `contactId` and use it to store the `contactId` value that is stored in the object returned by `appendOrCreateContact()`. We will use this ID in the snippet in place of `
Visit the Velo by Wix website to onboard and continue learning.
[Triggered Emails](https://support.wix.com/en/article/about-triggered-emails) allow you to create a template for emails that you can send to the currently logged-in site member, using code. Before sending the email, your code can inject information into the template to personalize it with any data that is available in your page code. In this article, we demonstrate how to use the code snippet generated by Triggered Emails to send an email to the currently logged-in site member on the submission of a form.
Although this article uses a form submission for demonstration purposes, you can send an email from anywhere in your code. The general idea is to paste the generated snippet into your code where you want the email to be sent. Then edit the snippet so that it uses the ID of the currently logged-in member and the values you want to insert for the variable placeholders.
**Note:** For a more general-purpose article on sending an email using a 3rd party email service, see [How to Send an Email on Form Submission](https://support.wix.com/en/article/how-to-send-an-email-on-form-submission).### Prerequisites This article assumes you are familiar with [creating an input form](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/user-input/processing-user-input-before-it-is-stored-in-a-collection-with-data-hooks.md). In this example we'll assume you've [created and published](https://support.wix.com/en/article/creating-a-triggered-email) the following Triggered Email. You will also need a way for members to [log into your site](https://support.wix.com/en/article/adding-a-members-area-to-your-site).
To create a Triggered Email for Contacts, select the Email Site Members tab.
The code snippet generated by the email looks like this:
```javascript
import {triggeredEmails } from 'wix-crm-frontend';
// ...
const options = {
variables: {
name:
|Type |ID |Usage |
|---|---|---|
|Input|nameInput|For entering a name
|Dropdown|sportDropdown|For entering a preferred sport
|Text Box|commentsInput|For entering comments
|Button|submitButton|For submitting the data
|Dataset|sportDataset|For connecting the elements
### Code
Finally, we write the code to send the Triggered Email described above when the form is successfully submitted. The code will send the values from the form to be used in place of the variables in the email template.
**Note:** Triggered Emails may not work properly when previewing your site. Publish your site to test the code found below.To do so, we register an `onAfterSave()` event handler that runs each time a new item is successfully submitted. Inside the handler function, we paste the code snippet generated when we created our Triggered Email. We also have to import the `triggeredEmails` module, since it contains the `emailMember()` function. At this point, our code looks like this: ```javascript import { triggeredEmails } from 'wix-crm-frontend'; $w.onReady(function () { $w("#sportDataset").onAfterSave( () => { triggeredEmails.emailMember("sportMail",
## Interactive chat
The Wix AI Assistant provides an interactive chat interface, so you can continue your conversation with the assistant after receiving its initial response.
Examples of furthering conversations are:
- Ask clarifying questions.
- Request corrections.
- Make further queries that build on the previous one.
You can ask up to 2 follow-up questions after each initial query. After this, the Wix AI Assistant starts over.
## See also
- [About AI assistants](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/about-ai-assistants.md)
- [Generate backend code using the Wix AI Assistant](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/generate-code-using-the-wix-ai-assistant.md)
- [About the AI Code Assistant in the Wix Studio Code panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-code-panel/about-the-ai-code-assistant.md), to generate frontend code for elements using prompts.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Generate Code Using the Wix AI Assistant
## Article: Generate Code Using the Wix AI Assistant
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/generate-code-using-the-wix-ai-assistant.md
## Article Content:
# Generate Code Using the Wix AI Assistant
Use the [Wix AI Assistant](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/about-the-wix-ai-assistant.md) to help you work on a site's code inside the [Wix IDE](https://support.wix.com/en/article/about-the-wix-ide).
1. To access the Wix AI Assistant, click the **Wix AI Assistant** 
icon in the Wix IDE sidebar or right click in the Wix IDE and select **Open the Wix AI Assistant**.
The **Wix AI Assistant** panel opens.
Tip: To get immediate code fix suggestions, highlight the code and right click Wix AI Assistant: Fix code.
The code assistant creates a code snippet that performs the requested task and explains how the code works.
4. You can add the proposed solution to the code by selecting:
- **Insert**: Inserts the code directly into the code file you are editing.
Note: If any code is highlighted in the Wix IDE, the inserted code replaces it. Otherwise, the code is inserted at the current cursor position.- **Copy**: Copies the code snippet to paste it manually into the Wix IDE. 5. You can continue your conversation with the assistant after receiving its initial response. You can ask up to 2 follow-up questions after each initial query. After this, the Wix AI Assistant starts over. 6. After your chat is complete, click home
at the top of the Wix AI Assistant panel to start over.
> **Note:** Make sure to test the code in [preview mode](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) before publishing the site.
## See also
- [About AI assistants](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/about-ai-assistants.md)
- [About the AI Assistant in the Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/about-the-wix-ai-assistant.md), to generate backend code using prompts.
- [Studio Editor: Using the AI Code Assistant to Add Custom Code](https://support.wix.com/en/article/studio-editor-using-the-ai-assistant-to-add-custom-code)
- [About the AI Code Assistant in the Wix Studio Code panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-code-panel/about-the-ai-code-assistant.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About the AI Code Assistant
## Article: Writing Event Handlers with the AI Code Assistant
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-code-panel/about-the-ai-code-assistant.md
## Article Content:
# About the AI Code Assistant in the Wix Studio Code Panel
The [AI Code Assistant in the Code panel](https://support.wix.com/en/article/studio-editor-using-the-ai-assistant-to-add-custom-code) of the Studio editor uses a series of prompts to generate custom [event handler](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-code-panel/write-event-handlers-with-the-ai-code-assistant-in-the-wix-studio-editor.md) code for elements on a site. The assistant also returns an explanation of the code it generates.
With the AI Code Assistant, you can :
- Disable a button for certain site visitors based on their location using browser locale and IP geolocation detection.
- Register a hover event that changes an element's color when the mouse pointer hovers over it.
## Supported IDEs
You can use the AI Code Assistant in the [Wix Studio Code panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md).
## Before you begin
Please note the following before using the AI Code Assistant in the Wix Studio Code panel:
- The assistant in the Code panel only supports simple use cases that can be implemented in frontend [page code](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md#page-code) files. It doesn't currently support use cases that require both frontend and backend code. To use an AI assistant for backend code, see [About the AI Assistant in the Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/about-the-wix-ai-assistant.md).
- The assistant doesn't support requests that require interactions with 3rd-party services, external APIs, or the use of npm packages.
- The assistant currently only supports requests in English.
## See also
- [About AI assistants](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/about-ai-assistants.md)
- [Write event handlers with the AI Code Assistant in the Wix Studio Code Panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-code-panel/write-event-handlers-with-the-ai-code-assistant-in-the-wix-studio-editor.md)
- [Studio Editor: Using the AI Code Assistant to Add Custom Code](https://support.wix.com/en/article/studio-editor-using-the-ai-assistant-to-add-custom-code)
- [About the AI Assistant in the Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/about-the-wix-ai-assistant.md), to generate backend code using prompts.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Write Event Handlers with the AI Code Assistant in the Wix Studio Editor
## Article: Write Event Handlers with the AI Assistant in the Wix Studio Editor
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-code-panel/write-event-handlers-with-the-ai-code-assistant-in-the-wix-studio-editor.md
## Article Content:
# Write Event Handlers with the AI Code Assistant in the Wix Studio Code Panel
> **Note:** This feature is only available to Wix Studio users.
Use the [AI Code Assistant](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-code-panel/about-the-ai-code-assistant.md) to write custom code behavior for elements on a site.
To write an event handler with the **AI Code Assistant**:
1. Start a chat with the AI Code Assistant:
+ **On the canvas:** Right-click the element you want to customize and select **Add Custom Behavior with AI**.
+ **Through the Code panel:** Access the Code panel on the left side of the editor and select **AI Code Assistant**.
2. Select one of the assistant's suggestions or describe what you want to customize.
The AI Code Assistant generates the code.
3. Select one of the following options:
+ **Show code** displays the generated code along with an explanation of the code. You can copy and paste this code into a site's [page code](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md#page-code), or ask the assistant to make adjustments.
+ **Add code** directly adds the code into a site's [page code](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md#page-code).
## See also
- [About AI assistants](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/about-ai-assistants.md)
- [About the AI Code Assistant in the Wix Studio Code Panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-code-panel/about-the-ai-code-assistant.md)
- [Studio Editor: Using the AI Code Assistant to Add Custom Code](https://support.wix.com/en/article/studio-editor-using-the-ai-assistant-to-add-custom-code)
- [About the AI Assistant in the Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/about-the-wix-ai-assistant.md), to generate backend code using prompts.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About n8n Integration
## Article: About n8n Integration
## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/integrations/about-n8n-integration.md
## Article Content:
# About n8n Integration
[n8n](https://n8n.io/) is a workflow automation platform that lets you connect apps and services to create automated workflows. With the Wix n8n integration, you can automate tasks involving your Wix site without writing code, connecting Wix to hundreds of other services available in the n8n ecosystem.
A key capability of n8n is its built-in AI agent. By combining Wix triggers with an AI agent, you can create workflows that analyze incoming data, determine appropriate actions, and execute them automatically.
Before getting started, [connect n8n to your Wix site](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/integrations/connect-n8n-to-your-wix-site.md).
## What you can do with the integration
The Wix n8n integration provides two types of nodes, both powered by [Wix APIs](https://dev.wix.com/docs/api-reference.md):
- Wix trigger node: Starts workflows automatically when an event occurs on your site. [Wix Automations](https://dev.wix.com/docs/api-reference/business-management/automations/triggers/about-triggers?apiView=SDK.md) powers the triggers and provides events across Wix business solutions, such as form submissions, new orders, booking confirmations, contact updates, and membership sign-ups.
- Wix node: Performs actions on your Wix site, such as managing products and orders in your Wix Store. You can create, update, delete, and query data as part of your n8n workflows.
When configuring a Wix node, you can specify parameter values manually, map them from the trigger output, or use an AI agent to generate them dynamically based on the workflow context.
To see the full list of available triggers and actions, browse the options in the Wix nodes' configuration panels in n8n.
Learn more about [n8n nodes](https://docs.n8n.io/workflows/components/nodes/).
**Important:** The Wix nodes are currently community nodes. Before you can use them, you must install the `@wix/n8n-nodes-wix` package. See the n8n guide on [installing community nodes](https://docs.n8n.io/integrations/community-nodes/installation/).## AI-powered workflows The built-in AI agent in n8n is a key advantage of using n8n with Wix. Instead of building complex conditional logic, you can use an AI agent to interpret trigger data and decide what actions to take. The agent can analyze incoming information, determine the appropriate response, and generate the parameters needed for any action in your workflow, whether that's a Wix node, an email service, a CRM, or any other n8n integration. For example, you can create a workflow that recovers abandoned checkouts. When a checkout is abandoned on your site, n8n triggers the workflow and an AI agent analyzes the details and generates the parameters for a discounted recovery order and a personalized email. The workflow then creates the order and sends the email to win back the customer. To expand the capabilities of your AI agent beyond the actions available in the Wix node, you can connect the [Wix MCP server](https://dev.wix.com/docs/api-reference/articles/wix-mcp/about-the-wix-mcp.md) as a tool. Connecting the Wix MCP gives your AI agent access to additional Wix APIs. ## Authentication To connect n8n to your Wix site, you need an [API key](https://dev.wix.com/docs/api-reference/articles/authentication/about-api-keys.md) and the site ID of the site you want to connect. These are added as credentials in n8n. To learn how to set up Wix authentication in n8n, see [Connect n8n to Your Wix Site](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/integrations/connect-n8n-to-your-wix-site.md). ## Use cases Here are some examples of what you can automate with the Wix n8n integration: - Abandoned checkout recovery: When a checkout is abandoned, an AI agent analyzes the details and generates parameters for a discounted recovery order and personalized email. The workflow then creates the order and sends the email. - Smart lead routing: When a form is submitted, an AI agent evaluates the submission and categorizes the lead. The workflow then routes the lead to the appropriate team member or CRM. - Automated content moderation: When a new blog comment or forum post is published, an AI agent analyzes the content and decides whether to approve, flag, or remove it. The workflow then performs the appropriate action. - Dynamic customer support: When a chat message is received, an AI agent analyzes the query, retrieves relevant order or booking information, and generates a response. The workflow then sends the response to the customer. - Cross-platform sync: When product data changes in your Wix Store, automatically update inventory in external systems like spreadsheets or software solutions like Enterprise Resource Planning (ERP). ## n8n marketplace You can search the [n8n workflows](https://n8n.io/workflows/) for workflow templates built by others that use Wix nodes. If you're a developer looking to extend the Wix n8n integration or create your own Wix-related nodes, you can build and publish them to the marketplace for other Wix users to benefit from. ## See also - [n8n Docs](https://docs.n8n.io/) - [Connect n8n to Your Wix Site](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/integrations/connect-n8n-to-your-wix-site.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Connect n8n to your Wix Site ## Article: Connect n8n to your Wix Site ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/integrations/connect-n8n-to-your-wix-site.md ## Article Content: # Connect n8n to Your Wix Site Connect your Wix site to n8n to automate workflows using Wix triggers and actions. For an overview of the Wix n8n integration and what you can do with it, see [About n8n Integration](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/integrations/about-n8n-integration.md). This guide walks you through creating API credentials and configuring n8n to work with your site. After completing this task, you can create workflows that react to events on your Wix site, perform Wix actions, connect to other n8n integrations, and use AI agents to power your automations.
**Important:** Wix n8n nodes are currently community nodes. Before you can use them, you must install the `@wix/n8n-nodes-wix` package. See the n8n guide on [installing community nodes](https://docs.n8n.io/integrations/community-nodes/installation/).## Step 1 | Create an API key in Wix Create an [API key](https://dev.wix.com/docs/api-reference/articles/authentication/about-api-keys.md) in your Wix account with the permissions needed for the triggers and actions you want to use. To create an API key: 1. Go to the [API Keys Manager](https://manage.wix.com/account/api-keys) in your Wix account. 2. Click **Create API Key**. 3. Enter a name for your API key, such as "n8n Integration". 4. Select the permissions for the APIs you want to access. The permissions you need depend on which triggers and actions you plan to use. For example: - For product operations, select **Wix Stores** permissions. - For order operations, select **Wix eCommerce** permissions. 5. Click **Create**. 6. Copy and securely store your API key. You can't view it again.
__Important:__ Store your API key securely and never expose it in frontend code.## Step 2 | Find your site ID Locate the ID of the Wix site you want to connect to n8n. To find your site ID: 1. Go to your [site's dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fhome). 2. Check the URL in your browser. The site ID appears after `/dashboard/` in the URL. For example, in `https://manage.wix.com/dashboard/12345678-1234-1234-1234-123456789012/home`, the site ID is `12345678-1234-1234-1234-123456789012`. Alternatively, you can use the [Query Sites](https://dev.wix.com/docs/api-reference/account-level/sites/sites/query-sites?apiView=SDK.md) API to retrieve all site IDs associated with your account. ## Step 3 | Configure Wix credentials in n8n Add your Wix API credentials to n8n to authenticate your workflows. To configure credentials: 1. In n8n, go to **Settings > Credentials**. 2. Click **Add Credential**. 3. Search for and select **Wix API**. 4. Enter your credentials: - **API Key**: Paste the API key you created in Step 1. - **Site ID**: Paste the site ID you found in Step 2. 5. Click **Save**. ## Step 4 | Test the connection Verify that your credentials are working by creating a simple workflow. To test the connection: 1. Create a new workflow in n8n. 2. Add a Wix node to the canvas. 3. When configuring the node, select your saved Wix API credentials. 4. Browse the available resources and operations to see what actions you can perform. 5. Select an operation and click **Test step** to execute it. If the connection is successful, you see results from your Wix site. ## See also - [About n8n Integration](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/integrations/about-n8n-integration.md) - [About API Keys](https://dev.wix.com/docs/rest/articles/authentication/about-api-keys.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Debugging Your Code ## Article: Testing and Troubleshooting Your Code ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md ## Article Content: # About Debugging Your Code There are several ways you can debug the code in your Wix site: - Debugging with the Developer Console - Debugging with functional testing in the backend - Debugging with your browser's developer tools - Debugging with Wix Logs ## Debugging with the Developer Console The Wix Developer Console is available at the bottom of the page when you are previewing your site. The console displays information that is useful when debugging, such as errors, warnings, and other messages. It also displays debug messages that you added to the code using any [console method](https://developer.mozilla.org/en-US/docs/Web/API/console). If you are new to debugging code, click [here](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) to learn how to log messages to the console. Each message displays the page where the relevant code can be found and a link to the specific line of code (in the editor) that triggered the message. ### Viewing the Developer Console To view the Developer Console, open your site in Preview mode. The Developer Console appears at the bottom of the page.  If the console is minimized, click the arrow  to expand it. ### Clearing messages from the console Click  on the console menu bar. ### Filtering console messages Click **Default View** on the console menu bar, and then choose which kinds of messages you want to see.  + **Verbose**: System log messages that can help you debug low-level code problems. + **Debug**: Messages you have logged to the console. + **Info**: Informational messages that require no action. + **Warning**: Messages about potential problems in your code. These are highlighted in yellow. + **Error**: Messages about actual errors in your code. These are highlighted in red. ## Debugging with functional testing in the backend Debugging code from the backend is challenging because you need to invest effort to trigger the code and test it. To save you time and effort, Wix Studio and Wix Editor enable [quick testing of backend functions](https://support.wix.com/en/article/velo-testing-your-backend-functions) directly from the code editor. The output you see in the test tab is the same as the output you would see in the Developer Console if you previewed your site and triggered the function. You can debug HTTP functions by adding `console.log()` calls to them. The information you log appears in the function output when using [functional testing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/test-backend-functions-with-functional-testing.md) (Wix Editor) and in your site's [Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md). ## Debugging with your browser's developer tools Wix allows you to [debug](https://developer.chrome.com/docs/devtools/javascript/) your site's code as you would any modern JavaScript web-based application, by using [developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools) to set breakpoints, log to the console, and more. These tools are not part of Wix - they come with your browser. If you are new to debugging, learn how to [log messages to the console](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md). You can open a copy of your site's frontend code files in the browser's developer tools. For detailed instructions, read [Locate and Open Frontend Source Files](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/locate-and-open-frontend-source-files.md) You can debug your fully-published site's code directly, or without publishing using Preview mode. Read more about [About Testing Your Code in Preview Mode](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-testing-your-code-in-preview-mode.md). ### Expected behaviors when debugging in Preview mode Consider the following expected behaviors when debugging certain features in Preview mode: - **Backend code** Because of security concerns, messages in backend code might not be logged to the browser's console on the published version of your site. - **HTTP functions** Because HTTP functions are not browser-based, there is no console to display your logs. You can use [Wix Logs](#debugging-with-wix-logs) to view console messages in backend code and HTTP functions on your site. ### Source maps When you debug your code in the browser it looks just like your original source code. In reality, the code you write is not the actual code that is run. The usage of source maps means that you don't need to worry about what's going on behind the scenes. But if you're curious to know, this is what's happening.
Read more about source maps
Wix supports writing code using the ES2017 standard. But until this standard is fully implemented in all browsers, your code is transpiled from ES2017 code to ES5. Your code is also minified, and source files are combined to make their delivery from the server more efficient. So the code that's actually being run on your site is transpiled, minified, and combined. You don't want to have to debug that generated code. You want to debug the code you wrote originally. That's where source maps come in. A source map is a file that maps the lines of code that the browser is actually running to the lines in your original source code. When you want to debug some code, the source map lets you find the code in the original version that you wrote, even though the debugger uses the source map to run the corresponding generated code. All this should happen without you having to do anything. If you’re having trouble, check your browser’s developer tools settings and make sure that source maps are enabled.
The output appears on the right.
__Tip:__ Name your versions so you can easily find the version to revert to later.This article explains why it is important to understand the implications of this restore. ## Supported IDEs You can revert the site to a previous version using: + The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor) + The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio) + Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md) (Wix Studio and Wix Editor) > **Note**: When working in a local IDE, you can connect your site to Github for more advanced version control. ## Restored elements When you revert to an older version of your site, the following elements are reverted to their previous states: - Pages - Code - Hooks - Routers - Schemas - Permissions ## Non-restored elements Keep in mind that data in both the Sandbox and Live databases don't revert to the previous state. This means that the data remain as in the current version and you can't recover deleted data by restoring a previous site. ## Schema changes after reverting When you restore to a previous version, the schema follows the version being restored. This means if you made changes in fields with the newer version, those changes might not exist in the older version's schema. You can add fields to the older version's schema as needed. The data is retained and becomes visible once the fields are added. ## See also - [Manage Site History](https://support.wix.com/en/article/managing-your-site-history-1079227) - [About Database Collections](https://support.wix.com/en/article/about-database-collections) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Working with the Monitoring Dashboard ## Article: Working with the Monitoring Dashboard ## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/monitoring-your-published-site/working-with-the-monitoring-dashboard.md ## Article Content: # Velo: Working with the Monitoring Dashboard The [Monitoring Dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2F/developer-tools/monitoring-dashboard) helps you analyze a site's performance for backend code and data operations, and track its CMS collections. Use it to improve site visitors' experience by monitoring request performance, identifying issues, and optimizing site code. The Monitoring Dashboard has the following tabs: - **Data requests**: Tracks calls to a site's CMS collections. - **Backend requests**: Tracks backend code performance and errors. - **CMS collection storage**: Tracks a site's current storage usage relative to its quotas.
__Tip:__ Check the dashboard regularly to catch issues early. Investigate unusual increases in requests or failures, and methods with high p95 durations.## Data requests The **Data requests** tab displays information about calls to a site's CMS collections. Every time you access your data, whether to read or write it, you make a data request. The **Data requests** tab includes the following sections: - **Overview**: Displays the number of successful and unsuccessful data requests, along with the error rate. When viewing the default 7-day period, the dashboard compares the error rate to the previous 7 days. - **All data requests**: Displays a graph of all requests made during the selected time period. Successful requests appear in blue and failed requests appear in red. - **Data requests by operation**: Breaks down request information by collection and operation type. Each row represents a unique pairing. The table includes the following columns: | Column | Description | | --- | --- | | Collection | The collection name. If the collection doesn't exist or multiple collections share the same name, the collection ID appears. | | Operation | The type of operation performed, such as **find**, **insert**, or **update**. | | Count | The number of times this operation ran on this collection during the time period. | | Error rate | The percentage of failed requests. | | Cache rate | The percentage of requests served from cache. | | Duration p50 | The median request duration in milliseconds. | | Duration p95 | The 95th percentile request duration in milliseconds, representing slower requests. | Click a row to navigate to a page with more details about requests for that specific collection and operation pairing. To minimize failed data requests: - Simplify complex queries. - [Add proper indexes to collections](https://support.wix.com/en/article/cms-adding-an-index-for-your-collection). - Use [efficient query patterns](https://dev.wix.com/docs/develop-websites/articles/best-practices/best-practices-for-improving-performance-in-wix-sites-with-data.md). - Implement caching for frequently accessed data. - Consider pagination for large result sets. ## Backend requests > **Note:** The **Backend Requests** tab is still under development. To minimize failed backend requests: **For timeout issues:** - Reduce the number of operations in your method. - Use caching to avoid repeated calculations. - Optimize database queries with proper filtering and sorting. **For RPM throttling:** - Implement request batching. - Add delays between rapid requests. - Consider upgrading your [premium plan](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/about-premium-plans.md) for higher limits. ## CMS collection storage Each Wix site can have a maximum of 1,000 collections and 10 million collection items, which can take up no more than 100 GB of storage space. The **CMS collection storage** tab lets you know how close a site is to these quotas, and lists CMS collections that Wix users created on the site. These don't count toward the storage space quota: - External database collections. - Wix app collections. - Media files stored separately on a site. - Referenced documents and multimedia. ## See also - [About Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) - [Data features](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/data-features.md) - [Compute features](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md) - [About caching](https://dev.wix.com/docs/develop-websites/articles/best-practices/caching/about-caching.md) - [Best practices for building a site](https://dev.wix.com/docs/develop-websites/articles/best-practices/best-practices-for-building-a-site-with-velo.md) - [Best practices for improving site performance](https://dev.wix.com/docs/develop-websites/articles/best-practices/best-practices-for-improving-performance-in-wix-sites-with-data.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Where Do I Put My Code? ## Article: Where Do I Put My Code? ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/where-do-i-put-my-code.md ## Article Content: # About Code Placement When developing websites, it’s important to understand where to place your code so it runs in the right context, whether that’s in the browser, on the server, or across all pages. This article gives an overview of the different types of code files available, and explains when and how to use each one. ## Supported IDEs You can store your code using the following IDEs: - The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor) - The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) - Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) ## Frontend code Frontend code runs in the site visitor’s browser and here you define the interactive parts of your site. This includes things like: - Responding to user input - Updating the UI - Making calls to backend services Since this code is exposed to the public, avoid including sensitive information, such as API keys or private logic. Use frontend code for: - Customizing how a page looks or behaves - Listening for events like button clicks or form submissions - Calling functions defined in backend web modules (`.web.js`) ### Running code on all pages with Global code Global code is code that runs on every page of your site. This is logic that's shared across all pages, such as managing a universal header or footer, or controlling global UI elements like a site-wide search bar or shopping cart icon. To add global code, edit the `masterPage.js` file. You'll find it in: - Wix Studio: The **Page Code** section of the **Code** panel - Wix Editor: The **Page Code** section of the **Code** sidebar - Local IDE: The `src/pages` folder when using [Git integration](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli/.md)
**Important:** `masterPage.js` has its own `onReady` event handler. Be careful not to duplicate logic from individual page `onReady` handlers, as both run in parallel.#### Retaining an element's state You can also use global code to retain an element’s state across pages. For example, if you change the source of an image element that appears on all pages, that change won’t persist when navigating to another page, or even when returning to the original page. To make changes persistent across pages, use the [`wix-storage-frontend`](https://www.wix.com/velo/reference/wix-storage) API: 1. In the relevant event handler, call [`setItem`](https://www.wix.com/velo/reference/wix-storage/storage/setitem) to store a value that reflects the element’s new state. 1. In the `masterPage.js` `onReady` function, read the stored value and update the element accordingly. > **Note:** Avoid importing functions from `masterPage.js` into individual page files. Doing this causes the `onReady` function in `masterPage.js` to run twice on those pages. For shared logic, create code on a separate public file and import it where needed. ### Running code on a specific page Each page on your site has its own code file. Use these files to add functionality that's specific to that page, for example: - Handling user input - Customizing UI behavior - Calling backend functions. #### Public files If you find yourself repeating the same code across multiple page files, it's better to move shared logic to a separate **public** file. That way, you can write it once and import it wherever it's needed: Whether in a page file, a backend file, or another public file. To share a function across multiple files: 1. Create a public file and export the function from it. 1. Import the function into any page where it’s needed. You can find your public files in: - Wix Studio: The **Backend & Public** section of the **Code** panel - Wix Editor: The **Backend & Public** section of the **Code** sidebar - Local IDE: The `src/public` folder when using [Git integration](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli/.md) Use ES module syntax (`import`/`export`) to access functions between files. Always include the function name in curly braces when importing a named export: ```js import { myFunction } from 'backend/bookings.js' ``` Leaving out the curly braces attempts to import a default export: ```js import myFunction from 'backend/bookings.js' ``` Unless `myFunction` was explicitly exported as the default, this will throw a runtime error: ```js (0 , \_bookings.default) is not a function ``` To access all functions from a module, import the entire module without curly braces: ```js import wixData from 'wix-data'; import wixStoresFrontend from 'wix-stores-frontend'; import wixMembers from 'wix-members-backend'; ```
**Tip:** Your page code, which is also publicly accessible, doesn't appear in the list of public files. To see your page code, go to the **Page Code** section and click on the page in the menu.### Responding to element actions with event handlers Page elements like buttons, text, and input fields can trigger events when site visitors interact with them. The functions that handle these events are called event handlers. There are following types of event handlers: - Dynamic event handlers. Learn how to add an event handler in [Add an Event Handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/add-an-event-handler.md). - Static event handlers (deprecated). Learn more about static event handlers in [About Static Event Handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-static-event-handlers.md). ### HTML Adding raw HTML directly in the code editor isn't supported. That said, there are several ways to include or work with HTML on your site: - Add marketing code using [marketing integrations](https://support.wix.com/en/marketing-tools/marketing-integrations-tracking). - Set the [HTML property](https://www.wix.com/velo/reference/$w/text/html) of a text element to render HTML content. - Display external HTML content by [embedding a site element](https://support.wix.com/en/article/wix-editor-using-iframes-to-display-visible-content-on-your-site). - Insert [custom code snippets](https://support.wix.com/en/article/embedding-custom-code-to-your-site) into the head or body of your site pages. - Use [custom elements](https://support.wix.com/en/article/wix-editor-adding-a-custom-element-to-your-site) to define and embed your own HTML-based components. ## Backend code Backend code runs on Wix’s secure servers and isn’t exposed to site visitors. This is the place for logic that needs to be protected, like: - Interacting with sensitive data - Sending emails - Handling payments - Verifying permissions Use backend code for: - Perform secure database operations - Respond to frontend requests by using web modules - Handle server-side events and scheduled tasks - Expose custom HTTP methods to other services ### Backend files Backend files are where you define server-side logic. They include code that runs securely on the web server rather than in the browser. This is where you define functions from backend libraries such as `wix-pay-backend`, `wix-members.v2`, or `wix-events.v2`. You can find your backend files in: - Wix Studio: The **Backend & Public** section of the **Code** panel - Wix Editor: The **Backend & Public** section of the **Code** sidebar - Local IDE: The `src/backend` folder when using [Git Integration](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli/.md) There are 2 main file types used in the backend: - **.web.js:** Web modules that can be called from the frontend. You can configure permissions for each function to control who can access them. Learn more about the .web.js files in [About Web Modules](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md). - **.js:** Internal backend files that can't be accessed directly from the frontend. Use these for secure server-side logic. > **Note:** You may also see `.jsw` files in older projects. These have been deprecated in favor of `.web.js` files but are still supported. Learn more about the .jsw files in [Call Backend Code from a jsw Web Module](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-a-jsw-web-module.md). #### Accessing functions from a .js file To access functions from a `.js` file in the frontend, import the function into a `.web.js` file first, then import that `.web.js` function into your frontend code. Import the `.js` file into the `.web.js` file: ```js import { Permissions, webMethod } from 'wix-web-module'; import { deleteStaffMember } from 'backend/bookings' export const deleteStaff = webMethod( Permissions.Anyone, async (staffMemberid) => { return await deleteStaffMember(staffMemberid); } ); ``` Import the `.web.js` file in your page file: ```js import { deleteStaff } from 'backend/staff.web' ``` If you try to import a `.js` file directly into a frontend file, you'll see this error: ``` Access to backend script 'backend/calculations.js' denied! Client-side scripts can only import web-modules from backend code context. ``` ### Backend events Many Wix modules provide built-in events that trigger when specific actions occur. For example, uploading a file to the Media Manager triggers the `onFileUploaded` event, and successfully paying an invoice triggers the `onInvoicePaid` event. These events let you run custom logic in response to key moments in your site’s workflow. To run an event, you need to add an `events.js` file. Learn more about adding backend events in [About Backend Events](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md). ### Handling HTTP requests To expose your site’s functionality to the outside world, like enabling `GET`, `PUT`, `POST`, or `DELETE` requests from external services, you can define custom HTTP methods. To create an HTTP function, you need to add an `http-functions.js` file. Learn more about the HTTP functions in [About Custom Site APIs](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/exposing-services/about-custom-site-apis.md). ### Using data hooks when data collection changes Data hooks let you run code before or after changes are made to your site’s data collections. They’re useful for validating, modifying, or responding to data operations like insert, update, or remove. To create data hooks, add a `data.js` file to your backend code. You can then define functions that correspond to specific data operations on your collections. Learn more about data hooks in [Using Data Hooks](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/hooks/using-data-hooks.md). ### Routers By default, Wix uses built-in routers to handle dynamic page URLs and SEO. If you need more control over how incoming requests are handled, you can create your own custom router to define the logic, routing, and data for each request. The code for both routers and data binding router hooks is defined in the `routers.js` file. Learn more about routers in [About Routers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md). ## Secrets Manager For sensitive information like API keys, OAuth tokens, or configuration settings, use the [Secrets Manager](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md) instead of hardcoding values into your code. Secrets are stored securely in your [site's dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2F/developer-tools/secrets-manager) and can be retrieved in code using the [Secrets API](https://dev.wix.com/docs/velo/apis/wix-secrets-backend-v2/introduction.md). Storing secrets in the Secrets Manager improves your site's security, especially when you're collaborating with others or using version control. Each secret has a unique name, and you can access it safely in backend code without exposing it to site visitors. ## See also - [About Event Handlers in Wix](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) - [About the Site Backend](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/about-the-site-backend.md) - [Secrets Manager](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Velo Glossary ## Article: Velo Glossary ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md ## Article Content: # Velo Glossary [Let us know](mailto:velo.docs@wix.com?subject=Glossary%20feedback) if we missed any terms you would find helpful.
__Tip:__ See the full [Velo API reference](https://www.wix.com/velo/reference/api-overview) to start coding on your Wix site.## $w $w is the [syntax](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md#velo-syntax-and-autocomplete), or set of rules, that you use in your code to select an element on your page. To select an element, type $w in the [code editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio), or the [code editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) (Wix Editor), then enclose the name of the element in parentheses and quotes, and add a hashtag before the element name. For example, $w('#myButton'). Once you select an element, you can use the [APIs](https://support.wix.com/en/article/velo-glossary#api) to work with its properties and functions in your code. ## API [Velo APIs](https://dev.wix.com/docs/velo/articles/api-overview/introduction.md) are sets of properties and functions that let you use code to control your site's functionality. There are [APIs](https://www.wix.com/velo/reference/api-overview/introduction) that let you interact with page elements, your site’s database content, and external services. The APIs also give you access to information about your site and its visitors. ## Backend The Backend section is located in the Public & Backend section of the Code sidebar (Wix Studio), or the Code sidebar (Wix Editor). This is where you add code that you want to run server-side. Backend files and code are not publicly accessible from your site. You may want some of your code to run server-side and not in the front-end; for example, your site might be exposed to security risks if the code runs in the front-end. You can call server-side code from your front-end code using [web modules](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md), and even test your backend code in the editor using [Functional testing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/about-functional-testing.md). ## Blocks [Wix Blocks](https://support.wix.com/en/article/creating-a-velo-package-3964385) allows you to build your own [Velo packages](https://support.wix.com/en/article/velo-about-packages#velo-packages), and reuse your code across multiple Wix sites. ## Calculated fields When you create a dynamic page, Velo calculates what the URL would be for any items that could appear on that page. The [prefix](https://support.wix.com/en/article/url-prefixes-and-page-grouping) and dynamic sections of that URL are added to each item in your collection as a [calculated field](https://support.wix.com/en/article/about-calculated-fields). The dynamic page you create can display any item whose calculated field is the same as the [prefix and dynamic sections](https://support.wix.com/en/article/cms-about-dynamic-pages) you define when you create the page. ## Code packages [Code packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-packages.md) are pre-written code, also known as code libraries that you can add to your site(s). Using code packages is a great way to minimize your development time and the amount of code you need to write. There are 2 types of code packages: [Velo Packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md) and [npm Packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md). You can add these packages in the Code Packages section of the Code sidebar. You can also create your own Velo Package using Wix [Blocks](https://support.wix.com/en/article/creating-a-velo-package-3964385). ## Code editor You edit the code for your site in the [code editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio), or in the [code editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) (Wix Editor), located at the bottom of the editor. The code editor displays your site's code files in tabs. When you use the Properties and Events panel to add an event to your element, the code for that event is automatically placed in the tab for that page's code. If you have code that relates to a specific page only, you would add it here. When an element appears on all your site pages and you want to add functionality to it that will be consistent across your site, add that code in the **masterPage.js** file in the Page Code section of the Code sidebar (Wix Studio), or the Code sidebar (Wix Editor). When you use the Properties panel to add an event to your element that appears on all pages, the code for that event is automatically placed there. If you have code that relates to all the pages of your site, add it here. ## Connect to data panel To work with [connecting to data](https://support.wix.com/en/article/connecting-page-elements-to-data), you need to connect elements on your page to a [dataset](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) using the Connect to Data panel. To open the panel, click the Connect to Data icon  for your element. ## Connecting to data [Connecting to Data](https://support.wix.com/en/article/connecting-page-elements-to-data) is the process of connecting your elements to a [collection](#database-collection). You can bind your elements to a collection to display content or to capture user input. To bind your elements to a collection you need to have a [dataset](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) on your page. ## CMS The Content Management System (CMS) is where you edit the contents of your [database collections](https://support.wix.com/en/article/managing-your-content-collections). There is a CMS in the Editor for your [Sandbox Database](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) and in the [Wix Database app](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) for your Live Database. Sandbox and Live [are not always enabled](https://support.wix.com/en/article/about-sandbox-and-live-collections-and-syncing) in the CMS. ## Database A database is made up of one or more [collections](#database-collection). You can add as many collections as you need to your database to manage your site's content. Your site has two databases that are separate but related to each other. One database is your site's [Sandbox database](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md), and the other is your site's [Live database](#live-database). The Sandbox database is where you work while developing your site. The Live database is what your visitors interact with when your site is published. You add a collection to your database in the Editor, and when you publish your site its live version is added to the Live database. You view the Live database in the [Wix Database App](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md). Sandbox and Live are not always enabled for your collections. Learn more [here](https://support.wix.com/en/article/about-sandbox-and-live-collections-and-syncing). ## Database collection A [database collection](https://support.wix.com/en/article/about-database-collections) is a table of data that you can use in a Wix site. Each row in the table represents an [item](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) in the collection. Each column in the table is a [field](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) in your collection, which can be of a specific data type. You can connect elements in your site to fields in your collection using [connecting to data](https://support.wix.com/en/article/connecting-page-elements-to-data). ## Dataset A [dataset](https://support.wix.com/en/article/about-datasets-6368396) is a component that you add to your page that enables you to connect the elements on your page to your [collections](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md). A dataset controls which collection is available for your elements to use, whether your elements can display, add to, or modify the items in your collection, as well as how the data is sorted or filtered. You can use a dataset on a regular page as well as a dynamic page. Datasets are not displayed in your published site. ## Dataset mode The [dataset mode](https://support.wix.com/en/article/working-with-dataset-modes-and-collection-permissions) is a setting that controls what the elements that are connected to your collection can do with the collection's data. Options are Read & Write, Read-only, and Write-only. ## Dynamic item page A [dynamic item page](https://support.wix.com/en/article/cms-setting-up-a-dynamic-item-page) is a [dynamic page](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) that is used to display one item from your [collection](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) at a time. When you create the [URL](https://support.wix.com/en/article/cms-creating-unique-dynamic-page-urls) for a dynamic item page, you need to use a field in your collection that uniquely identifies each item in your collection. ## Dynamic list page A [dynamic list page](https://support.wix.com/en/article/cms-setting-up-a-dynamic-list-page) is a [dynamic page](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) that is used to display a number of items from your [collection](#database-collection) that all match the same criteria. When you create the [URL](https://support.wix.com/en/article/cms-creating-unique-dynamic-page-urls) for a dynamic list page, you need to use fields in your collection that identify a group of items in your collection. ## Dynamic page A [dynamic page](https://support.wix.com/en/article/cms-about-dynamic-pages) is a page you design with one layout that can be used over and over again, each time displaying a different item or items from your database collection. The actual content a dynamic page displays is determined by its [URL](https://support.wix.com/en/article/cms-creating-unique-dynamic-page-urls). There are two types of dynamic pages, [dynamic item pages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) and [dynamic list pages](#dynamic-list-page). ## Dynamic page dataset A [dynamic page dataset](https://support.wix.com/en/article/about-data-binding-and-datasets#about-dynamic-page-datasets) is a component that is added to your page automatically when you create a dynamic page. Like a regular [dataset](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md), it enables you to connect the elements on your page to your collections. It also allows you to add more filters and to sort the content on your page. ## Element ID The element ID is the name assigned to an element in your site. When you hover over or select an element in the Wix Editor, you can see the element’s ID following the hashtag. Velo assigns a default ID to every element you add to your site. You can change the ID in the [Properties panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md). The ID is used to identify the element in your code. For example, to work with an element named myButton, you would write $w(“#myButton”) in your code. ## Event An [event](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) is something that can happen to an element, usually as the result of a user action. For example, onClick is the event that occurs when a user clicks an element. If you want your site to do something, or react, when an event occurs to your element, you add an [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) to your element. ## Event handler An [event handler](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) is the function that holds the code you want to run when an [event](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) occurs to an element. Your site watches elements to see if events happen to them. If an event happens that has an event handler, the code in the event handler function will run. ## Field A [field](https://support.wix.com/en/article/about-database-collections#regular-fields) is the place in your [collection](#database-collection) where you store data, and is represented as a column in the CMS. Every item in your collection is made up of one or more fields that can be of type Text, Image, Boolean, Number, Date and Time, or Rich Text. Collections also have default [system fields](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) that are hidden by default. ## Field ID A [field ID](https://support.wix.com/en/article/cms-formerly-content-manager-about-your-collection-fields#field-id-velo-by-wix-only) is the name that you use to refer a field in a collection, in code. When you add a new field in the CMS, you can specify the field ID. If you don't specify your own field ID, one is created based on the Field Name. You cannot change the field ID once the field has been created. ## Field name The [Field Name](https://support.wix.com/en/article/about-database-collections#field-name) is the label you see at the top of the column for that field in the CMS. The Field Name is also used when connecting page elements to a dataset in the Editor. When you add a new field in the CMS, you specify the Field Name. You can change the Field Name after the field has been created, and all connections to that field will be updated. ## Field type The [Field Type](https://support.wix.com/en/article/about-database-collections#field-type) defines what kinds of data the field contains. The field type can be Text, Image, Boolean, Number, Date and Time, Rich Text, URL, or Document. When you add a new field in the CMS, you specify the field type. The field type is used when connecting page elements to fields in your collections. ## Functional testing With [functional testing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/test-backend-functions-with-functional-testing.md), you can easily and quickly [test and debug your backend code directly in the Velo code editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/test-backend-functions-with-functional-testing.md). Functional Testing saves you the time and effort of building your own system for triggering and testing your backend functions. ## Hook A hook is code that runs before or after certain interactions with your site. [Data hooks](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/hooks/about-data-hooks.md) run code before or after certain interactions with your site's collections. [Data binding router hooks](https://support.wix.com/en/article/about-data-binding-router-hooks) allow you to intercept the process of a dynamic page's data getting bound to the page. Some data binding router hooks can be used with [router pages](https://support.wix.com/en/article/custom-routers) as well. ## HTTP Endpoint The URL where a web service can be accessed by an application. In Velo, web services built on HTTP endpoints are used to connect [logging tools](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) and [external database collections](https://dev.wix.com/docs/develop-websites/articles/databases/external-databases/overview/adding-and-deleting-an-external-database-collection.md) to Wix sites. ## HTTP Functions [HTTP functions](https://support.wix.com/en/article/about-compute-functions) let you create functions to expose the functionality of your site as a service. That means other people can use the functionality of your site by writing code that calls your site's API as defined by Velo Functions you create. ## Interaction An interaction is custom functionality you add that allows your site to respond to [events](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) that occur in your site. ## Item An [item](https://support.wix.com/en/article/about-your-database-collection-fields) is one record in a [collection](#database-collection) and is represented as a row in the CMS. Every item in your collection is made up of one or more [fields](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md). ## Live database The [Live database](https://support.wix.com/en/article/managing-your-sandbox-and-live-data#live-data) is the database that is associated with your published site. The data in the Live database is what is visible on your published site when you display data. It is also the database where data you collect in your live site is stored. You can [sync](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) between databases and copy data from the Sandbox to your Live database, or overwrite your Live data to your Sandbox to work with it in the Editor. Sandbox and Live are not always enabled for your collections. Learn more [here](https://support.wix.com/en/article/about-sandbox-and-live-collections-and-syncing). ## Log Collection of [log entries](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) associated with the same Wix site and namespace. Each log has a [labels](https://www.wix.com/velo/reference/spis/site-monitoring/logentry/labels) section, which indicates the log’s site URL and namespace. ## Log Entry [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) displays logs as a single [log entry](https://www.wix.com/velo/reference/spis/site-monitoring/logentry) in JSON format. You can [view log entries](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-wix-logs.md) in real time as they’re recorded, or [connect them](https://support.wix.com/en/article/connecting-site-events-to-a-monitoring-tool) to an external monitoring tool for analysis. ## Logs [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) lets you gather information about logs, HTTP functions, and web module functions. You can [view](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-wix-logs.md) logs in real time, or [connect](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/view-logs-using-an-external-monitoring-tool.md) logs to an external monitoring tool to generate event metrics and perform error log analysis. Each log is represented by a [JSON object](https://www.wix.com/velo/reference/spis/site-monitoring/logentry). ## Monitoring Dashboard Velo's built-in [Monitoring Dashboard](https://support.wix.com/en/article/velo-working-with-the-monitoring-dashboard) is a tool for monitoring site performance. You can access the Monitoring Dashboard in the Developer Tools section of the Code sidebar. It’s important to track your code’s performance on sites containing backend code and [Wix Data](https://www.wix.com/velo/reference/wix-data) API requests. You can also use [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) to monitor the site’s performance. ## onReady When a page loads in a browser, it's possible for the code on the page to run before the page finishes loading. This can cause an error if your code tries to reference an element in the page before it's loaded. Because of this, you need to make sure that all the elements on your page have loaded before you try to access them using code. You do this is by including all your code that uses the [$w selector](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) in the function that is added by default to the top of every page's code: ```javascript $w.onReady(function() { // Put all your $w code here }); ``` ## Payload Payload refers to the actual data sent in a message. In [Wix Logs](https://www.wix.com/velo/reference/spis/site-monitoring/logentry), the [JSON payload](https://www.wix.com/velo/reference/spis/site-monitoring/logentry/jsonpayload) is the message included in the site activity’s [log](https://www.wix.com/velo/reference/spis/site-monitoring/logentry), such as an error message or console log. ## Permissions [Permissions](https://support.wix.com/en/article/about-database-collection-permissions) give you control over which visitors are allowed to interact with the data in your collections and what they are allowed to do. The available permissions are create, read, update, and delete. You can assign different permissions to different [roles](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md). ## Primary field A collection's Primary field is used to enable another collection to connect to it and [reference](https://support.wix.com/en/article/cms-using-reference-fields-to-display-content-from-multiple-collections) its data. Every database collection has a Primary field. The Primary field is indicated by the lock icon next to its field name. By default, the Title field is the Primary field. However, you can define any text field in the collection as the Primary field. ## Promise A JavaScript function that returns a promise is returning a contract to eventually produce a return value when an [asynchronous operation](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous) is completed. A Promise is said to be fulfilled or resolved when its value is finally known. There are two main ways to [work with promises](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/working-with-promises.md) that are returned from a function: * **then( )** - Allows you more control, but is a bit more complicated. * **async/await** - Allows you to work with asynchronous code as if it were synchronous. ## Properties panel The [Properties panel](https://support.wix.com/en/article/working-with-the-properties-panel-6441151) lets you work with Velo on the elements in your site. You can use the Properties panel to add [event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) to your elements and define their default behavior when your page loads. ## Public/front-end The Public section of the [Code sidebar](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/about-coding-with-wix-studio.md#built-in-code-panel) Code Files section contains files that are publicly accessible from your site. The code you add here runs in the front-end, or client. ## Query A query is a request for information from a database collection. For example, you might want to retrieve a list of all of the site members in your Members collection who live in a specific country. You can query your collections using the [wix-data query](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/data-api/working-with-the-data-api.md) function. ## Regular editor The remote Wix Editor you use to edit and preview your site's UI and code. ## Release manager In the [Release Manager](https://support.wix.com/en/article/accessing-the-release-manager) you can see the current published version of your site and the current [test site](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md). You can also create, edit, and delete test site versions. ## Remote repository This is where all your site revisions are stored online. When you perform a save in the Editor, a new site revision is added to your [Site History](https://support.wix.com/en/article/viewing-and-managing-your-site-history) in the remote repository. ## Repeaters Repeaters allow you to create one layout for a group of elements. The repeater then uses that layout for each Repeater Item it displays. Each Repeater Item uses the same layout but displays different content. You can use Repeaters to display static content, meaning you set the elements' content for each Repeater Item in the Editor and it doesn't change. You can also connect Repeaters to the [data in a collection](https://support.wix.com/en/article/displaying-database-content-in-a-repeater). Each Repeater Item then uses the same element layout to display different content in your collection, based on how you connect your elements. ## Revision Every time you manually save or publish your site following a change, a new revision of your site is created. You can view and manage your revisions in your [Site History](https://support.wix.com/en/article/viewing-and-managing-your-site-history). You can also create a [test site](https://support.wix.com/en/article/creating-a-test-site) or [monitor Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md) for a specific revision of your site. ## Roles Together with [permissions](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md), [roles](https://support.wix.com/en/article/about-database-collection-permissions#roles) give you control over which visitors are allowed to interact with the data in your collections and what they are allowed to do. Every person that visits your site falls into one of four roles, and you can assign specific permissions to each role. Possible roles are admin, site member author, site member, and anyone. ## Router A [router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) lets you customize exactly how your site handles incoming requests. You can customize what happens when your site receives a request to display a page. You can also control the information that search engines use to index the pages in your site. ## Sandbox database The [Sandbox database](https://support.wix.com/en/article/managing-your-sandbox-and-live-data#sandbox-data-1) is the database that is associated with your site in the Wix Editor. Data in the Sandbox is not visible on your published site unless you [sync](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) your collection with your [Live database](#live-database). Data in the Sandbox is affected by your actions in Preview mode. Sandbox and Live are not always enabled for your collections. Learn more [here](https://support.wix.com/en/article/about-sandbox-and-live-collections-and-syncing). ## Schema/structure A [database schema](https://support.wix.com/en/article/about-database-collection-schemas) is the definition of a database's structure. In Velo, the schema defines which fields are in each of your collections and their [type](https://support.wix.com/en/article/about-database-collections#field-type). However, in some cases, your collections can contain fields that are not part of the schema. When you create a new field in the CMS in the [Sandbox database](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md), the field is added to the schema. The schema is synced from your Sandbox collections to your Live collections when you publish your site. [Syncing](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) a collection's data will not sync the collection's schema. ## Scope A scope defines which elements you can select with a selector function, such as [$w( )](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md), and how those elements behave when they are selected. Depending on which context you received a selector function from, it will either select from the [global scope](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/repeaters/understanding-the-scope-of-selector-functions.md) or the [repeated item scope](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/repeaters/understanding-the-scope-of-selector-functions.md). ## Service plugin Velo [service plugins (formerly SPIs)](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/about-service-plugins.md) allow you to extend and customize your site’s functionality. You can use [service plugins](https://www.wix.com/velo/reference/spis/getting-started) to inject your own custom logic into a part of an existing app’s flow. You can also use service plugins to integrate with 3rd-party services so that your Wix site and the external services can communicate seamlessly. ## Sidebar The [Code sidebar](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-editor-working-with-the-code-sidebar.md) in Wix Editor, or [Code sidebar](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/about-coding-with-wix-studio.md#built-in-code-panel) in Wix Studio, shows all of the files that make up your site, including pages, popups, files, routers, and database collections. Working in the sidebar, you can perform a variety of actions that affect your site. ## Submit button A [Submit button](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/user-input/processing-user-input-before-it-is-stored-in-a-collection-with-data-hooks.md) is a button that you add to a page with User Input elements that enable visitors to submit data they have entered, to your collection. You create a Submit button by adding a regular button to your page and setting its **Link connects to** action to **Submit** in the [Connect Button](https://support.wix.com/en/article/working-with-the-connect-button-panel) panel. ## Sync (copy/overwrite) [Sync](https://support.wix.com/en/article/cms-accessing-and-syncing-your-sandbox-and-live-collections) allows you to move your data between your [Sandbox](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) and [Live](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) databases. You can copy selected or all items in a collection from a Sandbox collection to the live version of that collection. You can also overwrite a Sandbox collection with all the data from the live version, or overwrite all your Sandbox collections with the data from their live versions. You can only initiate sync operations from the Sandbox database. Sandbox and Live are not always enabled for your collections. Learn more [here](https://support.wix.com/en/article/about-sandbox-and-live-collections-and-syncing). ## System fields [System fields](https://support.wix.com/en/article/about-database-collections#system-fields) are fields that are added automatically to each collection, are hidden by default, and cannot be edited. System fields are ID, Date Created, Last Updated, and Owner. ## Test site A [test site](https://support.wix.com/en/article/about-test-sites) is a version of your site that you may release to a percentage of your site visitors so that you can test that it's working before publishing. You can manage your test sites from the [Release Manager](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md). ## User input elements [User Input elements](https://support.wix.com/en/article/working-with-user-input-elements-2499809) allow you to capture and store user data in a [database collection](#database-collection). To use User Input elements, you need to connect them to a [dataset](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) whose [mode](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) is set to either Write-only or Read & Write. ## Validating Validating is the process of ensuring that data that visitors enter into a [user input element](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/velo-glossary.md) matches your criteria for that data and what you expect them to enter. You can validate user input with the [Settings panel](https://support.wix.com/en/article/validating-user-input-with-the-settings-panel) or with [code](https://support.wix.com/en/article/validating-user-input-with-code). ## Wix database app The Wix Database app is in the My Account section of your site. This is where you manage your [Live database](#live-database) collections. ## Web modules [Web modules](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-the-frontend.md) enable you to write functions that run server-side in the backend, and easily call them in your client-side code. With web modules you can import functions from backend into files or scripts in public, knowing they will run server-side. Velo handles all the client-server communication required to enable this access. --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Coding with Wix Studio ## Article: About Coding with Wix Studio ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/about-coding-with-wix-studio.md ## Article Content: # About Coding with Wix Studio > **Note:** Some of the features listed below are not yet available to all users. When you code with [Wix Studio](https://support.wix.com/en/article/about-wix-studio), you are working in an open development platform that accelerates the way you build web applications. You use [APIs](https://www.wix.com/velo/reference/spis/getting-started) to add custom functionality and interactions. You can code directly in Wix Studio's built-in [Code panel](https://support.wix.com/en/article/wix-studio-working-with-the-code-panel), in the [Wix IDE](https://support.wix.com/en/article/about-the-wix-ide) (Wix's VS Code-based IDE), or with your own IDE and [integrating with GitHub](https://support.wix.com/en/article/velo-about-git-integration-wix-cli). Regardless of how you choose to code, you can enjoy serverless coding, all in an open, extendable platform. ## Coding features and functionality This section highlights key features and functionality for coding with Wix Studio's open platform. * **Coding on our open platform.** First, familiarize yourself with [our platform](https://support.wix.com/en/article/about-velo-by-wix). * **Different environments for coding.** Wix studio offers different [options for coding](https://support.wix.com/en/article/about-coding-with-wix-studio#ways-to-code-with-wix-studio). You decide which option works based on what you need to do. * **CSS styling**. Add and customize styling for the site using [CSS](https://support.wix.com/en/article/studio-editor-about-css-editing) that was developed outside of the Wix Studio ecosystem. * **Concurrent editing**. This feature helps you [collaborate efficiently](https://support.wix.com/en/article/studio-editor-collaborating-on-a-site) by allowing you and your teammates to work simultaneously on the same site. * **AI assistance**. The [Wix AI Assistant](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/ai-assistants/ai-assistant-in-the-wix-ide/about-the-wix-ai-assistant.md) helps you use artificial intelligence to get your code up and running quickly and efficiently. The assistant can help write, and even fix, your code. Receive responses in real time, including code snippets, to help you with your coding tasks. * **Service plugins**. You can integrate with service providers to further expand your site's functionality by replacing and extending existing app flows and/or by integrating external services with your site using [service plugins](https://support.wix.com/en/article/velo-custom-app-extensions-using-spis). * **Headless sites and projects**. Design an independent site or project that takes advantage of Wix Studio's powerful infrastructure, tools, and capabilities in a [headless](https://dev.wix.com/docs/go-headless.md) environment. * **Databases**. Connect your site to [external database collections](https://support.wix.com/en/article/velo-integrating-external-databases-with-your-wix-site) in addition to the built-in [Wix Content Management System (CMS)](https://support.wix.com/en/article/cms-formerly-content-manager-an-overview). * **Functional Testing**. The [Functional Testing](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/functional-testing/about-functional-testing.md) tool allows you to test backend code without having to trigger it from the frontend. You can define custom parameters to use in testing backend functions. * **Packages**. This feature lets you choose a [package](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-packages.md) with the functionality you want and add it to your site(s). You can install [npm packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md) and [packages built by Wix](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md). * **Blocks**. You can [add code](https://support.wix.com/en/article/wix-blocks-about-coding-in-blocks) to your Wix Blocks widgets and apps. Because of this integration, [Blocks apps](https://support.wix.com/en/article/blocks-unboxed-a-quick-tour) can be anything from simple widget layouts to full-fledged interactive web components, complete with APIs and code files. * **Custom Apps**. You can create [custom apps](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-custom-apps.md) using Blocks, and add them to your site. This provides you with the ability to write code with specific functionality and use it across multiple sites. * **Developer tools**. A set of [developer tools](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) is available to help you monitor, test, and debug the code on your site(s). * **Test sites**. As you develop your site's functionality, you may want to test a version of your site on a percentage of your visitors. * **And here are some open-platform features for Wix Studio coders**: * [Fetch](https://support.wix.com/en/article/velo-accessing-3rd-party-services-with-the-fetch-api) for calling external APIs. * [HTTP functions](https://support.wix.com/en/article/velo-exposing-a-site-api-with-http-functions) for exposing your site's functionality as an API. * [Routers](https://support.wix.com/en/article/wix-studio-creating-a-router) for handling incoming requests to your site's pages/sitemap and directing the user to a custom page, according to the logic in the code. ## Ways to code with Wix Studio Wix is committed to making sure you, as a developer, have the right environment, tools, and APIs to develop sites and apps for your customers. We know coding is not a 1-size-fits-all experience. With Wix Studio, you choose how and where to code: + With the built-in Code panel + Using the Wix IDE + In your own local IDE and integrate with GitHub While previewing and publishing your site is always done in the Wix Studio Editor, you can use each coding option at different times in the development flow. For example, you can add properties to elements and add pages to your site using the Code panel, but can then switch to the Wix IDE for coding.  ### Built-in Code panel To develop small projects that focus mainly on custom interactions and CSS styling on the frontend, craft your code using Wix Studio's built-in Code panel. To start, click the  and click **Start Coding**. The resulting [Code panel](https://support.wix.com/en/article/wix-studio-working-with-the-code-panel) contains: + **The Code sidebar**. *What you want to code*—page code, global page code, CSS styling, and more. + **The Code panel**. *How you code*. The Code panel provides you with: + The **Code sidebar** for navigation between Wix Studio coding features. + The **code editor** for writing and editing your code. + The **Properties & Events panel** for naming elements, setting properties, and defining event handlers. + The **CSS Classes panel** for CSS styling on a specific element. Watch a demo of how to work with the Code panel in Wix Studio: `youtube:https://www.youtube.com/watch?v=p3A2PD-jZ_E` ### Wix IDE For larger, multi-developer projects that involve more complex frontend code and/or backend code, use the online [Wix IDE](https://support.wix.com/en/article/about-the-wix-ide). The Wix IDE is a VS Code-based IDE that allows you to edit your site's code in your browser—no downloading or configuration necessary. Use familiar VS Code features to get up and running quickly.Click **Code in Wix IDE** from the code editor to start coding. ### Your own local IDE and GitHub integration Use the [Git Integration and Wix CLI for Sites](https://support.wix.com/en/article/velo-about-git-integration-wix-cli) set of power tools to write, test, and publish code for your Wix site locally on your computer. To [set this up](https://support.wix.com/en/article/velo-setting-up-git-integration-wix-cli), connect your site to GitHub, develop in your favorite IDE, test your code in real time, and publish your site from the command line. > **Note:** The Wix IDE can't be used together with GitHub Integration. You can, however, connect your site to GitHub to work locally, and then disconnect from GitHub to resume working in the Wix IDE without losing any work. ## What each coding option offers Use this table to decide which Wix Studio coding option is for you based on the features provided. | | Code panel | Wix IDE | Git integration | | :-------: | :---------------------: | :-------: | :---------------------: | | CMS interaction |  |  |  | | Serverless |  |  |  | | Secure |  |  |  | | Open platform |  |  |  | | NPM Packages |  |  |  | | Velo Packages |  |  |  | | Frontend code |  |  |  | | CSS styling for all site pages |  |  |  | | CSS styling for specific elements |  |  |  | | Backend code |  |  |  | | Concurrent editing |  |  |  | | Collaboration (team work) |  For >1 designers and 1 developer |  |  | | Public files |  |  |  | | Online access |  |  |  | | Offline access |  |  |  | | Complex projects or projects that require a lot of code |  |  |  | | Autosave by default |  |  | User-set | | Wix AI Assistant |  |  |  | ## Finding your way The following table lists features you are familiar with in the Wix Editor and directs you to the equivalent features in Wix Studio. | Feature | Wix Editor | Wix Studio | | ------ | ------ | ------ | | Enabling dev mode | From the Dev Mode menu, click | Coding is always available, no need to enable. Click  and . | | Previewing your site | On the site, click **Preview** at the top right. | On the site, click  at the top right. | | Page code | In the Code sidebar under Page Code. | **Code panel**: In the Code sidebar under Page Code.**Wix IDE and GitHub integration**: In the Explorer, navigate to `src/pages`, `src/public`, and `src/styles`. | | Public code | In the Code sidebar under Public Code. | **Code panel**: Under the Public section of Public & Backend in the Code sidebar.**Wix IDE and GitHub Integration**: In the Explorer, navigate to `src/public`. | | Master page | The `masterpage.js` file is in the Code sidebar under Page Code. | **Code panel**: The `masterpage.js` file is in the Main Pages section under Page Code in the Code sidebar.**Wix IDE and GitHub integration**: In the Explorer, navigate to `src/pages`. | | CSS for all site pages | Limited release. | **Code panel**: The `global.css` file is in the CSS section under Page Code in the Code sidebar.**Wix IDE and GitHub integration**: In the Explorer, navigate to `src/styles`. | | CSS Classes panel for specific elements | NA | **Code panel**: The CSS Classes panel is at the bottom right under the code editor. | | Properties & Events panel | Click  in the Code panel toolbar. The panel displays on the bottom right. | The Properties & Events panel is at the bottom left of the code editor, next to the Properties & Events panel. | | Backend code | In the Code sidebar under Public & Backend. | **Code panel**: Under the Backend section of Public & Backend in the Code sidebar.**Wix IDE and GitHub integration**: In the Explorer, navigate to the `src/backend` folder. Here you will see web method files, `data.js`, `routers.js`, `events.js` (for backend event handlers), `http-functions.js`, `jobs.config` (for scheduling recurring jobs), and other general Javascript (`.js`) backend files. | | Web module `.web.js` backend files | In the Code sidebar under Public & Backend | Under the Backend section of Public & Backend in the Code sidebar.**Wix IDE and GitHub integration**: In the Explorer, add a web module file in the `src/backend` folder. For example, `src/backend
**Important:** If you're building a Wix site that others can edit, make sure they understand the limitations of working with elements. For more information, see [Working with Collaborators](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/working-with-collaborators.md).## Deleting elements When you delete elements from your site, the behavior of any associated code depends on the type of event handler used — static or dynamic. In both cases, the code itself isn't automatically removed, but how it's connected to the element changes. >**Note:** In the editor, if a collaborator tries to delete elements referenced by code, a confirmation prompt displays. The prompt helps prevent accidental deletions that can impact your code. The prompt displays for: > >- Elements directly referenced by code. A  icon displays for these elements as an indicator. >- Parent elements whose nested elements are referenced by code. ### Deleting an element with dynamic event handler When you delete an element with a [dynamic event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md), the associated code isn't removed. If you add a new element and give it the same ID as the deleted one, the existing code will continue to work as expected. ### Deleting an element with static event handler When you delete an element with [static event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-static-event-handlers.md), the associated code remains, but the event wiring is removed. For example, you have an element named `button2` with an `onClick` event that toggles the visibility of an element called `image3`: ```javascript export function button2_onClick(event) { if ($w("#image3").visible) { $w("#image3").hide(); } else { $w("#image3").show(); } } ``` If you delete `button2` from your page, the event code is not deleted. However, the event is no longer wired. This means that if you add a new button and name it `button2`, the code above won't run when it's clicked, you would need to rewire the event manually. ## See also - [About Code Placement](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/where-do-i-put-my-code.md) - [Working with Collaborators](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/working-with-collaborators.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Working with Collaborators ## Article: Working with Collaborators ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/working-with-collaborators.md ## Article Content: # Working with Collaborators When you develop a site, you may want other people to collaborate on the site or you may want to transfer the site to someone else but maintain your ability to collaborate on it. ## Allow other people to collaborate on your site You can let other people collaborate on your site's code and functionality by adding them as [collaborators](https://support.wix.com/en/article/inviting-people-to-contribute-to-your-site) to your site. It isn't necessary to transfer ownership of the site to them. Collaborators need to be assigned a role that has **Edit Site** permissions to be able to edit the site and add or edit code. It is not necessary to give a collaborator **Publish** permissions for them to be able to edit the site code. Note that if the collaborator adds functionality that can only be tested on the live site, they won't be able to test it. ## Transfer ownership and collaborate Some features are available to test only on a live site. You have to have access to the site so you can test and maintain the code you developed, even if it's for other users on their domain. You also may want to do more development that needs testing after the site has been published and is live. You probably don't want visitors to the site to access the pages that are under development and being tested. To test and maintain a site developed for another user: 1. When a site is ready for live testing, [transfer ownership](https://support.wix.com/en/article/transferring-a-premium-site-to-another-wix-account) of the domain to the other user. 2. Instruct the other user to [invite you as a site collaborator](https://support.wix.com/en/article/inviting-site-contributors). 3. Ensure that you are added as a role that has **Edit Site** permissions from the options for [collaborator roles](https://support.wix.com/en/article/roles-permissions-overview#roles637). This allows you full access to the site, including its backend files and database collections. To continue development on a live site once ownership is transferred: 1. If you are working on a new page, [add a page](https://support.wix.com/en/article/adding-a-page-to-your-site). If you are working on an existing page, [duplicate the page](https://support.wix.com/en/article/duplicating-a-page). 2. Make sure the page is [hidden](https://support.wix.com/en/article/hiding-a-page-from-the-menu) in the menu so site visitors won't be able to access it while it's being developed and tested. (Note that a hidden page on a published site can still be accessed by modifying the URL.) 3. Once you are finished with development and testing, [make the page visible](https://support.wix.com/en/article/hiding-and-unhiding-a-page-from-your-site-menu#unhiding-a-page-in-your-site-menu). If it replaces a page, [delete](https://support.wix.com/en/article/deleting-a-page) the old page. The following are some considerations for when different users work on a site developed in the editor. ## Considerations when working on a live site for another user If you develop a site with code for someone else that you can both edit, you need to understand the limitations of what you or the other user can do with the site and its elements. Keep in mind, for example, the other user might be a designer with no coding experience. In this section, we describe: - [Site-related considerations](#site-related-considerations) - [Element-related considerations](#element-related-considerations) ### Site-related considerations If you duplicate an individual page or an entire site, or if you or the other user clones or transfers a site, the code and events in the site are maintained only in the new copy of the page or site. ### Element-related considerations * If you or they copy and paste an element that has event handlers associated with it, the new element will not work as expected since the event wiring and code is not copied. * If you or they copy and paste an element that is connected to a dataset, the new element maintains the connection settings from the element it was copied from. * If you or they move an element from one page to another, the element will not work as expected since the associated code and wiring is on the original page and is not moved to the new page. * If an element is connected to a dataset, and both are set to show on only one page, if the element is then set to [Show on All Pages](https://support.wix.com/en/article/showing-an-element-on-all-pages-6533570), the connection to the dataset is broken. * In the editor, if a collaborator tries to delete elements referenced by code, a confirmation prompt displays. The prompt helps prevent accidental deletions that can impact your code. The prompt displays for: + Elements directly referenced by code. A  icon displays for these elements as an indicator. + Parent elements whose nested elements are referenced by code. --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Error Log When Publishing ## Article: Publishing Your Site ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/error-log-when-publishing.md ## Article Content: # Error Log When Publishing You can [publish your site](https://support.wix.com/en/article/wix-editor-publishing-your-site) at any time from the top toolbar of the editor. When you click **Publish**, Wix performs an automatic check on the site's code for any errors. If errors are detected, Wix alerts you and provides the option to either return to the editor without publishing your site or to publish your site with the errors. > **Note:** > Wix only reports code errors if there have been changes to the code since the last time the site was published. If no modifications were made to the code, Wix publishes your site without requiring any additional confirmation. ## Viewing the error log
If developer mode is enabled when you publish your site, Wix provides details of the errors in your code.
You can then access the most recent `build.log` file to analyze where errors have been detected.
To do this, click on **View Error Log** in the publishing prompt. Later, open the `build.log` file directly in your
Wix editor under **Developer Tools** to review:
Note that the `build.log` file is only kept for 30 days. After 30 days, the status for Latest Build under **Developer Tools** will be `Awaiting publish`. Publishing your site generates a new `build.log` file.
Exceptions: - [`wix-secrets-backend.v2`](https://dev.wix.com/docs/velo/apis/wix-secrets-backend-v2/introduction.md): This is a [backend API](#backend-apis), but it does have an equivalent SDK module.> **Note:** Because the Wix SDK continues to be updated, an equivalent SDK module may have more functionality than its equivalent Velo API, so they may not look identical. ### Backend APIs Velo APIs that end in `-backend`, such as `wix-bookings-backend`, are backend APIs. Most backend APIs have corresponding [universal APIs](#universal-apis) that contain the same functionality. For example, `wix-bookings.v2` contains `wix-bookings-backend` functionality. To migrate your code that uses backend APIs to the SDK, use the corresponding universal API's equivalent SDK module. For example, use the [`bookings`](https://dev.wix.com/docs/api-reference/business-solutions/bookings/services/introduction.md) SDK module instead of the Velo [`wix-bookings-backend`](https://dev.wix.com/docs/velo/apis/wix-bookings-backend/introduction.md) API. Backend Velo APIs use the `suppressAuth` property to prevent permission checks from running. The equivalent functionality in the SDK is elevation. Learn more about [elevated permissions](https://dev.wix.com/docs/api-reference/articles/authentication/about-elevated-permissions.md).
Exceptions: - [`wix-blog-backend`](https://dev.wix.com/docs/velo/apis/wix-blog-backend/introduction.md): This is a [universal API](#universal-apis). - [`wix-cache-backend`](https://dev.wix.com/docs/velo/apis/wix-cache-backend/cache/introduction.md): The [`cache`](https://dev.wix.com/docs/api-reference/site/viewer/cache/invalidate-cache.md) SDK module contains this API's functionality. - [`wix-chat-backend`](https://dev.wix.com/docs/velo/apis/wix-chat-backend/introduction.md): The [`inbox.messages`](https://dev.wix.com/docs/api-reference/crm/communication/inbox/example-flows.md) SDK submodule contains this API's functionality. - [`wix-ecom-backend`](https://dev.wix.com/docs/velo/apis/wix-ecom-backend/introduction.md): This is a [universal API](#universal-apis). - [`wix-pay-backend`](https://dev.wix.com/docs/velo/apis/wix-pay-backend/introduction.md): This API doesn't currently have an SDK replacement. For now, continue using the Velo API. - [`wix-payment-provider-backend`](https://dev.wix.com/docs/velo/apis/wix-payment-provider-backend/introduction.md): The [`payments.pspCallbacks`](https://dev.wix.com/docs/api-reference/business-management/payments/payment-service-provider-service-plugin/callbacks/submit-event.md) SDK submodule contains this API's functionality. - [`wix-pro-gallery-backend`](https://dev.wix.com/docs/velo/apis/wix-pro-gallery-backend/introduction.md): This is a [universal API](#universal-apis). - [`wix-site-backend`](https://dev.wix.com/docs/velo/apis/wix-site-backend/introduction.md): Migrating this API is a [unique case](#wix-site-backend).### Frontend APIs Velo APIs that end in `-frontend`, such as `wix-bookings-frontend`, are frontend APIs. [`wix-mobile`](https://dev.wix.com/docs/velo/apis/wix-mobile/introduction.md) and [`wix-navigate-mobile`](https://dev.wix.com/docs/velo/apis/wix-navigate-mobile/introduction.md) are also frontend APIs. Frontend APIs have direct equivalents in the SDK. These are the frontend SDK modules with similar naming to the Velo counterparts. For example, the [`bookings`](https://dev.wix.com/docs/sdk/frontend-modules/bookings/introduction.md) SDK frontend module is a direct replacement for the Velo [`wix-bookings-frontend`](https://dev.wix.com/docs/velo/apis/wix-bookings-frontend/introduction.md) API. Frontend SDK methods are asynchronous, even when the Velo equivalent is synchronous.
Exceptions: - [`wix-pay-frontend`](https://dev.wix.com/docs/velo/apis/wix-pay-frontend/currencies/introduction.md): Migrating this API is a [unique case](#wix-pay-frontend). - [`wix-storage-frontend`](https://dev.wix.com/docs/velo/apis/wix-storage-frontend/introduction.md): This API's equivalent SDK module, [`storage`](https://dev.wix.com/docs/sdk/frontend-modules/storage/introduction.md), has asynchronous methods. The equivalent Velo methods are synchronous.### Unique cases The following Velo APIs have a unique way to implement their functionality in the SDK. #### `wix-auth` The [`wix-auth`](https://dev.wix.com/docs/velo/apis/wix-auth/introduction.md) Velo API has equivalent functionality in the [`essentials.auth`](https://dev.wix.com/docs/sdk/core-modules/essentials/auth.md) SDK submodule. #### `wix-bookings.v1` The `wix-bookings.v1` Velo API has a corresponding [universal API](#universal-apis), [`wix-bookings.v2`](https://dev.wix.com/docs/velo/apis/wix-bookings-v2/introduction.md). Therefore, use the the [`bookings`](https://dev.wix.com/docs/api-reference/business-solutions/bookings/services/introduction.md) SDK module instead of `wix-bookings.v1`. #### `wix-dashboard` The [`wix-dashboard`](https://dev.wix.com/docs/velo/apis/wix-dashboard/introduction.md) Velo API has an equivalent [`dashboard`](https://dev.wix.com/docs/sdk/host-modules/dashboard/introduction.md) SDK module. This module is a [host module](https://dev.wix.com/docs/sdk/host-modules/about-host-modules.md). #### `wix-data` The [`wix-data`](https://dev.wix.com/docs/velo/apis/wix-data/introduction.md) Velo API has a replacement [`items`](https://dev.wix.com/docs/sdk/business-solutions/data/items/introduction.md) SDK submodule in the `data` SDK module. Note that while this submodule closely mirrors `wix-data`, it's not a direct equivalent. Learn more about [migrating from `wix-data` to the Data Items SDK](https://dev.wix.com/docs/velo/apis/wix-data/migrate-to-the-sdk.md). #### `wix-fetch` Use the native `fetch()` to access the functionality of [`wix-fetch`](https://dev.wix.com/docs/velo/apis/wix-fetch/introduction.md) in the SDK. The `wix-fetch` Velo API has no SDK replacement. This API contains 2 methods: - `fetch()`: You can use the native `fetch()` by calling this method on the frontend or backend without importing it when using the SDK. - `getJSON()`: This method does not exist in the SDK. You can convert your `getJSON()` calls to `fetch()` instead. To get the JSON data from the `fetch()` response, call the `json()` method. #### `wix-pay-frontend` The [`wix-pay-frontend`](https://dev.wix.com/docs/velo/apis/wix-pay-frontend/introduction.md) Velo API has 2 sections and each section is handled differently: - [`startPayment()`](https://dev.wix.com/docs/velo/apis/wix-pay-frontend/start-payment.md): This Velo method doesn't currently have an SDK replacement. For now, continue using the Velo method. - [`currencies`](https://dev.wix.com/docs/velo/apis/wix-pay-frontend/currencies/introduction.md): This Velo API has an equivalent [`pay.currencies`](https://dev.wix.com/docs/sdk/frontend-modules/pay/currencies/introduction.md) SDK frontend submodule. #### `wix-search` The [`wix-search`](https://dev.wix.com/docs/velo/apis/wix-search/introduction.md) Velo API doesn't currently have an SDK replacement. For now, continue using the Velo API. #### `wix-site-backend` The [`wix-site-backend`](https://dev.wix.com/docs/velo/apis/wix-site-backend/introduction.md) Velo API has 2 sections and each section is handled differently: - [`invalidateCache()`](https://dev.wix.com/docs/velo/apis/wix-site-backend/invalidate-cache.md): This Velo method doesn't currently have an SDK replacement. For now, continue using the Velo method. - [`GeneralInfo`](https://dev.wix.com/docs/velo/apis/wix-site-backend/general-info/introduction.md): This functionality can be implemented using [`getSiteProperties()`](https://dev.wix.com/docs/api-reference/business-management/site-properties/properties/get-site-properties.md) from the `business-tools.siteProperties` SDK submodule. #### `wix-site-plugins.v1` The [`wix-site-plugins.v1`](https://dev.wix.com/docs/velo/apis/wix-site-plugins-v1/introduction.md) Velo API has an equivalent [`site-plugins`](https://dev.wix.com/docs/api-reference/app-management/site-plugins/placement-status-v1/introduction.md) SDK module. #### `wix-web-module` The [`wix-web-module`](https://dev.wix.com/docs/velo/apis/wix-dashboard/introduction.md) Velo API has an equivalent [`web-methods`](https://dev.wix.com/docs/sdk/core-modules/web-methods/introduction.md) SDK module. This module is a core module. #### `wix-widget` The [`wix-widget`](https://dev.wix.com/docs/velo/velo-only-apis/wix-widget/introduction.md) Velo API has an equivalent [`widget`](https://dev.wix.com/docs/sdk/host-modules/editor/widget/introduction.md) SDK submodule. #### Velo packages [Velo packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/working-with-velo-packages.md) don't currently have equivalent SDK packages. In the future, equivalent SDK packages will gradually be released. ## See also - [Develop Websites with the SDK](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/develop-with-the-sdk/develop-websites-with-the-sdk.md) - [Migrate from Velo to the SDK](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/develop-with-the-sdk/migrate-from-velo-to-the-sdk.md) - [About Site Development](https://dev.wix.com/docs/api-reference/articles/platform-overview/about-wix-site-development.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Migrate from Velo to the SDK ## Article: Migrate from Velo to the SDK ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/develop-with-the-sdk/migrate-from-velo-to-the-sdk.md ## Article Content: # Migrate from Velo to the SDK You can now use the [Wix JavaScript SDK](https://dev.wix.com/docs/sdk.md) instead of the Velo API for most functionality when developing sites or building apps with Blocks. You are encouraged to start using the SDK in all new and ongoing development projects. Although your existing code written using the Velo API will continue to work, you may want to migrate that code to use the SDK. This article explains how to migrate your code for Velo APIs that have equivalent SDK modules. ## Step 1 | Identify what to migrate In many cases, the SDK version of a method works exactly the same as the Velo version and no further changes are necessary. However, in some cases the SDK method may work slightly differently. This is especially true if you were using an older version of a Velo API. If there are any differences, you will need to address them in your code. This usually means you need to pass different information when calling a method or handle the method’s response differently. Velo APIs fall into the following categories: **APIs that have equivalent SDK modules**: Migrate your code using the instructions in this article. **APIs that don't have equivalent SDK modules, but the SDK supports their functionality**: Rewrite your code using SDK modules that support the APIs' functionality. **APIs for which the SDK doesn't yet support their functionality**: Continue to use these Velo APIs alongside the SDK. To learn more about finding Velo APIs' functionality in the SDK and which Velo APIs you should continue to use, see [Velo to SDK API Mapping](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/develop-with-the-sdk/velo-to-sdk-api-mapping.md). ## Step 2 | Install packages The SDK is available through public npm packages. Each module in the SDK has its own package. 1. Determine which packages you need to install. Check the methods you use in the [SDK reference](https://dev.wix.com/docs/sdk.md) to see which packages you need. Each module’s introductory documentation specifies the package you need to install. 2. Install the packages you need using the [editor](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-in-the-editor.md#install-an-npm-package) or the [Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-with-the-wix-cli.md#install-an-npm-package). ## Step 3 | Adjust import statements As you need to import from the SDK package instead of from a Velo module, you need to adjust your existing import statements. For example to create a booking using Velo, you import `bookings` from `wix-bookings.v2`: ```javascript import { bookings } from 'wix-bookings.v2'; //... const booking = await bookings.createBooking(bookingInfo); ``` To create a booking using the SDK, you import `bookings` from `@wix/bookings`: ```javascript import { bookings } from '@wix/bookings'; //... const booking = await bookings.createBooking(bookingInfo); ``` In this case, you simply need to change the source of the import from `wix-bookings.v2` to `@wix/bookings`. ## See also - [SDK: About Site Development](https://dev.wix.com/docs/sdk/articles/get-started/about-site-development.md) - [Velo: About Using the SDK](https://dev.wix.com/docs/velo/articles/api-overview/about-using-the-sdk.md) - [Velo to SDK API Mapping](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/develop-with-the-sdk/velo-to-sdk-api-mapping.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Identities ## Article: Identities ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/authorization/identities.md ## Article Content: # About Identities When a method is called on your site or on a [custom dashboard page](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/dashboard-admin-pages/about-dashboard-pages.md), it is called by a specific identity. This identity represents the current site user who triggers the method call, regardless of whether the code making the call is in the frontend, the backend, or on a custom dashboard page. Some Velo methods are restricted based on which identities are authorized to call them. Authorization notes in the Velo API reference indicate when a method may be restricted by identity. If necessary, you can call such methods even when the current identity lacks permissions by using [elevation](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/authorization/elevation.md). > Note: Some methods may further restrict access by requiring that the calling identity has specific permissions granted through a role. You can use elevation to bypass these restrictions as well. The Velo API recognizes the following identities: - [Site visitor](#site-visitor) - [Site member](#site-member) - [Wix user](#wix-user) ## Site visitor Site visitors are visitors to a site who have not logged in. Methods that site visitors can call typically involve operations specific to their own experience on the site, such as: - Adding products to the current cart. - Creating a booking. - Copying text to the local clipboard. ## Site member Site members are visitors who have logged in. They can call all the same methods available to site visitors, plus additional methods that only apply to their site membership. Site members who are also [site owners or collaborators](https://support.wix.com/en/article/inviting-people-to-contribute-to-your-site) are also considered admins. Their admin status allows them to call certain administrative methods that other members cannot call, such as methods to work with the files in the site’s Media Manager. ## Wix user When interacting with the site dashboard, site owners or collaborators take on the Wix user identity. Although Wix users are the same people as site owners and collaborators, they assume different identities depending on context. As the dashboard is a secured admin area, Wix users can call methods with stricter authorization requirements in the dashboard. Examples of administrative methods Wix users can call in the dashboard include: - Adding products to a store. - Confirming or canceling bookings. - Approving new members. > Note: Although calls made from a published dashboard page are called with the authorization of a Wix user, those same calls made from a dashboard page being previewed in the editor are only called with the authorization of a site member admin. This means that calls which will work in your published dashboard page may not work when previewing the same dashboard page. ## See more - [About Elevation](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/authorization/elevation.md) - [Roles & Permissions](https://support.wix.com/en/article/roles-permissions-overview) - [elevate()](https://dev.wix.com/docs/velo/api-reference/wix-auth/elevate.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Elevation ## Article: Elevation ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/authorization/elevation.md ## Article Content: # About Elevation > **Note:** This article discusses elevation when developing websites, but the concepts and implementation are the same when [coding in Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/code-in-blocks/about-coding-in-blocks.md). Some Velo API methods are restricted based on the [identities](https://support.wix.com/en/article/roles-permissions-overview) and [roles](https://support.wix.com/en/article/roles-permissions-overview) authorized to call them. Elevation is a mechanism that allows you to call these restricted methods even when the calling identity lacks the necessary authorization. This process creates a temporary elevated version of a method by calling the elevate() method, enabling you to bypass the usual authentication checks that might otherwise restrict access. For example: ```javascript import { elevate } from "wix-auth"; import { someModule } from "wix-some-module"; //... const elevatedMethod = elevate(someModule.methodName); elevatedMethod(param1, param2); ``` ## Methods that may require elevation Methods can be restricted based on user [identity](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/authorization/identities.md) or [roles and permissions](https://support.wix.com/en/article/roles-permissions-overview). ### Identity restriction example An example of a method restricted by identity is the [`assignBadge()`](https://dev.wix.com/docs/velo/apis/wix-members-v2/badges/assign-badge.md) method. This method can only be called by [Wix users](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/authorization/identities.md#wix-user) because site members should not be able to assign badges to themselves. This means that `assignBadge()` can only be called without elevation in a published dashboard page, where the caller will have the Wix user identity. In all other cases, if you need to call `assignBadge()`, you must elevate it first. For example, you might want to automatically assign a badge to users who take some specific action or reach a predetermined milestone. Since the site members who earned the badge don’t have rights to assign it to themselves. In this case, you need to use elevation to assign the badge. ### Roles and permissions restriction example An example of a method restricted based on roles and permissions is the [`confirmBooking()`](https://dev.wix.com/docs/velo/apis/wix-bookings-v2/bookings/confirm-booking.md) method. This method can only be called by admin members with an administrative bookings role because users creating bookings should not be allowed to confirm their own bookings. If you need to call `confirmBooking()` on behalf of a user who does not have an administrative Bookings role, you must elevate it first. For example, you might have a specific service that you want to confirm automatically once a site visitor books it. Since site visitors who book the service don’t have permissions to confirm it themselves, you need to use elevation to confirm the booking. ## Security considerations Due to potential security risks, you can only elevate methods in backend code. While elevation offers flexibility, it’s crucial to consider how and when elevation is triggered. [Web methods](https://dev.wix.com/docs/velo/apis/wix-web-module/web-method.md) and [HTTP functions](https://dev.wix.com/docs/velo/velo-only-apis/wix-http-functions/introduction.md) are particularly vulnerable if not properly managed due to their open nature. Elevation in [backend events](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md) or code only triggered from [scheduled jobs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/recurring-jobs/about-scheduling-recurring-jobs.md) presents less risk but should still be handled cautiously. ### Example To demonstrate how to properly handle elevation, consider a site that rewards frequent visitors with a special badge. To do so, the code needs to track recent member visits and call `assignBadge()` using elevation when a member has visited frequently enough. (Note that the code samples below have been simplified, removing error handling and other non-essential code.) Here is an example of an insecure approach to writing this code: ```javascript // Backend code in badges.web.js import { elevate } from "wix-auth"; import { Permissions, webMethod } from "wix-web-module"; import { badges } from "wix-members.v2"; export const assignBadge = webMethod( Permissions.Anyone, (badgeId, memberId) => { const elevatedAssignBadge = elevate(badges.assignBadge); return elevatedAssignBadge(badgeId, [memberId]); } ); export const isFrequentVisitor = webMethod(Permissions.Anyone, (memberId) => { // Query collection that tracks member visits, // determine if the specified member is a frequent visitor, // and return the result }); // Frontend code in masterPage.js import { assignBadge, isFrequentVisitor } from "backend/badges.web"; import { members } from "wix-members.v2"; const frequentVisitorBadgeId = "c705b8dd-aae2-4eea-a4d1-16f52421ec0a"; //... const currentMember = await members.getCurrentMember(); if (isFrequentVisitor(currentMember._id)) { assignBadge(frequentVisitorBadgeId, currentMember._id); } ``` There are several problems with the `assignBadge()` web method used in this approach: - It is open for anyone to call, even though only members can receive badges. - It doesn’t ensure that it will only assign the intended badge. - It doesn’t ensure that it will assign a badge to the currently logged in member. Because of these issues, this method can be called by a malicious user to assign any badge to any member. You can easily remedy these issues by being more careful about where you use elevation and how you expose it to be called. For example: ```javascript // In badges.web.js import { elevate } from 'wix-auth'; import { Permissions, webMethod } from "wix-web-module"; import { badges } from "wix-members.v2"; import { members } from 'wix-members.v2'; const assignFrequentVisitorBadge = webMethod( Permissions.Member, () => { const currentMember = await members.getCurrentMember(); if (isFrequentVisitor(currentMember.\_id)) { const frequentVisitorBadgeId = 'c705b8dd-aae2-4eea-a4d1-16f52421ec0a'; const elevatedAssignBadge = elevate(badges.assignBadge); return elevatedAssignBadge(frequentVisitorBadgeId, [memberId]); } } ) const isFrequentVisitor = (memberId) => { // Query collection that tracks member visits, // determine if the specified member is a frequent visitor, // and return the result } // masterPage.js import { assignFrequentVisitorBadge } from 'backend/badges.web'; //... assignFrequentVisitorBadge(); ``` In this approach, the following makes sure the elevation is not exploited by malicious users: - The ID of the badge to assign is specified in backend code. - The current user ID is retrieved in backend code. - The web method used to trigger the badge assignment has permissions set so it can only be called by site members. ## See more - [About Identities](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/authorization/identities.md) - [Roles & Permissions](https://support.wix.com/en/article/roles-permissions-overview) - [elevate()](https://dev.wix.com/docs/velo/apis/wix-auth/elevate.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: JavaScript Support ## Article: JavaScript Support ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/java-script-support.md ## Article Content: # About JavaScript Support Wix supports working in JavaScript to develop websites, as well as some special features, including: * Support for JavaScript features * Support for modules * Support for the JavaScript Fetch API * Sharing JavaScript code naturally between the backend and frontend using [web modules](https://support.wix.com/en/article/how-to-call-server-side-code-from-the-front-end) ## Supported IDEs You can work in JavaScript in: + The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor). + The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio). + Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) (Wix Studio and Wix Editor). ## JavaScript feature support (ECMAScript 2020) Wix supports modern JavaScript features up through and including the [ES2020](https://tc39.es/ecma262/2020/) standard. You can use promises, async/await, and arrow functions, which were introduced with ES2017. Browsers are gradually adopting the ES2019 standard. Until these standards are fully implemented, we transpile your code into ES5, so it can run in current browsers. Wix supports [source maps](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap), so that even though the browser runs transpiled ES5 code, you can debug your ES2019 source code in your browser's developer tools. ## Module support (ECMAScript 2015) Wix supports the native module functionality included in the ES2015 release of JavaScript. To use ES2015 module functionality, you need to follow the [ES2015 Module Syntax](https://developers.google.com/web/shows/ttt/series-2/es2015). Only those items specifically exported in a module are exposed to other files. All other items in your module are internal to the module only. For examples of how to use this functionality, see MDN's [JavaScript modules guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). > **Notes:** > - You can only export functions in files that are located in the Public or Backend sections of your site's code. You can't export functions from page or popup files. > - Certain module export formats are not supported in `events.js`, `data.js`, or `routers.js` files. For more information, see [Module Export Syntax for Backend Events, Data Hooks, and Routers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/module-export-syntax.md). ### Module scope The following is a list of guidelines that define how you can share modules and functions between, and within, the backend and public scopes: * A JavaScript file or script in backend can import a module from any file in backend or public. * A file in public can import a module from any file in public. * You can import functions from backend and use them in public, using a [web module](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/where-do-i-put-my-code.md). * You can use relative paths to refer to files with the "." prefix. * You can import a module from backend with the _backend/_ prefix. * You can import a module from public with the _public/_ prefix. * Modules can import other modules. ## Wix Fetch [Wix Fetch](http://wix.to/94BuAAs/wix-fetch.html) is an implementation of the standard JavaScript Fetch API, and you work with it the same way, using standard Fetch syntax. You can look at [examples of using Fetch](https://github.com/github/fetch), or check out the [Standard Fetch specification](https://fetch.spec.whatwg.org/). Use Wix Fetch rather than the standard JavaScript Fetch API whenever you need an `http/s` request. You can use Wix Fetch in both backend and frontend code. To use Wix Fetch in your JavaScript code, add `import {fetch} from 'wix-fetch'` to the beginning of your JavaScript file. Among its benefits, Wix Fetch uses promises to handle asynchronous requests, which allows for easier handling of results and errors. ## See also + [Working with promises](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/working-with-promises.md) + [About module export syntax](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/module-export-syntax.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Working with Promises ## Article: Working with Promises ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/working-with-promises.md ## Article Content: # About Promises > **Note:** This article is intended for coders with limited JavaScript experience, and serves as an introduction to this basic JavaScript content. Some of the code your write when developing your site is asynchronous code. Asynchronous code doesn't execute in the order it's written, unlike synchronous code. Instead, it returns a promise. A [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. While the promise is pending, synchronous code continues to run. When developing your website, there are some cases where you need to work with promises. For example: - [Calling backend functions](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-a-jsw-web-module.md) from your page code. - Calling certain [APIs](https://dev.wix.com/docs/velo.md). Promises are a regular JavaScript concept, so it's easy to use AI chatbots or search engines to troubleshoot. ## Supported IDEs You can handle promises using: - The editor (Wix Studio and Wix Editor) - The Wix IDE (Wix Studio) - You local IDE (Wix Studio and Wix Editor) ## Handle a promise Handling a promise means telling your code to read and use the value of the promise only once its resolved value is known. This means the asynchronous code has finished running. At any given time, a promise has one of the following statuses: - **Pending**: The asynchronous code is still running. - **Fulfilled**/**resolved**: The asynchronous code has finished running and has successfully returned a value. - **Rejected**: The asynchronous code has finished running and has thrown an error. You can tell your code to expect a promise and to wait for the asynchronous code to finish running in the following ways: - [`async`/`await`](#asyncawait): Allows you to treat asynchronous code as if it's synchronous, meaning the next line of code won't run until the promise is resolved. - [`then()`](#then): Allows you to run other synchronous code while your asynchronous code is running. You have more control over when your code runs, but it's less readable. ## `async`/`await` The `async`/`await` syntax allows you to handle promises in a way that makes your asynchronous code appear synchronous. This can make your code more readable, as the next line of code won't run until the promise is resolved. ### Define asynchronous functions Asynchronous functions are functions that contain asynchronous code. An asynchronous function's return value is always a promise. To define a function as asynchronous, add `async` before the function declaration. For example: ```js async function myFunction () {} const myFunction = async () => {} ``` > **Note:** This method is not supported at the top level, because top level code is synchronous. Add `await` before the call to an asynchronous function to make your code wait for the function to resolve before moving on to the next line. For example: ```js const myPromiseValue = await myAsyncFunction(); ``` Then you can use the value of the resolved promise on the next line. For example: ```js async function myFunction () { const myPromiseValue = await myAsyncFunction(); console.log(myPromiseValue); } ``` ### Handle errors with `async`/`await` If your promise is rejected, something has gone wrong in the asynchronous code and you need to handle the error. Use the [`try...catch` block](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) to handle errors. For example: ```js async function myFunction () { try { const myPromiseValue = await myAsyncFunction(); console.log(myPromiseValue); } catch (error) { console.log(error); } } ``` ## `then()` With the `then()` syntax, you can instruct your code to handle promises by running a function once the promise is resolved. For example: ```js asyncFunc().then((resolvedPromiseValue) => { // Do something with resolvedPromiseValue. console.log(resolvedPromiseValue); }) ``` ### Handle `then()` return value If you return a value in the function passed to `then()`, that value is always a promise. For example: ```js const returnValue = asyncFunc().then((resolvedPromiseValue) => { return 'The value of the resolved promise is: ' + resolvedPromiseValue; }) // returnValue is a promise. ``` You can handle this promise in the same way as any other promise: - Use `async`/`await` to use the value synchronously in your code. For example: ```js async function myFunction () { const secondPromiseValue = await firstAsyncFunc() .then((firstPromiseValue) => { return secondAsyncFunc(firstPromiseValue); }) console.log(secondPromiseValue); } ``` - Chain `then()` methods. For example: ```js firstAsyncFunc() .then((firstPromiseValue) => { return secondAsyncFunc(firstPromiseValue); }) .then((secondPromiseValue) => { console.log(secondPromiseValue) }) ``` Both of the above examples log the same value to the console. ### Handle errors with `then()` If your promise is rejected, then something has gone wrong in the asynchronous code and you need to handle the error. Use the [`catch()` method](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) to handle errors: ```js myAsyncFunction() .then((myPromiseValue) => { console.log(myPromiseValue); }).catch((error) => { console.log(error); }) ``` ## Handle multiple promises simultaneously Waiting for multiple promises to be fulfilled before the execution of some code is supported. You can run multiple asynchronous functions and wait for their promises simultaneously using the [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) method. It accepts multiple promises in an array, and returns an array of resolved values. If any of the promises are rejected, the method throws an error. For example: ```js Promise.all([promise1, promise2, promise3]).then((values) => { console.log(values); // Expected output: [ // promise1ResolvedValue, // promise2ResolvedValue, // promise3ResolvedValue // ] }); ``` --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Module Export Syntax ## Article: Module Export Syntax ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/module-export-syntax.md ## Article Content: # Module Export Syntax Wix supports working in JavaScript to develop websites, as well as [support for modules](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/java-script-support.md#module-support-ecmascript-2015). This allows you to export modules from your code files and import them into your other code files. This article explains the supported syntax for exporting modules. ## Supported IDEs You can export modules in: + The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor). + The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio). + Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) (Wix Studio and Wix Editor). ## Supported syntax When exporting functions in the following files, use the standard export syntax contained in the documentation's code examples: + [`events.js`](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md) + [`data.js`](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/hooks/using-data-hooks.md) + [`routers.js`](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) + [Service plugin code files](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/about-service-plugins.md) You can also use other export formats that are part of the [ES6 (ES2015) module export syntax](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export). However, the following export formats are **not** supported in `events.js`, `data.js`, `routers.js`, or service plugin code files: + **Re-exporting a function:** Directly re-exporting a function imported from an npm or Velo package. For example, this **doesn't** work: ```javascript import { myFunction } from 'myPackage'; export const wixMediaManager_onFileUploaded = myFunction; ``` The following alternative syntax **is** supported: ```javascript import { myFunction } from 'myPackage'; export const wixMediaManager_onFileUploaded = (paramA, paramB) => myFunction(paramA, paramB); ``` + **Dynamic exports:** Exports including a dynamic operation or expression that requires execution to resolve. For example, this **doesn't** work: ```javascript import myPackage from 'myPackage'; export const myRouter_Router = myPackage.router((paramA, paramB) => { // ... }); ``` The following alternative syntax **is** supported: ```javascript import myPackage from 'myPackage'; const functionForExport = myPackage.router((paramA, paramB) => { // ... }) export const myRouter_Router = (paramA, paramB) => functionForExport(paramA, ParamB); ``` + **Exports wrapped in objects:** Exports where functions are defined as properties of an object. For example, this **doesn't** work: ```javascript const dataHooks = { beforeInsert: (paramA, paramB) => { // ... } }; export const MyCollection_beforeInsert = dataHooks.beforeInsert; ``` The following alternative syntax **is** supported: ```javascript const dataHooks = { beforeInsert: (paramA, paramB) => { // ... } }; export const MyCollection_beforeInsert = (paramA, paramB) => dataHooks.beforeInsert(paramA, paramB); ``` + **CommonJS exports:** Exports in the CommonJS (CJS) format that preceded ES6 (ES2015). For example, this **doesn't** work: ```javascript module.exports = { MyCollection_beforeInsert: () => {} }; ``` ## See also + [About JavaScript support](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/java-script-support.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Event Handlers in Wix ## Article: Reacting to User Actions Using Events ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md ## Article Content: # About Event Handlers in Wix Event handlers in Wix work differently than in traditional web development. Normally, you would use `addEventListener()` to add event handlers, selecting DOM elements with methods like `getElementById()` or `querySelector()`. For example, you might write: ```js document.getElementById("myButton").addEventListener("click", function() { console.log("Button clicked!"); }); ``` In Wix, however, you don’t access the DOM directly. Instead, you use the [$w API](https://dev.wix.com/docs/velo/api-reference/$w/introduction.md) to interact with elements in the Wix editor and add event handlers, like this: ```js $w('#myButton').onClick(() => { console.log('Button clicked!'); }); ``` ## Supported IDEs You can use event handlers in the following IDEs: + The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor). + The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio). + Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli/about-git-integration-wix-cli.md) (Wix Studio and Wix Editor).
Important: Wix event handlers are now dynamic. While [static event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-static-event-handlers.md) are still supported for existing sites, we recommend using dynamic event handlers for new development and when updating existing code.## See also + [Add an Event Handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/add-an-event-handler.md). + [Where Do I Put My Code?](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/where-do-i-put-my-code.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Add An Event Handler ## Article: Add An Event Handler ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/add-an-event-handler.md ## Article Content: # Add an Event Handler You can add [dynamic event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) to elements on your site. To add an event handler to an element, you can either: + Write the code for the event handler directly in your page code. + Use the Properties & Events panel in the Wix editor to generate the event handler for you. ## Add an event handler directly in your code Write the event handler in your page code, either outside or inside the page’s [`onReady()`](https://dev.wix.com/docs/velo/api-reference/$w/on-ready.md) function. Access your page code files based on your setup: + **Editor:** Select the Page Code tab in the code panel. + **Local IDE when using [Git integration](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli/.md):** Locate your site repo's `src` folder. + **[Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio):** Use the `src` folder. Sample event handler: ```js $w('#myButton').onClick((event) => { console.log('Button was clicked!'); $w('#myText').text = 'Hello, World!'; }); ``` You can add or modify event handlers dynamically in your code as needed, for example, `$w('#myElement').myHandlerFunction()`. ## Add an event handler using the Property & Events panel To generate an event handler in the editor using the Properties & Events panel: 1. In the editor, select the element you want to add an event handler to. 2. In the Properties & Events panel, click the event you want to handle. For example, **onClick()** or **onMouseIn()**. 3. The page code will display a new event handler in the code editor: ```js $w('#myButton').onClick((event) => { }); ``` 4. Inside the body of the event handler, add the code you want to execute when the event occurs. For example: ```js $w('#myButton').onClick((event) => { console.log('Button was clicked!'); $w('#myText').text = 'Hello, World!'; }); ``` > **Note:** > > When you add an event handler using the Properties & Events panel, the event handler code is placed outside the `onReady()` function. You can then move the generated code snippet to any location. For a complete list of supported event handlers for each element type, see the [Wix API Reference](https://dev.wix.com/docs/velo/api-reference/$w/introduction.md). ## See also + [About Event Handlers in Wix](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md). + [About the Properties & Events Panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md). --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Static Event Handlers ## Article: About Static Event Handlers ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-static-event-handlers.md ## Article Content: # About Static Event Handlers
Deprecation Notice: This feature is deprecated but will continue to work as expected. Switch to [dynamic event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/add-an-event-handler.md) for your current and future projects. Unlike static event handlers, dynamic event handlers can be added or removed using methods like `$w('#myButton').onClick()`. While static event handlers are still supported for existing sites, we recommend using dynamic event handlers going forward.A static event handler is predefined and is linked to a specific event. The function can’t be dynamically modified or removed programmatically during execution. **Sample static event handler:** ```js export function myButton_click(event) { console.log('Button clicked'); } ``` ## Migrate from static to dynamic event handlers To migrate a static event handler to a dynamic one: 1. Open the Properties & Events panel for the element with the static event handler. 2. Find the event you want to migrate and click the yellow lightning bolt icon next to the event handler name. 3. Click the **Migrate [eventName] event** link that appears. After migration, your code updates from the old static format to the new dynamic format. For example: **Old format:** ```js export function myButton_click(event) { // Existing code } ``` **New format:** ```js $w('#myButton').onClick((event) => { // Existing code }); ``` ## Delete a static event handler You can no longer use the Properties & Events panel to delete static event handlers. To delete a static event handler, delete the generated code from the page code file. ## See also + [About Event Handlers in Wix](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md). + [Add an Event Handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/add-an-event-handler.md). + [About the Properties & Events Panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/working-with-the-properties-events-panel.md). --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About CSS Styling ## Article: About CSS Styling ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/about-css-styling.md ## Article Content: # About CSS Styling CSS allows you to customize the appearance of your website, from colors and fonts to sizes and positions of different elements. You can even add design elements that aren’t yet available in the editor. For example, you can: - Create a blur filter and apply it to any element in your site. - Use mix-blend-mode properties to combine different elements. - Add a gradient color effect to text. ## Supported IDEs You can customize the CSS using: - The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio). - The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio). - Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) (Wix Studio). ## Classes Classes group elements on your site together to easily apply the same styling to all the instances of that group. You can apply custom CSS styling to a global class, semantic class, or custom class. ### Global classes Global classes are built-in and made available to your site. Applying a style to a global class will affect the CSS styling of elements of that class globally, throughout your site. To get started, see the [list of available classes](https://dev.wix.com/docs/velo/api-reference/$w/styling-elements-with-css.md#api-reference_$w_available-classes). ### Semantic classes Most global classes are divided into more specific semantic classes to customize individual aspects. For example, you can apply a custom style to all buttons with `.button` or only apply a style to the label text of a button with `.button__label`. See the [documentation of each element](https://dev.wix.com/docs/velo/api-reference/$w/styling-elements-with-css.md#api-reference_$w_available-classes) for specific information on supported semantic classes. ### Custom classes In addition to the built-in, global classes you can also create your own custom classes and apply CSS styling to just those. For example, you may want to apply a certain animation style to all subscribe buttons throughout your site, but not to all buttons in general. To do so, you can create a custom class called `.button--subscribe` and add custom styling for all elements that you add this class to. ## See also - [Apply custom CSS styling](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/apply-custom-css-styling.md) - For further information on CSS styling options, refer to the [MDN CSS reference docs](https://developer.mozilla.org/en-US/docs/Learn/CSS). - [Wix Studio webinar: Enhance your designs with CSS editing](https://www.youtube.com/watch?v=xynm4m83CqM) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Apply Custom CSS Styling ## Article: Apply Custom CSS Styling ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/apply-custom-css-styling.md ## Article Content: # Apply Custom CSS Styling You can apply custom [CSS styling](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/about-css-styling.md) to any supported element in your site. ## Step 1 | Add the global.css file The way that you add the `global.css` file depends on the IDE you’re using. ### Editor (Wix Studio) 1. Go to the **Page Code** section of the code panel. 2. In the **CSS** section, click **+ Add global.css**. ### Wix IDE or your local IDE Add a `global.css` file to the `src/styles` folder. ## Step 2 | (Optional) Add a custom class to your site In addition to the [available classes](https://dev.wix.com/docs/velo/api-reference/$w/styling-elements-with-css.md#api-reference_$w_available-classes) you can add a new class to any supported element. You can add new custom classes with code or with the editor: ### Code Add one or more classes to the element with the `add()` function: ```javascript $w("#myElement").customClassList.add("className1", "className2"); ``` ### Editor (Wix Studio) 1. Select an element. 2. In the CSS Classes panel, type your custom class in the Custom classes field:  ## Step 3 | Apply custom styles to your class In the [`global.css` file](#step-1–add-the-global-css-file) add custom CSS styles to apply. For example: ```css .accordion { text-transform: capitalize; color: yellow; } .button--subscribe { background: linear-gradient(to bottom right, red, yellow); } ``` You can also use [site theme CSS variables](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/site-theme-css-variables.md) to apply your site's theme colors and fonts to your class. For example: ```css .container { background-color: var(--wst-color-fill-background-primary); ``` ## See also - [About CSS styling](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/about-css-styling.md) - [Webinar: Enhance your designs with CSS editing](https://www.wix.com/studio/academy/webinars/enhance-your-designs-with-css-editing) - For specific examples of available classes, refer to the [API documentation](https://dev.wix.com/docs/velo/api-reference/$w/styling-elements-with-css.md#api-reference_$w_available-classes). - For further information on CSS styling options, refer to the [MDN CSS reference docs](https://developer.mozilla.org/en-US/docs/Learn/CSS). --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Site Theme CSS Variables ## Article: Site Theme CSS Variables ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/site-theme-css-variables.md ## Article Content: # Site Theme CSS Variables ## CSS Variable Reference Wix exposes a comprehensive set of CSS variables for each of your site's theme colors and fonts. You can use these variables when applying custom [CSS styling](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/custom-css/about-css-styling.md) to supported element in your site. These variables represent the site's color and typography styles, enabling dynamic and consistent design across all components. Use this reference to identify and apply the correct variables for colors and fonts in your code. ## Color theme ### General | Style | CSS Variable | |---------------------|------------------------------------------| | Primary background | `--wst-color-fill-background-primary` | | Secondary background| `--wst-color-fill-background-secondary` | | Lines and dividers | `--wst-color-line` | ### Text | Style | CSS Variable | |---------------------|------------------------------------------| | Title | `--wst-color-title` | | Subtitle | `--wst-color-subtitle` | | Body text | `--wst-color-text-primary` | | Secondary text | `--wst-color-text-secondary` | | Links and actions | `--wst-color-action` | | Disabled actions | `--wst-color-disabled` | ### Buttons #### Primary button | Style | CSS Variable | |------------------------------|-----------------------------------------------| | Fill (Regular) | `--wst-button-color-fill-primary` | | Border (Regular) | `--wst-button-color-border-primary` | | Text (Regular) | `--wst-button-color-text-primary` | | Fill (Hover) | `--wst-button-color-fill-primary-hover` | | Border (Hover) | `--wst-button-color-border-primary-hover` | | Text (Hover) | `--wst-button-color-text-primary-hover` | | Fill (Disabled) | `--wst-button-color-fill-primary-disabled` | | Border (Disabled) | `--wst-button-color-border-primary-disabled` | | Text (Disabled) | `--wst-button-color-text-primary-disabled` | #### Secondary button | Style | CSS Variable | |------------------------------|-----------------------------------------------| | Fill (Regular) | `--wst-button-color-fill-secondary` | | Border (Regular) | `--wst-button-color-border-secondary` | | Text (Regular) | `--wst-button-color-text-secondary` | | Fill (Hover) | `--wst-button-color-fill-secondary-hover` | | Border (Hover) | `--wst-button-color-border-secondary-hover` | | Text (Hover) | `--wst-button-color-text-secondary-hover` | | Fill (Disabled) | `--wst-button-color-fill-secondary-disabled` | | Border (Disabled) | `--wst-button-color-border-secondary-disabled`| | Text (Disabled) | `--wst-button-color-text-secondary-disabled` | #### Theme Colors | Style | CSS Variable | |-----------------------|-----------------------------------| | Base 1 | `--wst-color-fill-base-1` | | Base 2 | `--wst-color-fill-base-2` | | Shade 1 | `--wst-color-fill-base-shade-1` | | Shade 2 | `--wst-color-fill-base-shade-2` | | Shade 3 | `--wst-color-fill-base-shade-3` | | Accent 1 | `--wst-color-fill-accent-1` | | Accent 2 | `--wst-color-fill-accent-2` | | Accent 3 | `--wst-color-fill-accent-3` | | Accent 4 | `--wst-color-fill-accent-4` | ## Font theme | Style | CSS Variable | |-------------------------------------|--------------------------------| | Heading 1 titles (reserved for page titles) | `--wst-font-style-h1` | | Heading 2 titles (recommended) | `--wst-font-style-h2` | | Heading 3 titles | `--wst-font-style-h3` | | Heading 4 titles | `--wst-font-style-h4` | | Heading 5 titles | `--wst-font-style-h5` | | Heading 6 titles | `--wst-font-style-h6` | | Large body text (paragraph 1) | `--wst-font-style-body-large` | | Medium body text (paragraph 2; recommended) | `--wst-font-style-body-medium`| | Small body text (paragraph 3) | `--wst-font-style-body-small` | --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Dashboard Pages ## Article: Working with Dashboard Pages ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/dashboard-admin-pages/about-dashboard-pages.md ## Article Content: # About Dashboard Pages Dashboard pages are pages you create in the editor that only appear on your site’s [dashboard](https://support.wix.com/en/article/wix-dashboard-overview). With dashboard pages, you can create a custom back office allowing you and your [collaborators](https://support.wix.com/en/article/roles-permissions-overview) to efficiently manage your business operations and live database content. Only you and your collaborators can access your dashboard pages. For example, let's say you have a real estate site and have added collaborators to your site. The image below depicts a dashboard page that lists the properties for sale.
**Important:** Hiding an element using the mobile Editor (Wix Editor) or breakpoints (Wix studio) removes that element from the page's DOM. Any code that relies on the hidden element's existence will break.--- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Redirecting Mobile Visitors ## Article: Redirecting Mobile Visitors ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/mobile/redirecting-mobile-visitors.md ## Article Content: # Velo Tutorial: Redirecting Mobile Visitors
Visit the Velo by Wix website to onboard and continue learning.
You can use Velo to redirect visitors to mobile-friendly pages in your site.
The basic steps to redirect to mobile pages are:
1. Use code to check if your site is being viewed on a mobile device or a desktop device
2. If your site is being viewed on a mobile device, use code to redirect to another page
This tutorial has 2 parts:
* Instructions on how to get set up, including code you can copy and paste onto your page
* An explanation of what each line of code does
### Instructions
1. Go to your site's home page.
2. Copy the code below and paste it in your page code.
3. Make sure to substitute your mobile home page URL in line 9 where it says 'http://www.myMobileHome.com.'
4. Publish the page to see the redirect in action. (Previewing isn't enough.)
```javascript
import wixLocationFrontend from 'wix-location-frontend';
import wixWindowFrontend from 'wix-window-frontend';
$w.onReady(function () {
setTimeout(function () {
if(wixWindowFrontend.formFactor === "Mobile"){
wixLocationFrontend.to('http://www.myMobileHome.com');
}
}, 7500);
});
```
### Understanding the Code
The code checks the kind of device. If mobile, the code redirects the visitor to a mobile-friendly home page.
Import statements on lines 2 and 3 bring in the APIs we need:
* [`wixWindowFrontend.formFactor`](https://www.wix.com/velo/reference/wix-window.html#formFactor) checks the device type.
* [`wixLocationFrontend.to`](https://www.wix.com/velo/reference/wix-location.html#to) redirects the visitor to the mobile page's URL.
```javascript
// Import statements for the Wix Location Frontend and Window APIs
import wixLocationFrontend from 'wix-location-frontend';
import wixWindowFrontend from 'wix-window-frontend';
```
The redirect occurs after a time delay. This gives the visitor time to see notices on the page you are redirecting from. Line 4 contains the setTimeout function that creates this delay.
```javascript
$w.onReady(function () {
// Adds a time delay so the visitor anticipates the redirect
setTimeout(function () {
...
...
...
// The timeout value is 7500 nanoseconds
}, 7500);
});
```
With an **if** statement on line 10, we check the type of device using `wixWindowFrontend.formFactor`.
```javascript
import wixLocationFrontend from 'wix-location-frontend';
import wixWindowFrontend from 'wix-window-frontend';
$w.onReady(function () {
// Adds a time delay so the visitor anticipates the redirect
setTimeout(function () {
// Checks what kind of device
if(wixWindowFrontend.formFactor === "Mobile"){
// If mobile, we redirect to a mobile-friendly page
wixLocationFrontend.to('http://www.myMobileHome.com');
}
// The timeout value is 7500 milliseconds
}, 7500);
});
```
On line 13, we use `wixLocationFrontend.to` to perform the redirect.
### API List
The following APIs are used in the code in this article. To learn more, see the [API Reference](https://www.wix.com/velo/reference/).
* [wix-window-frontend](https://www.wix.com/velo/reference/wix-window.html)
* [wix-location-frontend](https://www.wix.com/velo/reference/wix-location.html)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Build a Mobile Site with Code
## Article: Displaying Elements in Mobile Only
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/mobile/build-a-mobile-site-with-code.md
## Article Content:
# Velo Tutorial: Displaying Elements in Mobile Only
You can use Velo to control elements so they display only in the mobile version of your site.
The basic steps to set up an element to display only in mobile are:
1. Set the element to be hidden when the page loads.
2. Use code to check if your site is being viewed on a mobile device or a desktop device.
3. If your site is being viewed on a mobile device, use code to display the hidden element.
### Tutorial
#### To set up an element to display only in mobile:
1. Enable coding:
+ **Wix Studio:** If necessary, click  and then **Start Coding**.
+ **Wix Editor:** [Enable Velo Dev Mode](https://support.wix.com/en/article/about-velo-by-wix#to-enable-velo-on-your-site) for your site.
2. Add the element that you want to display only in mobile.
3. With the element selected, select the **Hidden** checkbox in the Properties & Events panel. This sets up the element so that when your page loads this element isn't displayed. Make a note of the **ID** for your element since we'll need to use that a little later.
4. Now we need to check whether your site is being viewed on a mobile device. Open the code editor. You'll see that following is already written.
```javascript
$w.onReady(function () {
// Write your JavaScript here
// To select an element by ID use: $w("#elementID")
// Click "Preview" to run your code
});
```
5. Add a line above the first line and enter the following code. This lets your site work with the `wix-window-frontend` module, which lets you determine the type of device your site is being viewed on.
```javascript
import wixWindowFrontend from 'wix-window-frontend';
```
6. Replace lines 2-6 with the following code. This checks the type of device your site is being viewed on. It then sets the element that you set to be **Hidden** to be displayed for mobile only.
```javascript
if(wixWindowFrontend.formFactor === "Mobile"){
$w("#button8").show();
}
```
7. To make this code work with your element, replace **button8** with the ID for your element that you noted in step 3.
8. When you are done, your code should look like this:
```javascript
import wixWindowFrontend from 'wix-window-frontend';
$w.onReady(function () {
if(wixWindowFrontend.formFactor === "Mobile"){
$w("#your_element's_ID").show();
}
});
```
9. If you have more than one element that you want to display only in mobile:
1. Complete step 3 for each element.
2. Add a line after line 5 in the example above.
3. Copy line 5 and paste it into the new line.
4. Replace the ID of the first element with the ID of the second element.
Now your code should look like this:
```javascript
import wixWindowFrontend from 'wix-window-frontend';
$w.onReady(function () {
if(wixWindowFrontend.formFactor === "Mobile"){
$w("#your_first_element's_ID").show();
$w("#your_second_element's_ID").show();
}
});
```
### API List
The following API is used in the code in this article. To learn more, see the [API Reference.](https://www.wix.com/velo/reference/)
* [wix-window-frontend](https://www.wix.com/velo/reference/wix-window)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Page Rendering
## Article: About the Page Rendering Process
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-page-rendering.md
## Article Content:
# About Page Rendering
Page rendering is when your site's code is converted to a visual layout that's displayed in the browser. It occurs when visitors first enter your site, and for each subsequent page load, as they access different pages within the same site. To enhance performance, Wix render's your site code on the server and in the browser. You can use the [Rendering API](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/rendering/introduction.md) to control where your code runs in the rendering process.
## Supported IDEs
You can implement the Rendering API using:
- The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) (Wix Studio and Wix Editor)
- The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio)
- Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md) (Wix Studio and Wix Editor)
## Rendering process
When a page request is made to the server, the server executes server-side rendering and once completed returns the HTML and all the necessary data to render the page. Once the browser gets the server response it displays the HTML immediately so the page is fully visible, though not yet responsive. Then, the browser runs the same page code again, adding the interactive actions. This double rendering occurs on initial site load, first on the server and then in the browser. Navigating to different pages on the same site, however, typically renders only once in the browser for each page load.
As a result of the double rendering, any code in your `onReady()` function may often execute twice, to provide faster initial loading time to access a site.
## Side effects
Because your `onReady()` runs twice during double rendering, it may produce side effects. For example, if your code inserts an item into a collection, that insertion occurs twice, unless you explicitly add code to prevent that from happening.
To avoid such unwanted side effects, use the [Rendering API](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/rendering/introduction.md) to conditionally control what code runs on the server or browser. You can also use [warmup data](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-warmup-data.md) to further optimize page loading.
## Test your code
Keep the following in mind when testing code that uses Rendering API.
- Rendering never occurs in the server when [previewing](https://support.wix.com/en/article/studio-editor-saving-previewing-and-publishing-your-site#previewing-a-site) your site.
- You can't see logs produced by `console.log()` calls in the [Developer Console](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) or in your browser's [Developer Tools](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/testing-monitoring/testing-troubleshooting/about-debugging-your-code.md) when they are performed on the server.
## See also
- [About warmup data](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-warmup-data.md)
- [Optimize page rendering with warmup data](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/optimize-page-rendering-with-warmup-data.md)
- [Webinar: Planning for scale: large data design considerations](https://youtu.be/BGnpQ_LTHPg?feature=shared&t=1464)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Warmup Data
## Article: About Warmup Data
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-warmup-data.md
## Article Content:
# About Warmup Data
Warmup data is used to optimize [page rendering](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-page-rendering.md) when your site's pages are rendered on both the server and the client, ensuring that costly data operations are done only once.
Generally, the server executes data operations faster than the browser. With warmup data, you can pass the results of your server operations to your client-side code. During client-side rendering, you can write code to check if those operations were already done and set to warmup data, and if the warmup data exists, use it in your code. This prevents the client from performing the same expensive operations again.
Use the [Rendering API](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/rendering/introduction.md) to check whether your code is being run on the client or the server, and the [Warmup Data API](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/warmup-data/introduction.md) to set and get the warmup data.
## Supported IDEs
You can optimize page rendering with `warmupData` using:
- The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) (Wix Studio and Wix Editor)
- The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio)
- Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md) (Wix Studio and Wix Editor)
## Client-side rendering
When working with warmup data it's important to keep in mind that there may be cases where client-side rendering happens before server-side rendering. In such cases, you can't rely on the warmup data being set on the server, and need to execute those operations directly on the client-side.
Note that you can only perform the following operations on the client-side:
+ Accessing the browser's storage
+ Using 3rd-party analytics
+ Creating dynamic event handlers
+ Retrieving information about the client's browser
+ Navigating to another page
## See also
- [About page rendering](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-page-rendering.md)
- [Optimize page rendering with warmup data](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/optimize-page-rendering-with-warmup-data.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Optimize Page Rendering with Warmup Data
## Article: Optimize Page Rendering with Warmup Data
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/optimize-page-rendering-with-warmup-data.md
## Article Content:
# Optimize Page Rendering with Warmup Data
Use [warmup data](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-warmup-data.md) to speed up your site's [page rendering](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-page-rendering.md) by reducing the number of data operations that occur during client-side rendering.
Follow this procedure to make a data query that is called only once during server-side rendering. The query results are sent as warmup data for display during client-side rendering. If the data query was not made during server-side rendering, it is called for the first time during client-side rendering.
1. Add your import statements.
```javascript
import wixData from 'wix-data';
import wixWindowFrontend from 'wix-window-frontend';
```
2. Define a `getData()` function that makes a `wixData` query. Use [`warmupData.set`](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/warmup-data/set.md) to conditionally set the query results as warmup data if the query is being made during server-side rendering.
```javascript
async function getData() {
const results = await wixData.query("myCollection")
.find();
if (wixWindowFrontend.rendering.env == "backend") {
wixWindowFrontend.warmupData.set("myWarmupData", results.items);
}
return results;
}
```
3. In your `onReady()` code, store your data in a variable called `dataResults`. Retrieve the warmup data by calling `warmupData.get`. If server-side rendering does not occur, `dataResults` should default to the return value of `getData()`.
```javascript
$w.onReady(async function () {
const dataResults = wixWindowFrontend.warmupData.get("myWarmupData") || await getData();
// Use your data as needed.
});
```
In this example, the `dataResults` variable is populated with the results of the query in all cases. When possible, we have optimized performance by using the warmup data initially fetched on the server, instead of running the query a second time during client-side rendering.
The full page code looks like this:
```javascript
async function getData() {
const results = await wixData.query("myCollection")
.find();
if (wixWindowFrontend.rendering.env == "backend") {
wixWindowFrontend.warmupData.set("myWarmupData", results.items);
}
return results;
}
$w.onReady(async function () {
const dataResults = wixWindowFrontend.warmupData.get("myWarmupData") || await getData();
// Use your data as needed.
});
```
## See also
- [About page rendering](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-page-rendering.md)
- [About warmup data](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/page-rendering/about-warmup-data.md)
- [Warmup Data API](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/warmup-data/introduction.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About the URL Structure of Premium and Free Sites
## Article: About the URL Structure of Premium and Free Sites
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/urls/about-the-url-structure-of-premium-and-free-sites.md
## Article Content:
# About the URL Structure of Site Pages
Understanding the URL structure of Wix site pages is crucial for tasks such as routing, linking, SEO, and query parameter manipulation.
## Sample URLs
The structure of the URLs differ between Wix premium sites and Wix free sites:
- **Premium sites**: Use a custom domain, such as `domain.com`:
`https://domain.com/animals/mammals/elephant?species=african-elephant`.
- **Free sites**: Reflect the Wix editor as the domain followed by the site name, such as `user.wixstudio.io/zoo` for Wix Studio sites and `user.wixsite.com/zoo` for Wix Editor sites.
- **Wix Studio**: `https://user.wixstudio.io/zoo/animals/mammals/elephant?species=african-elephant`
- **Wix Editor**: `https://user.wixsite.com/zoo/animals/mammals/elephant?species=african-elephant`
You can get the full site URL, as well as its parts, using the [Wix Location Frontend API](https://dev.wix.com/docs/velo/api-reference/wix-location-frontend/url.md).
## Key parts of a URL
| Term | Description | Example |
|-------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------|
| **Protocol**| Standard part of the URL that indicates the protocol used to access the resource. | `https://` |
| **Base URL**| Represents the root domain of your site. Premium sites use a custom domain, while free Wix sites include the editor followed by the site name. | Premium: `domain.com`Free (Wix Studio): `user.wixstudio.io`
Free (Wix Editor): `user.wixsite.com` | | **Prefix** | Component used for dynamic paths and router pages. Prefixes are useful for [making Dynamic Page URLs](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/dynamic-pages/making-dynamic-page-urls-meaningful-with-prefixes.md), or for determining which incoming requests the [router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) handles. | `/animals` | | **Path** | The path typically follows the base URL or the prefix, if a prefix exists. For dynamic pages and router cases, paths are used for structure or to encode information to indicate what dynamic content to show. | `/mammals/elephant` | | **Query** | Query parameters are key-value pairs appended to the URL to pass additional data. | `?species=african-elephant` | ## See also - [Wix Location Frontend API](https://dev.wix.com/docs/velo/api-reference/wix-location-frontend/url.md) - [Making Dynamic Page URLs](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/dynamic-pages/making-dynamic-page-urls-meaningful-with-prefixes.md) - [Routers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About the Site Backend ## Article: About the Site Backend ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/about-the-site-backend.md ## Article Content: # About the Site Backend When you build a site on the Wix Dev Platform, you get access to a zero-setup, serverless backend environment. Experience lightning-fast performance with our powerful Node.js server-side runtime, designed for seamless initialization and code execution. Scale and mobilize your backend operations securely, reliably, and consistently. Here is some of the functionality you can implement in your site's backend: + Interface with [Wix APIs](https://dev.wix.com/docs/velo.md) to execute workflows and [handle backend events](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md). + Store and manage your data with Wix's out of the box [database](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/data-api/working-with-the-data-api.md), and the [`wix-data`](https://dev.wix.com/docs/velo/api-reference/wix-data/introduction.md) API, or [integrate with an external database](https://dev.wix.com/docs/develop-websites/articles/databases/external-databases/overview/integrating-external-databases-with-your-wix-site.md). + Seamlessly export backend functions to your site's frontend using [web modules](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md). + Expose REST endpoints from your site's backend using [HTTP functions](https://dev.wix.com/docs/velo/api-reference/wix-http-functions/introduction.md). --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: About Web Modules ## Article: About Web Modules ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md ## Article Content: # About Web Modules Web modules are backend files with a `.web.js` extension. They allow you to write backend functions that you can easily [call from the frontend](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-the-frontend.md). Use web modules for calling backend code from the frontend: + To protect code that may expose sensitive data, or business logic, if it runs in the frontend. + To centralize and contain business logic such as 3rd-party API calls and database querying. + To avoid [cross-origin resource sharing (CORS)](http://en.wikipedia.org/wiki/Cross-origin_resource_sharing) restrictions that can occur when calling 3rd-party APIs from the frontend. Web modules cannot be used to export primitive values or objects that you want to import on the frontend. You can create web modules using: - The Code panel in the editor (Wix Studio and Wix Editor) - Wix IDE (Wix Studio) - Your local IDE (Wix Studio and Wix Editor). ## Web methods To expose a function within a web module so that it can be called from the frontend, you need to wrap it in a [web method](https://dev.wix.com/docs/velo/apis/wix-web-module/introduction.md). Web methods provide the mechanism that allows your function to be called asynchronously from the frontend and adds a [permissions](#permissions) check on the caller of your function. Here is what a web method looks like when defined in the backend and called from the frontend: ```js // In a file with the .web.js extension import { Permissions, webMethod } from "wix-web-module"; export const myFunction = webMethod( Permissions.Anyone, () => { // Function logic }); ``` ```js // In frontend code import { myFunction } from "backend/someFile.web"; // ... const fromBackend = await myFunction(); ```
Advanced: How web methods work
When you import a web method on the frontend, you get a proxy function to the web method. This proxy uses an XMLHttpRequest to invoke the function in the backend. The runtime listens to those invocations and calls the appropriate function. The arguments and return value are serialized and deserialized using JSON.**Warning:** Web modules defined using `.jsw` files are deprecated and you will soon be unable to create new `.jsw` files. However, existing `.jsw` web modules will continue work as expected. Switch to [web module defined using `.web.js` files](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-the-frontend.md) for your current and future projects.The following describes how to create, export, and call web module functions. ## Step 1 | Define a function in the backend Add an exported function to an existing `.jsw` file. ```js export myFunction(someParam) { // Some functionality to call from the frontend return `You passed me ${someParam}`; } ``` ## Step 2 | Set permissions Set [permissions](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md#permissions) for each function in the web module if necessary. The default permission is **Anyone**. You can set permissions in the Wix Editor or by editing the permissions.json file, depending on your development environment: ::::tabs :::Wix-Editor To set permissions for a web module function: 1. Hover over your web module, click the more actions menu, and select **Edit Web Module Permissions**. \ The web module permissions panel opens and displays each exported function in your web module. 1. Click the dropdown next to a function name to define its permissions. ::: :::Wix-and-Local-IDE When using the Wix IDE or a local IDE with GitHub integration, you can add and edit permissions using the `permissions.json` file. The `permissions.json` file is located in the `src/backend` folder. The file contains a `"web-methods"` object where each key represents a web module file using the syntax `backend/{path-to-file}/
**Important:** Some service plugins are in Beta. This means that some aren't yet available to all users, and are subject to change. They also aren't available yet in the SDK.Service plugins provide a powerful way to expand what your Wix site can do. You can extend and customize using plugins by: - Injecting your own custom logic into an existing, out-of-the-box app flow. Depending on the plugin, you can address certain aspects of a flow or add a new stage in a flow. - Integrating 3rd-party services into app flows on a site. Service plugins let you customize specific parts of flows in apps created by Wix without rebuilding entire features. For example, instead of creating a custom checkout page using the [Checkout API](https://www.wix.com/velo/reference/wix-ecom-backend/checkout), you can use service plugins to inject custom logic at specific points in the existing flow. ## Examples of service plugins **Custom shipping providers:** When you set up a Wix Store, there are a limited number of payment and shipping rates service providers to choose from. If you want to use a provider not currently on the list, you can create a service plugin that allows you to add more shipping rate providers to your store's checkout flow. This type of service plugin involves integrating with a 3rd-party service provider. **Additional checkout fees:** The default eCommerce checkout process doesn't allow you to add additional fees that aren't related to specific line items. You can use a service plugin to add extra fees, like charges for gift wrap or fragile items, to your checkout flow. This type of service plugin involves injecting your own logic into an existing flow in an app created by Wix. ## How service plugins work Service plugins fulfill a kind of contract between your code and existing app flows. You, or a 3rd-party service provider, commit to providing data in a certain format, and the app that manages the flow commits to using this data in its flows at specific points. Each service plugin consists of a set of backend code files that utilize API methods for implementation. Apps created by Wix call the methods automatically at specific points in their flows. The methods receive and return data in a specific format. The returned data is then integrated by the app created by Wix into its flow. The [reference documentation](https://www.wix.com/velo/reference/spis/getting-started) for each method indicates at what point in a flow an app triggers the method. The documentation also outlines the data that must be provided as arguments to the method when it's triggered, and the format of the data that the method must return. Here's how it works: 1. At certain points, an app's activity on your Wix site triggers a call to a service. 2. When triggered, the Wix platform passes the information in the request to the provider. The provider needs this information to provide the service to the Wix platform. 3. Wix processes the request for the service according to the implementation defined in the service plugin files in the backend. 4. The service provider returns the needed information and the Wix platform consumes and/or displays the information. For example: 1. Whenever a customer checks out a cart, the Wix eCommerce app calls the `calculateAdditionalFees()` method. 2. The service provider receives the parameters that it needs from Wix eCommerce, such as the cart and line items. 3. The service provider then returns data about additional fees in a specific structure. The app uses the data received from the method response to display additional fees in a customer's checkout flow. You can add any custom logic to calculate the additional fees as long as the method returns your data in the proper structure. ## Legal notices If you connect to a 3rd-party provider using service plugins, you agree to the [Wix.com Terms of Use](https://www.wix.com/about/terms-of-use). Wix is not responsible for your use of such a 3rd-party provider, and any liability resulting from such use will be your responsibility. ## When to use service plugins vs APIs Without service plugins, if you want to change your out-of-the-box app flow just a little, you might have to rewrite large parts of the flow, such as creating a custom checkout page using the [Wix eCommerce Checkout API](https://www.wix.com/velo/reference/wix-ecom-backend/checkout). This could involve writing many lines of code and creating custom collections. Because service plugins only affect a small part of an app's flow, service plugin methods require fewer lines of code and less maintenance than when working with APIs. So wherever possible, you want to use service plugin methods. For more information, read [Understanding the difference between service plugins and APIs](https://medium.com/wix-engineering/let-others-solve-your-problems-change-your-mindset-from-apis-to-spis-781afa48574f). ## Terminology | Term | Description | | ---- | ----------- | | Service plugins (formerly SPIs and custom extensions) | A feature that lets you extend the services provided on a site using code. You can make these plugins by adding your own custom logic into a flow for an app created by Wix, or by adding data received from a 3rd-party service provider into a flow for an app created by Wix. You implement service plugins by adding files to backend code files to a site. These files contain code for your custom logic method calls that trigger at specific points in the flow for the app created by Wix. These custom logic method calls use a type of API that defines a service, but leaves the implementation of that service to service providers. | | Service provider | The entity providing a service, for example, a shipping company. The service is either a custom service or a 3rd-party service. | | Wix user | You, the Wix user or collaborator responsible for developing the code needed for the service plugin. Your code uses your own custom logic or accesses a service provided by a 3rd-party service provider. | | Service | Any additional functionality you add to the site that's not part of the original flow in an app created by Wix. The Wix user codes the interface to the service with the service plugin feature. The Wix user or a 3rd-party can write the service. If a 3rd-party provides the service, the Wix user writes the code for the interface by [accessing 3rd-party APIs](https://support.wix.com/en/article/velo-accessing-3rd-party-services-with-the-fetch-api) with [wix-fetch](https://www.wix.com/velo/reference/wix-fetch), and/or using [npm packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md). | | App created by Wix | The app created by Wix whose functionality you extend. For example, Wix eCommerce has several Service Plugins available for customizing its flows. | ## See also - [Implement service plugins](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/implement-service-plugins.md) - [Understanding the difference between service plugins and APIs](https://medium.com/wix-engineering/let-others-solve-your-problems-change-your-mindset-from-apis-to-spis-781afa48574f) - [Available service plugins](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/available-service-plugins.md) - [Service plugins reference documentation](https://www.wix.com/velo/reference/spis/getting-started) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Implement Service Plugins ## Article: Implementing Service Plugins ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/implement-service-plugins.md ## Article Content: # Implement Service Plugins Implement [service plugins](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/about-service-plugins.md) to extend the functionality of apps created by Wix on a site. > **Note:** You currently can't add the service plugin feature to a site when using Git Integration & CLI, or using the SDK. The process of implementing a service plugin has 5 steps: 1. [Creating a service plugin on a site](#step-1--create-a-service-plugin-on-a-site) 2. [Implementing and testing your custom code](#step-2--implement-your-service-plugin-with-custom-code) 3. [Testing the service plugin](#step-3--test-the-service-plugin) 4. [Deploying the service plugin](#step-4--deploy-the-extension) 5. [Removing an extension](#step-5--optional-remove-an-extension) The end result is a functional service plugin that extends a site's capabilities at specific points in app flows. For detailed instructions, see the tutorial for each [available service plugin](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/service-plugins-formerly-spis/available-service-plugins.md). ## Step 1 | Create a service plugin on a site This step adds a service plugin to a site and creates the necessary folder structure. At the end of this step, you'll have a service plugin folder with template files ready for customization. To create a service plugin on a site: 1. If necessary, add the relevant app to a site, such as Wix Stores. 2. Go to the **Public & Backend** section of the **Code** sidebar. 3. Hover over **Service Plugins**, and click the **Add** icon to add the integration that you want. 4. Follow the prompts to add the plugin, and accept any terms and conditions that display. 5. Enter a name for your integration, and click **Add & Edit Code**. The name can't contain spaces or special characters. > **Note:** If you're using the Wix IDE, your plugin appears in the `/src/backend/service-plugin/
Important: Custom site APIs are only intended for use in server-to-server communications. For example, don't use custom site APIs to set a cookie on a site visitor's browser as you may no longer be in compliance with applicable data privacy regulations.For example, you might use custom site APIs to: - Integrate your site with an automation tool, such as [Zapier](https://zapier.com/) or [IFTTT](https://ifttt.com/). - Receive notifications or information from external webhooks or services. - Share a backend between your site and another application. ## Supported IDEs You can write http functions using: + The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor). + The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio). + Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md) (Wix Studio and Wix Editor). ## HTTP functions The main components of an HTTP function are: - [HTTP method](#http-method) - [Function name](#function-name) - [Request parameter](#request-parameter) - [Functionality](#functionality) - [Response object](#response-object) ```js export function
Tip: You can also create the file with the following shortcut: 1. Click on the + next to **Backend**. 1. Click **Expose site API**.## Step 2 | Create and export your HTTP function Your function's name must include the following parts joined by an underscore: - The [method](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/exposing-services/methods-for-http-functions.md) that should be used when calling your custom site API. - The [`functionName`](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/exposing-services/site-api-calls.md#variables) that should be used in your custom site API's URL. ```js export function
Important: The endpoints in this article call custom site APIs without [authentication context](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/exposing-services/about-custom-site-apis.md). You can [call your custom site APIs with authentication context](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/integrations/exposing-services/about-custom-site-apis.md) using the HTTP Functions [REST API](https://dev.wix.com/docs/rest/assets/http-functions/rest/introduction.md) or [SDK module](https://dev.wix.com/docs/sdk/backend-modules/http-functions/functions/introduction.md).## Variables You need to define the following variables to construct your API calls. ### `baseUrl` The base URL of the site hosting the HTTP functions: - **Premium sites**: `https://www.
__Important:__ By installing an npm package, you agree to that npm module's license agreement.To install an npm package in the editor: 1. Navigate to **Packages & Apps** in the code panel. 1. Hover over **npm** in Packages & Apps, click the plus icon , and select **Install npm package**. The Package Manager opens. Note that the 10 most popular npm packages used on Wix sites are displayed in the Package Manager.
**Important:** After changing a package's version, make sure that the code on your site is compatible with the updated version of the package.To change a package version in the editor: 1. Navigate to **Packages & Apps** in the code panel. 1. Hover over **npm** in Packages & Apps, click the plus icon , and select **Install npm package**. 1. In the Package Manager, select **Installed Packages**. 1. Hover over the package you want to update, click the **More Actions**  icon, and select **Choose a version**.  2. Find the version you want and click **Install**.  ## Uninstall a package You can uninstall npm packages that you no longer need.
**Warning:** When you uninstall a package, make sure to update any code that relies on that package.To uninstall a package in the editor: 1. Navigate to **Packages & Apps** in the code panel. 2. In the npm section, hover over the package you want to uninstall, click the **More Actions**  icon, and select **Uninstall**. ## See also - [About packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-packages.md) - [About npm packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md) - [Work with npm packages with the Wix CLI for Sites](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-with-the-wix-cli.md) --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Work with npm Packages with the Wix CLI ## Article: Work with npm Packages with the Wix CLI ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-with-the-wix-cli.md ## Article Content: # Work with npm Packages with the Wix CLI for Sites Wix allows you to install [npm packages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-npm-packages.md) on your site. This article explains how to install, update, and uninstall npm packages in your local IDE with the Wix CLI for Sites. You can also [use npm packages in the editor or the Wix IDE](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/work-with-npm-packages-in-the-editor.md). ## Install an npm package Before using an npm package, you need to install it on your site.
__Important:__ By installing an npm package, you agree to that npm module's license agreement.To install a package in your local IDE with the Wix CLI for Sites: 1. Open a terminal to your project's root directory. 2. Install the package of your choice by running the following command: ```bash wix install
**Important:** After changing a package's version, make sure that the code on your site is compatible with the updated version of the package.To update a package to its latest version with the Wix CLI for Sites: 1. Open a terminal to your project's root directory. 2. Update the package of your choice by running the following command: ```bash wix update
**Warning:** When you uninstall a package, make sure to update any code that relies on that package.To uninstall a package using the Wix CLI for Sites: 1. Open a terminal to your project's root directory. 2. Uninstall the package of your choice by running the following command: ```bash wix uninstall
3. In the **Built by Wix** tab, search for the package you want to add to your site. Note that you can view the README for each package on the right side of the Package Manager.
4. Click **Install**. The **Install** button changes to a **View** button, and you can see an option to turn on automatic updates for future minor versions. When this option is turned on, you won't need to do anything if there are any minor updates to the package. When this option is turned off, you'll have to manually update the package if there are any minor updates to the package.
Clicking **View** directs you to the **Packages & Apps** section of the Code sidebar (Wix Editor) or Code sidebar (Wix Studio) where you can see the installed Velo package. If there is a major update available for a package installed on your site, or if there is a minor update available and the automatic updates option toggle is turned off, you'll see a blue dot next to the package.
>**Note**
> By installing a Velo Package that uses an npm package, you agree to that npm module's license agreement.
### Using an Installed Package
Once you install a package, read the package's README file. The README includes all the information you need to work with the package: initial setup prerequisites, which exported functions are available for use, and how to use the package.
To use the package functions, you'll need to import them in your code.
Use the **@velo namespace** to import Velo packages. Note that import statements within the **@velo namespace** differ depending on the location and type of package file the function is exported from.
To import backend functions, use the following syntax:
```javascript
import { } from '@velo/-backend';
```
For example, assuming the **twitter-integration** package has been installed, you can use its **tweet()** function as follows:
```javascript
import { tweet } from '@velo/twitter-integration-backend';
```
To import public functions, use the following syntax:
```javascript
import { } from '@velo/';
```
For example, assuming the **wix-data-helpers** package has been installed, you can use its **getRandomItem()** function as follows:
```javascript
import { getRandomItem } from '@velo/wix-data-helpers';
```
The Package Manager opens and you can see the available update.
2. In the README on the right side of the Package Manager, scroll down to the Release Notes section to view the relevant changes for this update.
3. If you want to update the package, click **Update to X.X.X**.
You can view all versions of a package by clicking the ellipsis icon **>** **See all versions**.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Custom Apps
## Article: Working with Your Velo Packages
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-custom-apps.md
## Article Content:
# About Custom Apps
> **Note:** Custom apps replace Velo packages built by you. Now, instead of creating packages, functionality is managed as apps.
Custom apps are applications you create using [Wix Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/about-wix-blocks.md) to add functionality that can be used across multiple Wix sites. Your custom apps are private and only you can install them on sites where you're a site contributor. Once installed, all site contributors can access the functionality of the custom app.
Using custom apps allows you to unify the following functionality across your sites:
- Widgets
- Code
- [Dashboard extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/about-dashboard-extensions.md)
- [Collections](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/cms-collections-in-blocks/about-cms-collections-in-blocks.md)
For example, you might use custom apps to do the following across your sites:
- Ensure a standardized visual design.
- Centralize and reuse custom logic and code.
- Add and manage custom dashboard features.
- Use uniform data structures and content setups.
## Supported IDEs
You can use and access functionality from your custom apps using:
- The editor (Wix Studio and Wix Editor)
- The Wix IDE
- Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md)
> **Note:** You must have a Wix Studio account to create a Blocks app.
## Accessing custom app functionality on a site
Install and manage your custom apps, including the version installed on the site, under **Custom Apps** when you click **App Market**  in the Editor.
Once installed, a custom app's functionality is automatically available on your site. To learn how to access the functionality, see [Install a Blocks App on a Site](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/deploy-and-manage-blocks-apps/install-a-blocks-app-on-a-site.md#change-the-installed-app-version).
## See also
- [Install a Blocks app on a site](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/deploy-and-manage-blocks-apps/install-a-blocks-app-on-a-site.md#change-the-installed-app-version)
- [About Wix Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/about-wix-blocks.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Routers
## Article: About Routers
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md
## Article Content:
# About Routers
Wix gives you the ability to display multiple items from your data collection with [dynamic pages](https://support.wix.com/en/article/cms-about-dynamic-pages). In your site editor, you see only one dynamic item page, but visitors to your site see multiple pages with the same design, each rendering a different item from your collection. You can set a unique URL for each of these item pages.
Behind the scenes, Wix creates a router that handles incoming requests to the dynamic page and directs the client to the correct URL. Wix also handles SEO for you in the background. However, if you prefer to handle requests with your own custom logic, you can create your own router.
With your own router, you have full control over how your site handles incoming requests, as well as the SEO for dynamic pages. You set up a router to receive all incoming requests with a specified prefix, and define the logic of what to do when a request with that prefix is received. You decide what actions to perform, what response to return, where to route the request, and what data to pass to the page.
You might want to use a router to:
* Display a dynamic page using content from any data source.
* Customize your URLs to make them more meaningful and yield better SEO results.
* Authenticate users and then display content just for them.
* Return custom HTTP response codes.
In the following sections, we review the important components of creating a router for your site.
## Supported IDEs
You can create routers using:
* The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor).
* The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md).
* Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md) (Wix Studio and Wix Editor).
## URL prefix
When you create a router, you specify a URL path prefix that follows your site's domain name. The prefix is the part of the URL shown in angle brackets in the following examples:
* Premium site: `https://domain.com//category/item`
* Free site: `https://user.wixsite.com/yoursite//category/item`
This URL prefix determines which incoming requests your router handles. If your site receives a request with the specified prefix, it sends that request to your router for handling.
The URL prefix is also used as the name for the router functions and pages.
## Routing code
When you create the first router on your site, Wix automatically adds a file called `routers.js` to your site's backend folder. In this file, you write all your logic for handling incoming requests.
`routers.js` contains two functions that are the entry points to your router. They are named with the following convention:
* `_Router(request)`
* `_Sitemap(sitemapRequest)`
Note that if you add any more routers to the site, Wix adds the functions for them in the same file. For example, if you add `myRouter1` and `myRouter2` to the site, you'll see the following functions in your `routers.js` file:
* `myRouter1_Router(request)`
* `myRouter1_Sitemap(sitemapRequest)`
* `myRouter2_Router(request)`
* `myRouter2_Sitemap(sitemapRequest)`
You then write the logic for each router in its respective set of functions.
### router()
The [`router()`](https://dev.wix.com/docs/velo/api-reference/wix-router/introduction.md) function is where the site sends page requests with the defined prefix. The router receives a `WixRouterRequest` object containing information about the incoming request, such as the full URL used to reach the router, and where the request came from. The function then decides what to do with the request and returns the appropriate `WixRouterResponse`. Typically, the `router()` function will decide which page to show (if any) and what data to pass to the page. The response is then sent using the `forbidden()`, `notFound()`, `ok()`, `redirect()`, or `sendStatus()` functions.
### sitemap()
Your sitemap is what Google uses to find your site's pages. Pages on your site that don't belong to a router are automatically added to your sitemap for you. However, since you control what pages are available through your router, you need to create your own sitemap for these router pages. The router sitemap contains all possible URLs that are connected to your router's prefix, so that Google can find each router page.
The [`sitemap()`](https://dev.wix.com/docs/velo/api-reference/wix-router/sitemap.md) function handles the SEO and sitemap requests for your router. In the code for your `sitemap()` function, you need to create and return a [`WixRouterSitemapEntry`](https://dev.wix.com/docs/velo/api-reference/wix-router/wix-router-sitemap-entry.md) object for each router page. This ensures search engines can find the links to your router's pages.
As with [SEO for regular pages](https://support.wix.com/en/article/understanding-your-pages-default-seo-settings), you can define the page title, description, and social network images for router pages. The difference is that since router pages don't contain static data, their SEO information must be set dynamically, so they reflect the real content they will hold when they are viewed.
Each `WixRouterSitemapEntry` includes information about a page, such as its URL, title, and name. You can also add additional information about each page, such as how often its content changes, when the last change was, and its relative priority within your site. Google uses the sitemap entries to discover all the pages in your router.
The `sitemap()` function is also used to populate the items preview widget when you're previewing or editing your site, allowing you to switch between dynamic item pages.
## Router data
Your `router()` function may send data to the pages it routes to. You can access that data in the frontend page code using the [`getRouterData()`](https://dev.wix.com/docs/velo/api-reference/wix-window-frontend/get-router-data.md) function of the `wix-window-frontend` module.
## See also
* [Create a router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/create-a-router.md)
* [About SEO and routing](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/add-seo-to-your-router.md)
* [Tutorial: Create dynamic pages with a custom router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/tutorial-create-dynamic-pages-with-a-custom-router.md)
* [About Router Caching](https://dev.wix.com/docs/develop-websites/articles/best-practices/caching/about-router-caching.md)
* [wix-router API](https://dev.wix.com/docs/velo/api-reference/wix-router/introduction.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Create a Router
## Article: Creating a Router
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/create-a-router.md
## Article Content:
# Create a Router
Creating a [router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) allows you to customize how your site handles certain incoming requests. This article shows you how to create a router for your site.
## Step 1 | Add the router in the site editor
Whether you're working in the editor, [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md), or your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli-for-sites/about-git-integration-wix-cli-for-sites.md), in order to add a router to your site you must first set it up in the site editor. If you skip this step, Wix won't create the frontend router pages that are displayed to site visitors, and you won't have another way to add them. Once you create your router in the site editor, you can add the code in your preferred IDE.
The following steps explain how to add a router to your site:
**Wix Studio**:
1. Make sure you [enable coding](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) on your site.
1. Click the **Pages** icon  to open the **Site Pages** panel.
1. Click the **Add New Page** icon . Then, click **Add** under Router.
>**Note:** You can also add a router from the **Page Code** section of the code panel. Hover over **Main Pages**, click the plus icon , and then click **Add a Router**.
1. Enter a [URL prefix](https://support.wix.com/en/article/velo-about-routers#url-prefix) for your router and click **Add & Edit Code** to add the router to your site. All incoming requests with the specified URL prefix will be sent to your router for handling.
**Wix Editor**:
1. In the sidebar, go to **Page Code** > **Main Pages**. Click on the  icon at the top of the **Main Pages** section, and choose **Add a Router**.
2. Enter a [URL prefix](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) for your router and click **Add & Edit Code**. All incoming requests with the specified URL prefix will be sent to your router for handling.
After you add a router, the following occurs:
**If you're working in the editor:**
* Your router's [`router()`](http://wix.to/94BuAAs/wix-router.html#router) and [`sitemap()`](http://wix.to/94BuAAs/wix-router.html#sitemap) functions are added in a `routers.js` file with sample code for a simple routing scenario. The `routers.js` file is located in the **Backend & Public** section of the code panel.
* A new section called **Router Pages** is created in the **Page Code** section of the code panel. Router pages are grouped together under a title based on the prefix you chose earlier. One router page is created to start with. For example, if you named your router "myRouter", a page named **myRouter-page** is added under the title **MyRouter Pages (Router)**.
**If you're working in the Wix IDE:**
* Your router's [`router()`](http://wix.to/94BuAAs/wix-router.html#router) and [`sitemap()`](http://wix.to/94BuAAs/wix-router.html#sitemap) functions are added in a `routers.js` file with sample code for a simple routing scenario. The `routers.js` file is located in `src/backend`.
* In the site editor, a new section called **Router Pages** is created in the **Page Code** section of the code panel. Router pages are grouped together under a title based on the prefix you chose earlier. One router page is created to start with. For example, if you named your router "myRouter", a page named **myRouter-page** is added under the title **MyRouter Pages (Router)**.
Add any router pages in the site editor. In the Wix IDE, those pages then appear under `src/pages`. Note that in the Wix IDE the router pages aren't grouped by router, so if you create more than one router, name each router page clearly to avoid confusion.
**If you're working in your local IDE:**
* A modal opens in your site editor containing sample code and instructions on how to add the code to your site. We recommend copying the code to make sure your router and sitemap functions are set up correctly.
* A new section, **Router Pages**, is created in **Page Code** section of the code panel. Router pages are grouped together under a title based on the prefix you chose earlier. One router page is created to start with. This page and any other router pages you create are added to your github repository. You can then pull them to your local repo and write the code in your IDE.
> **Note:** Certain module export formats are not supported in `routers.js`. For more information, see [Module Export Syntax](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/module-export-syntax.md).
## Step 2 | Coding the router
Once you add the router to your site, you need to add code for it. The code for the router works the same way no matter which IDE you're working in. All your router logic goes in the `routers.js` file.
There are four parts to the sample code that's added to the `routers.js` file:
1. **The `import` statement:** The default code imports some basic router functionality from the [Router API](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/introduction.md), including the [`ok()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/ok.md) and [`notFound()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/not-found.md) functions, as well as the [`WixRouterSitemapEntry`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-sitemap-entry.md) object.
```javascript
import {ok, notFound, WixRouterSitemapEntry} from "wix-router";
```
Keep this `import` statement when you customize your code, and use it to add any further functionality from the Router API. You may also need to import additional modules, such as the [Wix Data API](https://dev.wix.com/docs/velo/apis/wix-data/introduction.md).
2. **The sample data:** The sample code includes an object called `peopleData`, which is the data the sample router displays on the router page. For your own code, delete or replace this object. You can use the Data API to [retrieve data items](https://dev.wix.com/docs/velo/apis/wix-data/query.md) from a collection, as explained in our [router tutorial](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/tutorial-create-dynamic-pages-with-a-custom-router.md).
3. **The [`router()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/router.md) function:** Every time you add a router to your site, Wix adds a `router()` function for it in `routers.js`. The first `router()` function added contains sample code like this:
```javascript
export function myRouter_Router(request) {
// Get item name from URL request
const name = request.path[0];
// Get the item data by name
const data = peopleData[name];
if (data) {
//define SEO tags
const seoData = {
title: data.title,
description: `This is a description of ${data.title} page`,
noIndex: false,
metaTags: [
{"og:title": data.title,
"og:image": data.image,
content: "People Data"
}
]
};
// Render item page
return ok("myRouter-page", data, seoData);
}
// Return 404 if item is not found
return notFound();
}
```
Let's quickly review what the sample code is doing:
**Lines 3-6:** The router gets the path from the `request` parameter, which is a [`WixRouterRequest`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-request/introduction.md) object, and searches for it in the `peopleData` object.
**Lines 8-27:** If it finds the requested name, it creates a [`HeadOptions`](https://www.wix.com/velo/reference/wix-router/wixrouterresponse/head) object that defines what goes in the HTML head of the page we respond to the request with. That object is stored in the `seoData` variable. The router then passes the data from `peopleData` and `seoData` to the [`ok()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/ok.md) function, which renders the requested page to the visitor.
**Line 31:** If the person isn't found in `peopleData`, the router returns a 404 page by using the [`notFound()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/not-found.md) function.
Build off the code above to customize your `router()` function:
1. Replace lines 3-6 with your own code to retrieve data from an external source or a collection on your site.
1. Change the conditional statement to match your own router logic. For example, if you need to display either an index or an item page, build a logical statement that renders one or the other based on the contents of the `path` parameter.
1. Change the [`HeadOptions`](https://www.wix.com/velo/reference/wix-router/wixrouterresponse/head) object to generate your SEO data. You can use any information you want to create the object. For example, the sample code creates `title` and `description` properties based on data from `peopleData`. You can create your own properties from the data you retrieve and populate `metaTags` with this data as well.
You also have the option, as in the sample code, to set `noIndex` to false, meaning search engines should index the page, or add a `keywords` property to the [`HeadOptions`](https://www.wix.com/velo/reference/wix-router/wixrouterresponse/head) object with a string containing the page's keywords.
1. Your router function must return a [`WixRouterResponse`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-response/data.md) object. This object is responsible for telling the router which page to display on the frontend when a visitor makes a request:
* Use the `ok()` function to render a requested page if it exists. Pass three arguments to `ok()`:
* The name of the router page to render.
* A data object containing the data to pass to the router page.
* An object containing SEO data for the router page.
* Use the `notFound()` function if the requested page isn't found. You can also use the [`forbidden()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/forbidden.md), [`redirect()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/redirect.md), or [`sendStatus()`](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/send-status.md) functions.
4. **The [`sitemap()`](http://wix.to/94BuAAs/wix-router.html#sitemap) function:** Along with the `router()` function, Wix also adds a `sitemap()` function to `routers.js` every time you add a router. As with `router()`, the first `sitemap()` function added includes sample code that you should replace with your own.
Let's take a look at the sample code in the `sitemap()` function:
```javascript
export function myRouter_SiteMap(sitemapRequest) {
// Convert the data to site map entries
const siteMapEntries = Object.keys(peopleData).map((name) => {
const data = peopleData[name];
const entry = new WixRouterSitemapEntry(name);
entry.pageName = "myRouter-page"; // The name of the page in the Wix Editor to render
entry.url = `/myRouter/${name}`; // Relative URL of the page
entry.title = data.title; // For better SEO - Help Google
return entry;
});
// Return the site map entries
return siteMapEntries;
}
```
**Lines 3-10:** The code takes the keys of the `peopleData` sample object and uses the JavaScript `map()` function to create an array of [`WixRouterSitemapEntry`](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/add-seo-to-your-router.md) objects, one object for each key. Each entry is given values for the `pageName`, `url`, and `title` properties. Then the array is wrapped in a `Promise` and returned.
Replace the sample code with code of your own that generates `WixRouterSitemapEntry` objects for each page. Then return these objects for SEO to use.
Once you complete these steps, you have a working router. Publish your site and make page requests to test the router.
## See also
* [About routers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md)
* [About SEO and routing](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/add-seo-to-your-router.md)
* [Tutorial: Create dynamic pages with a custom router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/tutorial-create-dynamic-pages-with-a-custom-router.md)
* [About Router Caching](https://dev.wix.com/docs/develop-websites/articles/best-practices/caching/about-router-caching.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Add SEO to Your Router
## Article: About SEO and Routing
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/add-seo-to-your-router.md
## Article Content:
# Add SEO to Your Router
This article explains how to configure [SEO for your router pages](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md#sitemap). There are two parts to setting up the SEO:
1. Create meta tags for Google to learn about your pages.
1. Create a sitemap for Google to use to find your pages.
## Step 1 | Set meta tags for router pages
You set SEO meta tags for your router's pages in the `router()` function in [`routers.js`](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md#routing-code):
1. Within the `router()` function, create an object that contains your desired SEO settings. This will become the [`HeadOptions`](https://www.wix.com/velo/reference/wix-router/wixrouterresponse/head) object that you pass to the router page.
Use the provided sample code in the `router()` function as a starting point:
```javascript
let seoData = {
title: data.title,
description: "This is a description of " + data.title + " page",
noIndex: false,
metaTags: {
"og:title": data.title,
"og:image": data.image,
},
};
```
The example object contains several properties that are set using the data it retrieves in the `router()` function, including the following:
- The `title` property, which contains the page’s SEO title.
- The `description` property, which contains a short description of the page’s content.
- A `noIndex` flag, set to `false`. This tells Google that it should index your page.
- Additional meta tags contained in the `metaTags` property. You can add meta tags to this property.
Keep or remove these properties, and add your own as needed.
> **Note:** The `HeadOptions` object can also contain a `keywords` property, but Google ignores your site's keywords.
2. Once you’ve created your `HeadOptions` object, pass it to the `ok()` function as the third parameter. This object is then sent to the router page so that Google has SEO information for it.
This sample code shows an example of passing the `HeadOptions` object defined above to **myRouter-page**:
```javascript
return ok("myRouter-page", data, seoData);
```
## Step 2 | Create the sitemap for your router
To add your router pages to your sitemap, do the following:
1. In your router’s `sitemap()` function, create a [`WixRouterSitemapEntry`](https://dev.wix.com/docs/velo/api-reference/wix-router/wix-router-sitemap-entry.md) object for each URL the router can possibly route to. Use the sample code added to your first `sitemap()` function as a starting point:
```javascript
let siteMapEntries = Object.keys(peopleData).map((name) => {
const data = peopleData[name];
let entry = new WixRouterSitemapEntry(name);
entry.pageName = "myRouter-page";
entry.url = "/myRouter/" + name;
entry.title = data.title;
return entry;
});
```
Each `WixRouterSitemapEntry` in the example includes the router page’s URL, title, and name. The example code groups them into an array.
2. Return all the sitemap entries to create the router sitemap. Again, you can follow the example in the sample code:
```javascript
return Promise.resolve(siteMapEntries);
```
## Step 3 | Check your router sitemap
To ensure that your sitemap is working properly, you can get the sitemap from your published site:
1. In a web browser, go to your published site's URL and append `/sitemap.xml` to it.
For premium sites, if your site's published URL is: `https://mysite.com`, go to: `https://mysite.com/sitemap.xml`.
For free sites, if your site's published URL is `https://username.wixsite.com/site-name`, go to `https://username.wixsite.com/site-name/sitemap.xml`.
2. Check that the sitemap matches the layout of your router pages.
## See also
- [Create a router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/create-a-router.md)
- [About routers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md)
- [Tutorial: Create dynamic pages with a custom router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/tutorial-create-dynamic-pages-with-a-custom-router.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Tutorial: Create Dynamic Pages with a Custom Router
## Article: Tutorial: Create Dynamic Pages with a Custom Router
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/tutorial-create-dynamic-pages-with-a-custom-router.md
## Article Content:
# Tutorial: Create Dynamic Pages with a Custom Router
When you set up [dynamic pages](https://support.wix.com/en/article/cms-about-dynamic-pages) on your site, Wix creates a router in the background to manage the pages. However, you can also choose to set up your own router to manage your dynamic pages. This gives you more control over how incoming requests to your site are handled.
The [Create a Router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/create-a-router.md) article walks you through the default code that appears when you first add a router to your site. In this tutorial, we'll show you how to alter the router code to create and manage dynamic pages yourself.
We'll create a very basic site for listing real estate properties. We'll then add a router and walk you through the necessary code to create an index page of listings, and a dynamic item page.
In this tutorial we work directly in the editor. However, all of the code and basic website design is relevant if you're working in the Wix IDE or your local IDE. The only differences might be the names and locations of some of the files. If you're having trouble locating some of these files, see our article on [creating a router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/create-a-router.md).
Before you get started, make sure you're familiar with the concepts of [routers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) and dynamic pages.
## Step 1 | Create a new site with a collection and router
In this step, we'll create a new site and add the features we need to build dynamic pages. This includes the following:
* The collection, which we'll fill with data that will be used to populate the dynamic index and item pages.
* The router, which controls the dynamic page that visitors are sent to when they request to see listings on your site.
To start the setup:
1. Create a [new blank site](https://wixstudio.new/).
1. On the homepage, add the following 2 elements:
- Text element: Edit the text element so its text reads "Welcome to our real estate site".
- Button: Click on the button and select **Change Text**. Edit the text to say "Click here to see our listings".
You can leave the page code empty for now; we'll add code for the homepage later.
1. Now we need to [add a collection](https://support.wix.com/en/article/cms-formerly-content-manager-creating-a-collection) to contain the listings we want to display. We'll query the items in this collection to create our dynamic pages.
Name your collection `Real Estate Listings` and make sure it has a matching collection ID `RealEstateListings`. We'll need this ID later to query the collection.
Add the following four fields to the collection:
- **Title**: Text field that contains the name of the listing.
- **Description**: Text field that contains a brief description of the listing.
- **Image**: Image field that contains an image of the property in the listing.
- **Slug**: Text field that contains the slugified name of the listing.
Once you set up your fields, add the following items to the collection exactly as shown in the table:
| Title | Description | Image | Slug |
| ------| ------------ | ------ | ------- |
| Modern urban apartment | This newly built apartment has all the trimmings and appliances you need in the modern-day city. | wix:image://v1/11062b_1c8c953e6532482b974d6b30961091e2~mv2.jpg/Loft%20Style%20Apartment.jpg#originWidth=4000&originHeight=2667 | modern-urban-apartment |
| Beach house | Imagine stepping outside your house and you're right on the beach. You can now achieve that dream with this piece of property. | wix:image://v1/d4dde1_954ed2d26fb14166ad634c0299d0ed2c~mv2.jpg/Large%20house%20right%20next%20to%20the%20sea.%20It%20is%20light%20blue%20with%20white%20trim%20and%20doors.%20It%20has%20a%20po#originWidth=500&originHeight=500 | beach-house |
| Cute Cottage | This adorable cottage in the suburbs reminds you of old times outside while keeping a modern feel inside. | wix:image://v1/d4dde1_1f312bbf4d8743a695305a3894ac89fb~mv2.jpg/Cottage%20made%20of%20white%20stone%20with%20a%20small%20green%20lawn%20and%20a%20white%20picket%20fence%20with%20a%20gate.%20#originWidth=500&originHeight=500 | cute-cottage |
| Cozy Cabin | Nestled deep in the woods, this cabin offers the peace and quiet of the wilderness away from the city. | wix:image://v1/d4dde1_0fe31ec5d1bb4ed184ff61fd6b42ce20~mv2.jpg/A%20wooden%20cabin%20nestled%20in%20between%20trees..jpg#originWidth=500&originHeight=500 | cozy-cabin |
1. [Add a router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/create-a-router.md) to your site. Set the URL prefix to `listings`.
1. After you create the router, go to the **Backend & Public** section of the code panel and locate the `routers.js` file. It should contain two functions, `listings_Router` and `listings_SiteMap`, with the sample code discussed in [Create a Router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/create-a-router.md). In addition, check that a router page called `listings-page` now appears in the code panel.
Now that you have created the router, we can start adding code.
## Step 2 | Add dynamic page code
In this step, we'll add page code for the dynamic item and index pages to display our property listings.
In order to have both an index page and an item page, we need to add two router pages. We'll need to add code to both pages. Let's start by coding the index page, which will display all of the listings for visitor selection:
1. In the **Page Code** section of the code panel, under **Router Pages**, find the router page that was created when you first added the router. It should be called `listings_page`. Click on `listings_page` to open it in the editor.
1. Add a [repeater](https://support.wix.com/en/article/wix-editor-adding-and-managing-repeaters-lists-grids) to the page. Select an item in the repeater and open the settings menu. Click **Quick Add** to add an image and a title to the repeater item.
1. Select the repeater so it's highlighted. In the [Properties & Events Panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md), change the ID of the repeater to `listings`.
Repeat this with the IDs of the repeater item as well as the title and image that you added. Give the elements the following IDs:
- Repeater item: `listing`
- Title: `listingTitle`
- Image: `listingImage`
Now we're ready to add some simple code for our dynamic index page.
1. In the code editor for `listings-page`, add the following code:
```js
import { getRouterData } from 'wix-window';
import { to } from 'wix-location';
$w.onReady(function () {
const listings = getRouterData();
$w('#listings').onItemReady( ($item, itemData) => {
$item('#listingImage').src = itemData.image;
$item('#listingTitle').text = itemData.title;
$item('#listing').onClick( () => {
to(`/listings/${itemData.slug}`);
});
} );
$w('#listings').data = listings;
});
```
**Lines 1-2:** Import the `getRouterData()` and `to()` functions. `getRouterData()` receives any data sent by the router so we can render it on the page.
**Line 5:** Receive our router data and store it in the `listings` variable for later use.
**Lines 7-16:** Populate the repeater items with the router data. We create an `onClick()` handler that sends users to the item page when clicked. Depending on the slug passed, the router controls which dynamic item page is rendered.
We have now set up the dynamic index page so that it will display each of the items in the collection. Next, we need to add a second router page that will become our dynamic item page.
1. Under **Router Pages**, click the **More Actions** button next to **Listings Pages (Router)**. Select **Add page to router**.
Label the new page `listing` and click **Add Page**. This creates a second page under the **Listings Pages (Router)**.
1. Select the `listing` page so it appears in the editor. On a real property listing you'll typically include much more detail, such as price and contact information. However, for this example, we'll keep the dynamic item page very simple and just add a single image, title, and description.
Add an image and two text elements to the page, and arrange the elements so the page layout looks like this:
1. In the code editor, open the page code for `listing`. We need to write some code that will accept data from the router and use it to render the correct information for the selected property. To do this we can write the following basic code:
```js
import { getRouterData } from 'wix-window';
$w.onReady(function () {
const listing = getRouterData();
$w('#listingTitle').text = listing.title;
$w('#listingDescription').text = listing.description;
$w('#listingImage').src = listing.image;
});
```
**Line 1:** Again, we import `getRouterData()` to enable our frontend page to receive data from the router.
**Line 4-8:** Get the router data and populate our elements with it.
We now have a functioning dynamic index and item page that will render our collection data based on requests to the router. Our next step is to write the router code so that it handles visitor requests correctly.
## Step 3 | Add the router code
All the logic for your router goes in the router function added to `routers.js`. In this example, we'll write all our code in the `listings_Router()` function. This is the code that actually handles visitor requests. In the case of dynamic pages, the router logic decides which site page is rendered for the visitor.
1. In the code panel, locate the `routers.js` file in the **Public & Backend** section.
The first thing we need to do is import the necessary functions. The sample code already imports several important objects for you from `wix-router`. This includes the `ok()` and `notFound()` functions and the `WixRouterSitemapEntry` object. We'll need to work with the [Wix Data API](https://dev.wix.com/docs/velo/apis/wix-data/introduction.md) to query items from our collection, so we add another line to the import statement:
```js
import {ok, notFound, WixRouterSitemapEntry} from "wix-router";
import wixData from "wix-data"; // Add this line
```
The sample code also includes an object with hard-coded data. You can delete this object as we won't use it in this tutorial.
1. In the `listings_Router()` function, delete the sample code; we'll replace it with our own.
Recall that we have two router pages, an index page and an item page. The router needs to know when to display one or the other. It can figure this out based on the [path](https://dev.wix.com/docs/velo/events-service-plugins/routers/service-plugins/wix-router/wix-router-request/path.md) variable in the `WixRouterRequest` object that the router receives. The path indicates which item page in our router the visitor wants to view. If the `path` variable is empty, it means the visitor has not requested a specific page in the router, so we render the index page.
Therefore we can start by writing an `if` statement that checks the path:
```js
export async function listings_Router(request) {
if (!request.path[0]) {
const { items: listings } = await wixData.query('RealEstateListings').find();
const seoData = {
title: 'Property Listings',
description: 'List of available properties',
noIndex: false
};
return ok('listings-page', listings, seoData);
}
}
```
**Line 2:** Check if `path` is empty.
**Lines 3-5:** We query our data collection for all available listings, and store them in an array called `listings`. We pass the ID of our collection, `RealEstateListings`, to the Wix Data `query()` function to retrieve the collection items.
**Lines 7-11:** Create our SEO data so Google knows how to find and display our index page in its search.
**Line 13:** Call the `ok()` function to go to the index page. We pass it the `listings` data. Recall that we wrote frontend code that will pick up and display this data to the visitor.
https://mysite.wixstudio.io/test-site/dynamic-listings-sitemap.xml
2024-10-14
https://mysite.wixstudio.io/test-site/pages-sitemap.xml
2024-10-14
```
One of the links leads to your router pages. Copy the link and paste it back into the address bar. Navigate to the link to see the sitemap for your router:
```xml
https://mysite.wixstudio.io/test-site/listings/cozy-cabin
2024-10-14
https://mysite.wixstudio.io/test-site/listings/beach-house
2024-10-14
https://mysite.wixstudio.io/test-site/listings/modern-urban-apartment
2024-10-14
https://mysite.wixstudio.io/test-site/listings
2024-10-14
https://mysite.wixstudio.io/test-site/listings/cute-cottage
2024-10-14
```
This is the sitemap generated by your `listings_SiteMap()` function.
In this tutorial, you've created your own router and used it to set up dynamic pages on your site manually. From here you can enhance the site design and adjust it to your needs, and continue building on the router so it can handle more complex tasks.
## See also
* [About routers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md)
* [Create a router](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/create-a-router.md)
* [About SEO and routing](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/add-seo-to-your-router.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Premium Plans
## Article: About Premium Plans
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/about-premium-plans.md
## Article Content:
# About Premium Plans
Wix allows you to extend your site's functionality and customize it to fit your needs. You can handle your site's data using the [Wix Data APIs](https://www.wix.com/velo/reference/wix-data) and [CMS (Content Management System)](https://support.wix.com/en/article/about-the-content-manager-7160473) collections. You can also add custom code to your site using [Velo](https://support.wix.com/en/article/about-velo-by-wix).
Different sites require different amounts of resources, depending on the complexity and volume of their code and data use. Wix offers a number of premium plans that include different levels of data, computing, and developer features. This way, you can choose exactly what you need for your site, depending on its complexity and specific needs.
To better understand what premium features are available, check out:
* [Data platform](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/data-features.md)
* [Compute platform](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md)
* [Developer tools](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/developer-tools-features.md)
[Compare](https://www.wix.com/upgrade/website) the resources included in each plan and find the one that's right for you.
You can also try out many of the premium features for free. Find out more about [Using Velo with a Free Wix Site](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/using-velo-with-a-free-wix-site.md).
> **Note:** Premium plans added to sites before September 2023 are now considered legacy plans. If you have a site with a legacy plan, your site's resource limits won't change. Learn more about [legacy plan limits](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/legacy-data-compute-and-developer-tools-limits.md).
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Legacy Data, Compute, and Developer Tools Limits
## Article: Legacy Data, Compute, and Developer Tools Limits
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/legacy-data-compute-and-developer-tools-limits.md
## Article Content:
# Legacy Data, Compute, and Developer Tools Limits
In September 2023, Wix launched new premium plans that include updated limits on data, compute platform, and developer tools features.
The new limits impact existing sites, as follows:
* Existing free sites moved to the new [free tier limits](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/using-velo-with-a-free-wix-site.md).
* Existing sites with earlier premium plans continue receiving [legacy plan limits](https://support.wix.com/en/article/legacy-data-compute-and-developers-tools-limits#legacy-plan-limits).
## Checking your site's plan
If your site has a premium plan, you can check if it has a legacy premium plan or a new premium plan.
To check your plan type, do the following:
1. Open your site's [dashboard](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fhome).
2. Navigate to **Settings** > **Manage plan**.
3. Click **View Plan Features**.
A modal opens, displaying your site's premium plan features.
4. Scroll down to see your site's plan limits. If you see dedicated sections for **Data platform**, **Compute platform**, and **Developer tools**, your site has a new premium plan. If you don't see these sections, your site has a legacy premium plan.
## Changing your site's plan
If your site has a legacy premium plan and you move to new plan, your plan's limits change. In some cases, the new plan may have lower limits for some features than your site's current usage. Downgrade behavior varies by feature. Learn more about downgrade behavior for [data platform](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/data-features.md), [compute platform](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md), and [developer tools](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/developer-tools-features.md) features.
## Legacy plan limits
These tables list the limits for legacy premium plans.
### Data platform
|Feature |Limit |
|---|---|
|Data storage|10 GB
|Data collections|1000
|Data indexes|\-
|Data requests per minute|Read: 3000/minute
Write: 1500/minute |Data request timeout|5 seconds |External database integration|Yes ### Compute platform |Feature |Limit | |---|---| |Backend containers| 1 micro container |Capacity per container|1 vCPU
400 MB RAM |Backend requests per minute|7000 |Backend request timeout|14 seconds ### Developer tools |Feature |Limit | |---|---| |Scheduled jobs|Up to 20
1 hour minimum interval |Backend event handlers|Yes |Service plugins|Yes --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Using Velo with a Free Wix Site ## Article: Using Velo with a Free Wix Site ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/using-velo-with-a-free-wix-site.md ## Article Content: # Using Velo with a Free Wix Site You can try out most Velo and Data features with a [free site](https://support.wix.com/en/article/building-a-website-for-free). As you develop your site you may reach some of the free site quotas, and can select a [plan](https://www.wix.com/upgrade/website) to increase the number of features and resources available for your site. >**Note:** Some Velo and data quotas are not enforced on all sites yet. The following table lists the feature and resource quotas available for free sites. You can learn more about each feature [here](https://support.wix.com/en/article/velo-about-premium-packages). |Feature|Free Site Limit| |--|--| |**Data Platform**| | |Dedicated infrastructure|Not available |Data storage|1,000 items |Data collections|1,000 |Data indexes|4 |Data requests per minute|1000 reads
60 writes |Data request timeout|5 seconds |**Compute platform**|| |Backend containers| 1 micro |Capacity per container|1 vCPU
400 MB RAM |Backend requests per minute|60 |Backend request timeout|14 seconds |**Developer tools**|| |Scheduled jobs|20 jobs
1-hour minimum interval --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Data Features ## Article: Data Platform Features ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/data-features.md ## Article Content: # Data Features All sites have different data capacities and resource needs. Data quotas apply to anything making data requests on a site, including the [CMS (Content Management System)](https://support.wix.com/en/article/about-the-content-manager-7160473), [Datasets](https://support.wix.com/en/article/about-datasets-6368396), and the Velo [Wix Data API](https://www.wix.com/velo/reference/wix-data). This article covers the data platform features that are available based on your [premium plan](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/about-premium-plans.md). Learn about the differences and [choose the plan](https://www.wix.com/upgrade/website) that's right for you. ## Data storage A site's collections and items are hosted by Wix, and there is a limit to the amount of data you can store on a site. This limit only applies to your collection items. ### Collection items Wix limits the total number of collection items a site can have. If a site reaches this limit, you won't be able to add any more data to any of your collections. The collection items limit is not applied to [Wix app collections](https://support.wix.com/en/article/content-manager-working-with-wix-app-collections) or [external database collections](https://support.wix.com/en/article/velo-adding-and-deleting-an-external-database-collection) connected to a site. It also doesn't apply to items in [sandbox collections](https://support.wix.com/en/article/cms-about-sandbox-and-live-collections-and-syncing). Collection items can also include media or other files, which have [separate limits](https://support.wix.com/en/article/about-storage-and-bandwidth).
### Optimize your data storage
To avoid reaching the data storage limits, read about how to [optimize your data storage](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/optimizing-your-code.md#storage). You can also [upgrade your plan](https://www.wix.com/upgrade/website) to receive a larger storage limit.
## Data requests
Every time you access your data, whether that's to read or to write it, you are making a data request. Wix limits the frequency of your requests and the amount of time a request can take.
### Requests per minute
Wix limits the number of data requests your site can make per minute. Once a site reaches this quota, subsequent requests during the same minute are not processed and return an error.
There are separate quotas for read requests and write requests.
The following API functions count as 1 request towards the read quota:
- [`get`](https://www.wix.com/velo/reference/wix-data/get)
- [`find`](https://www.wix.com/velo/reference/wix-data/wixdataquery/find)
- [`count`](https://www.wix.com/velo/reference/wix-data/wixdataquery/count)
- [`distinct`](https://www.wix.com/velo/reference/wix-data/wixdataquery/distinct)
- [`aggregate`](https://www.wix.com/velo/reference/wix-data/aggregate)
- [`isReferenced`](https://www.wix.com/velo/reference/wix-data/isreferenced)
- [`queryReferenced`](https://www.wix.com/velo/reference/wix-data/queryreferenced)
- [`include`](https://www.wix.com/velo/reference/wix-data/wixdataquery/include)
- [`next`](https://www.wix.com/velo/reference/wix-data/wixdataqueryreferencedresult/next)
- [`refresh`](https://www.wix.com/velo/reference/wix-data/wixdataqueryreferencedresult/next)
- [`getItems`](https://www.wix.com/velo/reference/wix-dataset/dynamicdataset/getitems) (For newly requested items that are not currently in your cache.)
The following API functions count as 1 request towards the write quota:
- [`insert`](https://www.wix.com/velo/reference/wix-data/insert)
- [`bulkInsert`](https://www.wix.com/velo/reference/wix-data/bulkinsert)
- [`update`](https://www.wix.com/velo/reference/wix-data/update)
- [`bulkUpdate`](https://www.wix.com/velo/reference/wix-data/bulkupdate)
- [`save`](https://www.wix.com/velo/reference/wix-data/save)
- [`bulkSave`](https://www.wix.com/velo/reference/wix-data/bulksave)
- [`remove`](https://www.wix.com/velo/reference/wix-data/remove)
- [`bulkRemove`](https://www.wix.com/velo/reference/wix-data/bulkremove)
- [`insertReference`](https://www.wix.com/velo/reference/wix-data/insertreference)
- [`removeReference`](https://www.wix.com/velo/reference/wix-data/removereference)
- [`replaceReferences`](https://www.wix.com/velo/reference/wix-data/replacereferences)
> **Note:** Each use of [include](https://www.wix.com/velo/reference/wix-data/wixdataquery/include) in a query counts towards the request quota. For example, the following query counts as 3 read requests:
```javascript
wixData.query("Movies").include("director").include("studio").find();
```
For each request that exceeds the quota, the request fails and the following error is displayed in [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md):
`WDE0014: Requests per minute quota exceeded.`
Learn more about [optimizing your data requests](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/optimizing-your-code.md#data-requests) and [Wix Data error codes](https://dev.wix.com/docs/velo/apis/wix-data/error-codes.md).
### Request payload limits
Wix Data limits the size of the request payloads.
Single-item requests, such as [`update()`](https://dev.wix.com/docs/sdk/backend-modules/data/items/update.md) or [`insert()`](https://dev.wix.com/docs/sdk/backend-modules/data/items/insert.md), have a payload limit of 512 KB. Exceeding this limit results in a `WDE0009` error.
Bulk operations, such as [`bulkUpdate()`](https://dev.wix.com/docs/sdk/backend-modules/data/items/bulk-update.md) or [`bulkInsert()`](https://dev.wix.com/docs/sdk/backend-modules/data/items/bulk-insert.md), have a total payload limit of 4 MB. Exceeding this limit results in a `WDE0109` error.
Learn more about [Wix Data error codes](https://dev.wix.com/docs/sdk/backend-modules/data/wix-data-error-codes.md).
### Request timeout
When your site makes a data request, it may take some time to receive a response. Wix Data places limits on how long a response can take before the request times out. If the response time exceeds this limit, Wix Data returns an error instead of the intended result.
Request timeouts vary depending on your [Wix plan](https://www.wix.com/plans) and the type of collection you are attempting to access:
| Collection Type | Wix plan | Timeout |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ---------- |
| [CMS collections](https://support.wix.com/en/article/cms-formerly-content-manager-managing-your-collections) | Free sites, premium sites (excl. Elite and Business Elites) | 5 seconds |
| [CMS collections](https://support.wix.com/en/article/cms-formerly-content-manager-managing-your-collections) | Business Elite & Elite Premium | 10 seconds |
| [External Database Collections](https://dev.wix.com/docs/develop-websites/articles/databases/external-databases/overview/integrating-external-databases-with-your-wix-site.md) | All plans | 15 seconds |
After the specified timeout, the request fails and the following error message is displayed in [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md):
`WDE0028: Operation time limit exceeded.`
Learn more about [Wix Data error codes](https://dev.wix.com/docs/velo/apis/wix-data/error-codes.md).
### Blocks apps and request limits
When a Blocks app is installed on a site, whether a private or a public app, data requests made by the app are subject to the site's requests per minute (RPM) limits, not the app's limits.
### Optimize your requests
To avoid reaching the limits for data requests, read about how to [optimize your requests](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/optimizing-your-code.md#data-requests). You can also [upgrade your plan](https://www.wix.com/upgrade/website) to receive larger limits for your data requests.
## Data management
It's important to understand your database's infrastructure, how it affects data management, and how to use indexes to improve data requests.
### Database structure
[Database collections](https://support.wix.com/en/article/content-manager-about-your-collection-fields) store dynamic content for a site, such as the content that displays on sites and site visitor generated content.
Database collections for free and most premium sites are stored in large, multi-tenant databases. This doesn't mean that a site's data is exposed. It does mean that there are limits on the storage, read/write requests, and indexing resources available to a site. Database collections for sites with the Business Elite plan are stored in dedicated databases, providing them with significantly greater data resources.
### Data indexes
A [database collection index](https://support.wix.com/en/article/velo-indexes-and-wix-data-collections) is a set of keys used to improve performance when searching for data in a database. Indexes can be created on a single collection field or multiple fields. Indexes are added to fields or sets of fields that are used most often when querying the collection to retrieve information.
Collections can have 2 types of indexes:
- **Regular:** These indexes improve retrieval performance as described above.
- **Unique:** These are special indexes that improve performance and also enforce the uniqueness of values in the field that they're defined for.
The Business Elite plan allows you to create a combination of unique or regular indexes up to the amount of indexes in the quota. Other plans include only 3 regular indexes and 1 unique index.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Compute Features
## Article: Compute Platform Features
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md
## Article Content:
# Compute Features
Improve your site's performance and handle more backend requests with a compute platform [upgrade](https://www.wix.com/upgrade/website) to your [premium plan](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/about-premium-plans.md). Check out the feature differences below.
## Backend containers
Velo backend code for Wix sites is run in containers. A container is a package of software containing everything that is needed for its code to run in any environment. You can think about it as a virtual computer being used to run the site’s code. Containers are limited by the amount of computing resources that are allotted for them.
There are 2 types of containers available for Wix sites:
* **Micro containers:** Include 1 vCPU for processing and 400 MB of RAM.
* **Standard containers:** Include 2 vCPUs for processing and 600 MB of RAM.
Higher tier premium plans include more containers. If your site needs to perform a lot of operations that require large amounts of processing or memory, it may benefit from a plan that includes more containers.
## Backend requests
Wix limits the frequency of your backend requests and the amount of time a request can take. The following section will explain how.
### Backend requests per minute
Wix limits the number of requests that can be made from your site's frontend code to its backend code. Once the quota is reached, any backend requests sent for the rest of the minute are not processed.
If your site exceeds the quota, any additional requests within a 1-minute window are blocked and you receive a 429 response code. For each throttled request, the following error message is displayed in [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md):
`/backend/.js(w)/ was throttled because your site exceeded the maximum number of backend requests per minute.`
The failed request also is displayed on your site’s [monitoring dashboard](https://support.wix.com/en/article/velo-monitoring#understand-the-dashboard).
### Backend request timeouts
When frontend code on a site makes requests to backend code, a request is made to a Wix server. Wix places limits on how long the code on the server can run before it times out. If it takes longer, you receive a 504 response code.
If your execution exceeds the quota, the code might still execute, but the connection to the client is closed, so the results do not appear in the frontend. The following error message is displayed in [Wix Logs](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/logs/about-logs.md):
`/backend/.js(w)/ timed out because it exceeded the maximum execution time.`
The failed request also is displayed on your site’s [monitoring dashboard](https://support.wix.com/en/article/velo-monitoring#understand-the-dashboard).
### Optimize your requests
To avoid reaching the limits for data requests, read about how to [optimize your requests](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/optimizing-your-code.md#backend-requests). You can also [upgrade your plan](https://www.wix.com/upgrade/website) to receive larger limits for your data requests.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Developer Tools Features
## Article: Developer Tools Features
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/developer-tools-features.md
## Article Content:
# Developer Tools Features
You can customize your site and analyze its usage with advanced developer tools. Find the [premium plan](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/about-premium-plans.md) that suits your needs and [choose the plan](https://www.wix.com/upgrade/website) that fits.
## Scheduled jobs
You can use Velo to [schedule code](https://support.wix.com/en/article/velo-scheduling-recurring-jobs) to run on a site at regular intervals. Each scheduled function is called a job. Scheduling jobs allows certain site functions to be automated such as updating or clearing database collections and sending status reports.
Wix limits the number of jobs you can define for a site and how frequently jobs can run. Most plans allow you to add up to 20 scheduled jobs that run at a minimum of 1 hour intervals. Elite and Business Elite plans allow you to add up to 30 scheduled jobs that run at a minimum of 5 minute intervals.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Optimizing Your Code
## Article: Optimizing Your Code
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/optimizing-your-code.md
## Article Content:
# Optimizing Your Code
You may want to optimize your code to avoid reaching the limits for [data storage](#storage), [data requests](#data-requests), or [backend requests](#backend-requests). You can also [upgrade your plan](https://www.wix.com/upgrade/website) to receive more resources. Read [about premium plans](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/about-premium-plans.md) to understand the limitations that exist and which plans increase which limits.
## Storage
You can take the following steps to reduce the amount of [storage](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/data-features.md) your site uses:
* **Delete data you don’t need:** Make sure your collections contain only data that you need for your site.
* **Use an external database:** The storage quota doesn't apply to external databases. If none of the other options work for you, store your data in an external database and [integrate it with your site](https://support.wix.com/en/article/velo-adding-and-deleting-an-external-database-collection). You can still access this data using Velo's [Wix Data API](https://www.wix.com/velo/reference/wix-data-v2).
## Data requests
You can optimize your data requests by reducing the number of requests you make or by decreasing the requests' processing time.
### Amount of requests
You can take the following steps to reduce the number of [data requests](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/data-features.md) in your code:
* **Use the bulk functions:** If you are inserting or updating multiple items, use the `bulkInsert()` and `bulkUpdate()` functions instead of writing each item individually. These functions count as 1 request toward the quota.
* **Make requests only when you need the data:** Don’t make requests for data you don’t use. For example, if you store extra product data in a separate collection, query this collection only when you need the data.
### Processing time
You can take the following steps to reduce the [processing time](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/data-features.md) of the data requests in your code:
* **Request only data you need:** Avoid fetching more items from your collection than you need at once. Also avoid including reference items in your queries if you don’t need their data.
* **Use indexes:** Querying with an index is faster than querying items directly. All `_id` and `_createdDate` fields are indexed by default.
* **Process data in chunks:** Timeouts can happen when you process too much data with one request. Breaking your request into smaller pieces means that each individual request will complete before the time limit. If you are running a slow process or loading a large amount of data, [use pagination](https://support.wix.com/en/article/adding-and-setting-up-a-pagination-bar) or [process your data in chunks](https://support.wix.com/en/article/velo-best-practices-for-improving-performance-in-wix-sites-with-data). Don't create too many requests, as there is also a [quota on requests per minute](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md).
* **Use an external database:** The request timeout and processing time quotas don't apply to external databases. If none of the other options works for you, store your data in an external database and [integrate it with your site](https://support.wix.com/en/article/velo-adding-and-deleting-an-external-database-collection). You can still access this data using Velo and the Wix Data API.
## Backend requests
You can optimize your backend requests by reducing the number of requests you make or by decreasing the requests' processing time.
### Amount of requests
You can take the following steps to reduce the number of [backend requests](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md) in your code:
* **Batch your requests:** Batch multiple backend requests into one. Make sure not to batch time-consuming requests together as there's also a [time limit](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md) for backend requests.
**Frontend code** ```js import {calculateFinalSalary} from 'backend/myBackend.jsw'; const finalSalary = await computeFinalSalary(employeeId); ``` **Backend code** ```js export function computeFinalSalary(employeeId) { const salary = getSalary(employeeId); const tax = getTax(employeeId); return calculateFinalSalary(salary, tax); } ```
* **Avoid repetition:** Avoid repeating large database requests or complex calculations. If you can, [cache the result](https://support.wix.com/en/article/site-performance-caching-pages-to-optimize-loading-speed) or [aggregate database queries](https://support.wix.com/en/article/velo-working-with-aggregations-in-the-data-api).
### Processing time
You can take the following steps to reduce the [processing time](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md) of the backend requests in your code:
* **Identify parts of your code that are running for too long:** Identify the parts of your code that are taking too long to run, and optimize them to improve performance. You can do this by including console logs before and after the code you want to test, and then checking to see how long it takes to run.
* **Check your 3rd-party APIs:** If you are using 3rd-party APIs on your site, make sure they are not too slow. For example, if you notice an API call to a 3rd-party is taking a few seconds to run, break it into smaller calls or try upgrading your 3rd-party account to improve performance.
* **Process data in chunks:** If you are running a slow process or loading a large amount of data, [use pagination](https://support.wix.com/en/article/adding-and-setting-up-a-pagination-bar) or [process your data in chunks](https://support.wix.com/en/article/velo-best-practices-for-improving-performance-in-wix-sites-with-data). Don't create too many requests, as there is also a [quota on requests per minute](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/compute-features.md).
* **Use indexes:** Querying with an index is faster than querying items directly. All **\_id** and **\_createdDate** fields are indexed by default.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Custom Actions
## Article: About Custom Actions
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/about-custom-actions.md
## Article Content:
# About Custom Actions
When you create a new [automation](https://support.wix.com/en/article/wix-automations-about-the-new-automations-builder) on your site, you're presented with a variety of actions to execute after your automation is triggered. The actions available to you depend on the apps that are installed on your site.
However, if none of the available actions execute the behavior you want, you also have the option to create your own custom action. This action is independent of any app and applies only to the site it's created on.
You can create custom actions with the [Automations Action service plugin](https://dev.wix.com/docs/velo/events-service-plugins/automations/service-plugins/automations-actions/introduction.md). The service plugin lets you code a custom action directly in the automation builder.
Examples of actions you can create with the Action service plugin include:
- Create custom email notifications for specific events.
- Trigger third-party APIs when a subscriber signs up on your site.
- Log specific actions into a custom database for business analysis.
## Supported IDEs
You can implement custom actions using:
- The **code editor** (Wix Studio and Wix Editor).
- The Wix IDE (Wix Studio).
## Custom action code
To [create a custom action](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/add-a-custom-action.md), you select the **Run Velo code** action in the automation builder. Wix creates a Javascript file where you write your action code. You then edit this file in a modal inside the builder.
Wix automatically populates the JS file with the following code:
```js
/**
* Autocomplete function declaration, do not delete
* @param {import('./__schema__.js').Payload} options
*/
export const invoke = async ({payload}) => {
return {} // The function must return an empty object, do not delete
};
```
You must write all your code inside the [`invoke()`](https://dev.wix.com/docs/velo/events-service-plugins/automations/service-plugins/automations-actions/invoke.md) method. Wix calls this method each time the automation is triggered, and runs any code inside. It expects an empty object in return, so make sure to leave the return statement as it appears.
To write your action code, use the Wix APIs just like you would in your site's public or backend files.
When you create a custom action for the first time, Wix adds the Automations Action service plugin to your site's backend code files. Under the Action service plugin, Wix adds a folder for each subsequent custom action you create. This folder contains a copy of the action code you write in the builder. However, any changes you make in the backend file aren't reflected when the automation runs. Write and edit your action code only in the automation builder.
Working directly in the automation builder also allows you to:
- Easily verify you are working with the correct trigger.
- View the full trigger payload.
- Edit sample data provided by Wix and test your code with it.
## Payload data
Depending on the trigger you select, your action expects to receive a payload when the automation is triggered. You can view the payload structure under the **Payload view** tab while writing your code in the builder. The structure is read-only.
You can access payload data in your code with dot notation. For example:
```js
/**
* Autocomplete function declaration, do not delete
* @param {import('./__schema__.js').Payload} options
*/
export const invoke = async ({payload}) => {
console.log(payload.status)
return {} // The function must return an empty object, do not delete
};
```
## Editing the automation
To edit your action code, return to the automation in the builder and make your changes directly in the custom action modal.
The code file you create for your custom action is associated with the original trigger you selected. Editing the trigger configuration doesn't affect the custom action. However, if you change the trigger, a new code file will be created and you'll have to write new code. The initial file you create is still saved, and if you restore the trigger it is associated with, you'll be able to access it again in the automation.
## See also
- [Create a Custom Action](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/add-a-custom-action.md)
- [Automations Actions API Reference](https://dev.wix.com/docs/velo/events-service-plugins/automations/service-plugins/automations-actions/introduction.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Add a Custom Action
## Article: Add a Custom Action
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/add-a-custom-action.md
## Article Content:
# Add a Custom Action
The Automations Action service plugin lets you develop [custom actions](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/about-custom-actions.md) directly in your site dashboard. To use a custom action as part of an automation, start by creating a new automation in your site dashboard:
1. Go to the [Automations](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Ftriggers) page in your dashboard.
2. Click **New Automation**, then **Start from Scratch** to open the automation builder.
3. Select and configure a [trigger](https://support.wix.com/en/article/wix-automations-creating-an-automation-with-the-new-builder#step-2-choose-a-trigger).
4. Click the **+** to add a step and choose **Action**. In the menu on the left, select **Run Velo code**.
5. Click **Start Coding** to add your code. You'll be prompted to create a new code file.
6. Give the file a name and click **Create & Start Coding**.
You should now see something like this:
The **Write Velo Code** modal contains two tabs. The first is the .js file where you write your code. The second tab, which appears under **Payload view**, lets you view the expected structure of the trigger payload.
7. When you finish writing your code, click **Save**.
Now that you have set up and coded your custom action, you can activate the automation immediately. However, we recommend
testing the action code first.
8. To test your code, follow the instructions under **Run your code to test this action**, then click **Run Code**.
Wix provides sample data that matches the structure of your trigger payload. You can edit any of the fields in the sample payload to test your action.
Be aware that testing the action runs the code live on your site, and may change cause changes in the site or dashboard.
Once you test your code and are sure your action works, activate your automation.
## Edit your custom action
To edit your action code, [edit your automation](https://support.wix.com/en/article/the-new-automation-builder-managing-your-automations#editing-duplicating-or-renaming-an-automation) and select the **Run Velo code** action, then click on **Edit Code**. Make the changes you want, save the code, and test.
## See also
- [About Custom Actions](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/about-custom-actions.md)
- [Automations Actions service plugin](https://dev.wix.com/docs/velo/events-service-plugins/automations/service-plugins/automations-actions/introduction.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Custom Triggers
## Article: About Custom Triggers
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/about-custom-triggers.md
## Article Content:
# About Custom Triggers
When you create an [automation](https://support.wix.com/en/article/wix-automations-about-the-new-automations-builder) on your site, you must select a trigger that causes the automation to run. A trigger is an event that occurs on your site and gets reported to Wix.
An automation only runs when the event that defines its trigger occurs. For example, if you select the **Member logs in** trigger, your automation will run when a member logs in. Most triggers are based on similar business logic, like payment information or contact management.
However, you may want to run your automation when an event occurs that is not defined by existing triggers. Examples include:
- Creating a new contact when a site visitor clicks a certain button.
- Send a chat message offering help when a member inputs an invalid value into a text input field.
- Send a coupon if a visitor is on your site for a certain period of time.
With the [Custom Trigger API](https://dev.wix.com/docs/sdk/backend-modules/automations/triggers/custom-trigger/introduction.md), you can run an automation for any event that occurs by triggering the automation from your code. This gives you greater control and flexibility over when your automations run.
## Supported IDEs
Once you select the code trigger in the automation builder, you can write your code in the following IDEs:
- The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor).
- The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md) (Wix Studio).
- Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md) (Wix Studio and Wix Editor).
## Trigger configuration
There are 2 parts to the trigger configuration:
### The trigger ID
When you select the **Velo code trigger** as your automation trigger, Wix generates a unique trigger ID. When you call [Run Trigger](https://dev.wix.com/docs/sdk/backend-modules/automations/triggers/custom-trigger/run-trigger.md), you pass it the trigger ID. The method then runs the automation associated with the ID. The result is that you can run the automation from anywhere in your site code, simply by calling Run Trigger with the relevant ID.
### The payload schema
In addition to the ID, you can optionally define a payload schema for the trigger, and pass a payload to Run Trigger. The structure of the payload schema is generated from sample data you enter when you configure the trigger. For example, if you enter sample data like this:
```javascript
{
"firstName": "Ronald",
"id": "ed8fa327-f821-4c30-b336-1784be278541",
"age": 50,
"contactEmail": "ronald@example.com",
"favoriteFoods": ["hamburgers", "French toast", "chicken nuggets"]
}
```
Your payload schema will have a structure like this:
```javascript
{
firstName: string,
id: string (uuid),
age: number,
contactEmail: string (email),
favoriteFoods: [ string ]
}
```
Payload fields are optional, so even if you define a payload schema, you’re not required to pass a payload when you call Run Trigger. If you choose to pass a payload, you can omit fields. Any fields you include in the payload should match the key and type defined in the schema.
For example, if your payload structure looks like the one above, you can pass the following payloads to Run Trigger:
```javascript
$w('#myButton1').onClick(async () => {
const payload = {
firstName: "Amy",
id: "5d696ec4-0933-4b4d-9acd-50b316717ff2",
age: 27,
contactEmail: "amy@email.com",
favoriteFoods: ["pizza","hamburger"]
};
await runTrigger(payload);
})
$w('#myButton2').onClick(async () => {
const payload = {
firstName: "Josh",
id: "46123fae-6b6f-4edb-98f1-50f0eaded97e",
contactEmail: "josh@email.com",
};
await runTrigger(payload);
})
$w('#myButton3').onClick(async () => {
const payload = {
firstName: "Jackie",
favoriteFoods: ["sushi", "tiramisu"]
};
await runTrigger(payload);
})
```
Make sure, however, that any fields required by actions are passed. For example, if subsequent actions need to access contact data, be sure to pass the contact ID field.
#### Contact data in the payload schema
If your payload schema contains one or more UUID fields, you can mark one of those fields as a contact ID. When the payload is passed to Run Trigger, Wix looks up the ID in the contact ID field. If the ID corresponds to an existing contact, Wix retrieves the contact’s data and attaches that data to the payload. The data can then be passed to any subsequent actions.
> **Note:** If the ID corresponds to a new contact, you can save the contact data by executing the **Create a Contact** action after the trigger.
## Error handling
Here are some common errors you might encounter and their causes:
| | |
| ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Error Message** | **Cause** |
| Automation not found | No automation is found for the trigger ID passed to `runTrigger()`. This may be because the automation was deleted. |
| This automation can only be executed within its designated application | This only applies to preinstalled automations. An app other than the one that created the automation tries to run it. |
## See also
- [Add a Custom Trigger](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/add-a-custom-trigger.md)
- [Custom Trigger SDK](https://dev.wix.com/docs/sdk/backend-modules/automations/triggers/custom-trigger/introduction.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Add a Custom Trigger
## Article: Add a Custom Trigger
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/add-a-custom-trigger.md
## Article Content:
# Add a Custom Trigger
[Custom triggers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/about-custom-triggers.md) give you the ability to run an automation from anywhere in your site code. This article explains how to create a custom trigger and use the [Custom Trigger API](https://dev.wix.com/docs/sdk/backend-modules/automations/triggers/custom-trigger/introduction.md) to run your automation.
## Step 1 | Install the Automations SDK package
**If you're working in the editor or Wix IDE:**
1. **Wix Studio:** In the code panel on the left of the site editor, go to **Code**  > **Packages & Apps**.
**Wix Editor**: Make sure **Dev Mode** is [enabled](https://dev.wix.com/docs/velo/articles/getting-started/getting-oriented.md#enabling-velo). Then, in the code sidebar on the left, go to **Packages & Apps** .
1. Under **npm**, click **+ Install packages from npm**.
1. Search for and install the `@wix/automations` package.
1. Repeat these steps to install the `@wix/essentials` package.
**If you're working in your local IDE:**
1. Install the necessary packages on your command line:
```bash
npm install @wix/automations
npm install @wix/essentials
```
Now that you’ve installed the `@wix/automations` package, you’re able to use the Custom Trigger API in your site code. Before you write any code, however, you need to create an automation that uses the **Velo code trigger**.
## Step 2 | Create an automation with the Velo code trigger
To create a new automation:
1. Go to the [Automations](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site\&title=Select%20a%20Site\&autoSelectOnSingleSite=true\&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Ftriggers) page in your site dashboard.
1. Click **+ New Automation** > **+ Start from Scratch** to open the builder. Give your new automation a title.
1. In the left menu, from the list of available triggers, select **Velo code trigger**.
Once you select the trigger, the left panel displays instructions on how to work with the trigger, as well as the trigger ID and the payload. The bottom part of the panel also displays sample code that you can copy.
### Define the payload structure (optional)
You have the option to define the trigger payload schema by inputting sample data. Wix provides you with default sample data, which you can choose to keep or replace with your own data.
To define a payload schema for the trigger:
1. In the **Velo code trigger** panel, click **{..} Set Payload Data Structure**.
1. Edit the displayed JSON data as necessary, then click **Preview Structure >**. A preview of your payload schema opens.
1. Optionally, click **Mark Contact ID** to mark one of the UUIDs as a [contact ID](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/about-custom-triggers.md#contact-data-in-the-payload-schema).
Only fields in proper UUID format appear on the list. You may only select one field to be a contact ID. Click **Save** to exit the **Mark Contact ID** modal.
1. When you’re satisfied with your payload schema structure, click **Save Structure**. You can return to edit the structure in the builder at any time.
### Copy code and complete automation setup
Whether you define a payload or not, Wix provides you with the trigger ID, which you need to run your automation, as well as some example code.
1. Copy the trigger ID to use for later in your site code. At the bottom of the trigger configuration panel, click **Show code >**.
The trigger setup provides you with some sample code. Copy this code for use as a starting point in your own code.
1. Click **Apply** to save your trigger setup.
1. Select and configure at least one action as part of your automation, then activate the automation.
Now that you’ve configured your automation, you can write the code to run it for any event.
## Step 3 | Implement Run Trigger in site code
In order to implement Run Trigger, you need to define a [web method](https://dev.wix.com/docs/velo/apis/wix-web-module/introduction.md) in the backend that calls the method. Then you can export that web method to other code files for use.
1. If you’re working in the editor, create a new [web module](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md) in the **Backend & Public** > **Backend** section of the code panel. If you’re working in the Wix IDE or locally, add the file under `src/backend`.
1. In the web module, paste the code you copied from the automation setup, so that your file looks like this:
```javascript
import { customTrigger} from "@wix/automations";
import { auth } from '@wix/essentials';
import { Permissions, webMethod } from "wix-web-module";
export const runTrigger = webMethod(
Permissions.Anyone,
async (payload) => {
const triggerMethod = auth.elevate(automations.runTrigger);
// Your code here
await triggerMethod({
triggerId: 'triggerId',
payload,
});
}
);
```
Let’s break down the important lines in this code:
**Lines 1-3**. Import necessary packages, including the `@wix/automations` package that contains the Run Trigger functionality, and the `@wix/essentials` package that provides auth functionality.
**Line 5**. Create the web method to export to the frontend.
**Line 8**. [Elevate](https://dev.wix.com/docs/sdk/core-modules/essentials/auth.md#elevate) Run Trigger so it runs with the correct permissions.
**Lines 11-14**. Call the elevated method. In place of `triggerId`, enter the trigger ID you copied from your automation. If you defined a payload schema for your trigger, pass the `payload` argument as well.
1. Export your web method to another file, such as the frontend code for a site page. Add this line to the top of the file you want to import the method into:
```javascript
import { runTrigger } from 'backend/triggers.web';
```
1. Call the method in the file code where necessary. To give a simple example, let’s say you add a [button](https://dev.wix.com/docs/velo/velo-only-apis/$w/button/introduction.md) element to your site page, and you want to run the automation every time a visitor clicks that button. You can then simply call Run Trigger in that button’s `onClick()` handler:
```javascript
$w('#myButton').onClick(async () => {
runTrigger();
})
```
If you defined a payload schema for your trigger, you can pass a payload object to Run Trigger. All payload fields are optional, but any fields you include in the payload should match the keys and types defined in the schema.
1. To test your code, either publish your site or [create a test site](https://support.wix.com/en/article/test-sites-creating-a-test-site). Your backend code may not work in Preview mode.
## See also
- [About Custom Triggers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/automations/about-custom-triggers.md)
- [Custom Trigger SDK](https://dev.wix.com/docs/sdk/backend-modules/automations/triggers/custom-trigger/introduction.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Using reCAPTCHA to Protect Data Submission
## Article: Using reCAPTCHA to Protect Data Submission
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/using-re-captcha-to-protect-data-submission.md
## Article Content:
# Velo Tutorial: Using reCAPTCHA to Protect Data Submission
The [reCAPTCHA element](https://dev.wix.com/docs/velo/api-reference/$w/captcha/introduction.md) helps verify that site visitors are human before allowing actions like submitting data, logging in, or accessing private content. By adding it to your site, you can protect it from spam and automated abuse.
This tutorial demonstrates how to add CAPTCHA to secure custom form submissions and database entries by performing the following steps:
1. Create a custom mailing list form where visitors provide their name and email.
2. Use the reCAPTCHA element to require visitors to complete a CAPTCHA challenge before submitting their information.
3. When the challenge is successfully completed and the CAPTCHA is first verified on the frontend, authorize the CAPTCHA token in the backend to ensure the form was completed by a human.
4. Insert the validated data into a database collection if the token is valid. If the token fails validation or expires, reset the CAPTCHA and display an error message.
> **Notes:**
> * You can add CAPTCHA to [Wix Forms](https://support.wix.com/en/article/adding-captcha-to-your-wix-forms) and [Wix Signup & Login](https://support.wix.com/en/article/site-members-editing-the-signup-settings-for-the-default-and-custom-forms) forms without code.
> * To use CAPTCHA for data submission via a dataset, you must implement the submission using code. For example, use Wix Data APIs like [insert()](https://dev.wix.com/docs/velo/api-reference/wix-data/insert.md) or [save()](https://dev.wix.com/docs/velo/api-reference/wix-data/save.md) to handle the data operation and integrate CAPTCHA for protection.
> * In addition to adding CAPTCHA for security purposes, you may want to [validate visitor inputs](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/user-input/about-validating-user-input-with-code.md) to make sure the data is in the correct format.
## Step 1 | Add elements to the page
Add the following elements to the **Home** page:
* Input elements for visitors to provide their name and email.
* reCAPTCHA element to protect the data submission.
* A button to submit the data upon successful CAPTCHA verification.
* Text for displaying success and error messages.
## Step 2 | Create a database collection
Create a [database collection](https://support.wix.com/en/article/cms-formerly-content-manager-creating-a-collection) called **MailingList** to store the visitor's name and email after the CAPTCHA verification is successful. Add 2 text fields, `name` and `email`.
## Step 3 | Write the backend code
While frontend CAPTCHA verification ensures the site visitor successfully completes the challenge, backend validation prevents site visitors from spoofing or bypassing CAPTCHA. To ensure complete protection, you must implement [backend authorization](https://dev.wix.com/docs/velo/api-reference/wix-captcha-backend/authorize.md) to validate the CAPTCHA token securely:
1. Add a [web module](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/about-web-modules.md) named **submitHandler.web.js** to your backend code.
2. Use the following code to validate the CAPTCHA token and insert the data into the **MailingList** collection if the token is valid:
```javascript
import { Permissions, webMethod } from 'wix-web-module';
import wixCaptcha from 'wix-captcha-backend';
import wixData from 'wix-data';
export const processSubmission = webMethod(Permissions.Anyone, (submitRequestData) => {
return wixCaptcha.authorize(submitRequestData.token)
.then(() => {
return wixData.insert("MailingList", submitRequestData.data);
});
});
```
**Lines 1-3**: Import the `Permissions` enum and `webMethod` function from `wix-web-module`. Then import the modules you need to work with CAPTCHA in the backend and with data.
**Lines 5-6**: Create a web method with permissions for anyone to call it from the frontend.
**Lines 7-8**: Pass the web method a function that checks the token's authorization.
**Line 9**: Insert the data into the **MailingList** collection if the token is authorized.
## Step 4 | Write the page code
In your **Home** page, write the code for verifying the CAPTCHA in the frontend:
1. Import the backend function from your web module:
```javascript
import { processSubmission } from 'backend/submitHandler.web';
```
2. Set initial element states:
```javascript
$w.onReady(function () {
$w("#messageText").hide();
$w("#submitButton").disable();
});
```
**Lines 1-4**: To make sure site visitors complete a CAPTCHA challenge before being able to submit their entries, set the initial element states in the `onReady` function. Hide the text for displaying success and error messages upon submission, and disable the submit button.
2. Add the following code to enable the submit button when CAPTCHA verification is successful:
```javascript
$w("#captcha").onVerified(() => {
$w("#messageText").hide();
$w("#submitButton").enable();
});
```
**Line 1**: Add an `onVerified` event handler that runs when the CAPTCHA challenge is successfully completed and the CAPTCHA is verified.
**Line 2**: Hide any previous success or error messages.
**Line 3**: Enable the previously disabled submit button so the site visitor can complete the submission.
> **Note**
> When the CAPTCHA is verified, a CAPTCHA token is automatically generated. This token is used for authorization.
3. Write code to handle data submission and reset the CAPTCHA element if the process fails:
```javascript
$w("#submitButton").onClick(() => {
let submitRequestData = {
"token": $w("#captcha").token,
"data": {
"name": $w("#nameInput").value,
"email": $w("#emailInput").value
}
};
processSubmission(submitRequestData)
.then( () => {
resetCaptcha("Data successfully submitted");
})
.catch( () => {
resetCaptcha("Something went wrong. Redo the captcha challenge.");
});
});
function resetCaptcha(messageText) {
$w("#captcha").reset();
$w("#submitButton").disable();
$w("#messageText").text = messageText;
$w("#messageText").show();
}
```
**Line 1**: Add an event handler that runs when a site visitor clicks the submit button.
**Lines 2-7**: Prepare the submit request data. The request data includes the CAPTCHA token generated when the captcha was verified, and the data entered in the input elements.
**Line 10**: Call the `processSubmission` backend function with the prepared submit request data. The `processSubmission` function validates the token and inserts the data into the **MailingList** collection.
**Lines 12-24**: If authorization and data insertion are successful, display a success message and restart the CAPTCHA lifecycle for future submissions by resetting the reCAPTCHA element and disabling the submit button. If authorization or data insertion fail in the backend, restart the CAPTCHA lifecycle by resetting the reCAPTCHA element, disable the submit button, and display an error message instructing the site visitor to try again.
4. Show an error message if the CAPTCHA element loses connection with the provider:
```javascript
$w("#captcha").onError(() => {
$w("#messageText").text = "The reCAPTCHA element lost connection with the CAPTCHA provider. Try again later.";
$w("#messageText").show()
.then(() => {
$w("#messageText").hide("fade", {"delay": 10000});
});
});
```
**Lines 2-3**: If the reCAPTCHA element loses connection with the provider when the site visitor attempts to complete the CAPTCHA challenge, the reCAPTCHA element automatically resets. Set the message text to an error message asking the site visitor to try again later.
**Lines 4-5**: Show the message.
**Lines 6-8**: Hide the message after 10 seconds.
5. Disable the submit button if the CAPTCHA token expires:
```javascript
$w("#captcha").onTimeout(() => {
$w("#submitButton").disable();
});
```
**Lines 1-3**: If the submit does not occur within 120 seconds of completing the CAPTCHA challenge, the generated token expires. When the token expires, the reCAPTCHA element automatically resets and displays a message asking the site visitor to redo the challenge. In this case, disable the submit button in the `onTimeout` event handler.
### Example code
Here is the complete code for this example:
#### Page code
```javascript
import { processSubmission } from 'backend/submitHandler.web';
$w.onReady(function () {
$w("#messageText").hide();
$w("#submitButton").disable();
});
$w("#captcha").onVerified(() => {
$w("#messageText").hide();
$w("#submitButton").enable();
});
$w("#submitButton").onClick(() => {
let submitRequestData = {
"token": $w("#captcha").token,
"data": {
"name": $w("#nameInput").value,
"email": $w("#emailInput").value
}
};
processSubmission(submitRequestData)
.then( () => {
resetCaptcha("Data successfully submitted");
})
.catch( () => {
resetCaptcha("Something went wrong. Redo the captcha challenge.");
});
});
$w("#captcha").onError(() => {
$w("#messageText").text = "The reCAPTCHA element lost connection with the CAPTCHA provider. Try again later.";
$w("#messageText").show()
.then(() => {
$w("#messageText").hide("fade", {"delay": 10000});
});
});
$w("#captcha").onTimeout(() => {
$w("#submitButton").disable();
});
function resetCaptcha(messageText) {
$w("#captcha").reset();
$w("#submitButton").disable();
$w("#messageText").text = messageText;
$w("#messageText").show();
}
```
#### Backend code
```javascript
import { Permissions, webMethod } from 'wix-web-module';
import wixCaptcha from 'wix-captcha-backend';
import wixData from 'wix-data';
export const processSubmission = webMethod(Permissions.Anyone, (submitRequestData) => {
return wixCaptcha.authorize(submitRequestData.token)
.then(() => {
return wixData.insert("MailingList", submitRequestData.data);
});
});
```
### See also
* [$w.captcha API](https://dev.wix.com/docs/velo/api-reference/$w/captcha/introduction.md)
* [wix-captcha-backend API](https://dev.wix.com/docs/velo/api-reference/wix-captcha-backend/introduction.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Tutorial: Using the Fetch API to Add a Currency Converter
## Article: Getting Started with Velo by Wix
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/tutorial-using-the-fetch-api-to-add-a-currency-converter.md
## Article Content:
# Tutorial: Using the Fetch API to Add a Currency Converter
In this tutorial, you'll learn how to create a simple currency converter site that uses the [wix-fetch API](https://www.wix.com/velo/reference/wix-fetch.html) to connect to a 3rd-party service. Site visitors choose source and target currencies from dropdowns and enter an amount to convert. The results are displayed in a text box.
4. In the Properties Panel, click on the **ID** name to rename the element to **takeTourButton** and press **Enter**. This makes the element easier to identify. (This isn't required, but it is recommended.)
5. In the **Event Handlers** section click **onMouseIn,** click the **+** , and press **Enter**. The name of the onMouseIn event handler is displayed.
6. Code is automatically added to the code editor. This is what you'll see there:
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
})
```
7. Let's add the code that changes the text on the button. Afterwards we'll go back and see how it worked. Under line 7 where it says: **//Add your code for this event here:** add a line and type **$**.
8. A popup window opens that contains a list of all the elements in your site surrounded by some code. Use the arrow keys to move down and select **$w("#takeTourButton")**.
9. Press **Enter** to add the code for the element you selected.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton');
})
```
10. Now enter a period at the end of the line and you'll see a popup window that contains a list of all the properties, methods, and events that you can use with your element. Use the arrow keys to scroll down and select the **label** property.
11. Press **Enter** to add the code you selected.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton');
})
```
12. To set the label to its new value add **\= "Let's Go!";** at the end of the line and save your work.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton').label = "Let's Go!";
})
```
And that's it! Click **Preview** and you can test that your code works. Hover over the "Take the tour" button and it will change to look like this:
### Overview
To create Read More / Read Less functionality, we use a [multi-state box](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/multi-state-boxes/about-multi-state-boxes.md). Multi-state boxes are great for switching between several views. They contain multiple states with different content, and display one state at a time.
One state in our multi-state box will contain the shorter (collapsed) content and one state will contain the longer (expanded) content. We'll use code to enable site visitors to switch between the 2 states by clicking "Read More" and "Read Less" buttons.
### Step 1: Add a Multi-State Box
**To add a multi-state box to your page:**
Wix Studio:
1. If necessary, click  and then **Start Coding**.
2. Click the **Add** panel and select **Layout Tools > Multi-state Boxes**.
3. Drag a multi-state box element onto your page.
Wix Editor:
1. Make sure Velo Dev Mode is [enabled](https://dev.wix.com/docs/develop-websites/articles/get-started/about-developing-websites.md).
2. Click **Add**  on the left side of the editor.
3. Click **Interactive**.
4. Drag a multi-state box element onto your page.
### Step 2: Rename Your Multi-State Box and State
When you click your multi-state box, you can see the ID (name) of the multi-state box in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md). When you click **Manage States**, you can see the IDs of the default states for the multi-state box.
You can rename both your multi-state box and your states in the Properties & Events panel. It's a good idea to give your IDs meaningful names, since you'll be using them in code.
We renamed our multi-state box to `readMoreStatebox` and our state to `collapsedState`, since this state will have the collapsed version of the text.
### Step 3: Add Content to Your Collapsed (Short) State
Now you can add your page content to your state: images, videos, text, or other elements. Make sure the elements fit within the borders of your multi-state box so they'll be attached to the state.
Since this is the collapsed state, add the short version of your text.
### Step 4: Add a "Read More" Button
When you're finished setting up your state, do the following:
1. Add a transparent button (with no background or border) to your state from the Add panel.
2. Change the button text to **Read More** and match the font type and size to the rest of your text.
3. Rename the button ID to `readMoreButton` in the Properties & Events panel.
4. Append the button to the end of the collapsed text.
### Step 5: Duplicate Your State
Now you can duplicate your collapsed state and then adjust it to create the expanded state:
1. Click your multi-state box and click **Manage States**.
2. Click **Duplicate State**. Now you're in the second state of your multi-state box.
>**Note**
> You can switch between your states by clicking **Manage States** and selecting the state you want to edit.
### Step 6: Set Up Your Expanded (Long) State
1. Rename the duplicated state ID to `expandedState` in the Properties & Events panel.
2. Add the longer text to this state. You can resize the multi-state box if you need by dragging its handles at the edge of the box.
3. Change the **Read More** button text to **Read Less**.
4. Rename the button ID to `readLessButton` in the Properties & Events panel.
5. Move the button to the end of the longer text.
### Step 7: Add Code
Now we need to write code to define when to switch between the collapsed state and expanded state. We use the [MultiStateBox API](https://www.wix.com/velo/reference/$w.MultiStateBox.html) to define when to switch states.
1. Open the code panel.
+ Learn how to work with the **Wix Studio** [code panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md).
+ Learn how to work with the **Wix Editor** [code panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md).
2. Add the code in lines 2-8 below to your `onReady()` function so that the code on your page looks like this:
```javascript
$w.onReady(function () {
$w("#readMoreButton").onClick(() => {
$w("#readMoreStatebox").changeState("expandedState");
});
$w("#readLessButton").onClick(() => {
$w("#readMoreStatebox").changeState("collapsedState");
});
});
```
#### Understanding the Code
* **Line 2:** When the **Read More** button is clicked, do the following:
* **Line 3:** Change the current state of the `readMoreStatebox` multi-state box to the `expandedState`.
* **Line 6:** When the **Read Less** button is clicked, do the following:
* **Line 7:** Change the current state of the `readMoreStatebox` multi-state box to the `collapsedState`.
Preview your site to make sure everything is working as expected. Then go ahead and publish.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Hiding an Element on Certain Pages
## Article: Hiding an Element on Certain Pages
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/hiding-an-element-on-certain-pages.md
## Article Content:
# Velo Tutorial: Hiding an Element on Certain Pages
This tutorial explains how you can use [Velo](https://dev.wix.com/docs/develop-websites/articles/get-started/about-developing-websites.md) to show an element on all pages except for some of them. In other words, you have an element on your site that is part of a [global section](https://support.wix.com/en/article/studio-editor-using-global-sections#setting-a-global-section) (Wix Studio), or that is set to [show on all pages](https://support.wix.com/en/article/showing-an-element-on-all-pages-6533570) (Wix Editor), and you want to hide it on one or more of your pages.
Note that some elements appear on all pages by default based on their functionality, without this setting (for example, the Wix Chatbox). These elements don't require this setting. You can still use the code in this tutorial to hide them.
This tutorial has 2 parts:
* Instructions on how to get set up, including code you can copy and paste onto your page
* An explanation of what each line of code does
>
> The functionality described in this tutorial works only on your published site.
### Instructions
1. Start with an element that is part of a [global section](https://support.wix.com/en/article/studio-editor-using-global-sections#setting-a-global-section) (Wix Studio), or is set [to show on all pages](https://support.wix.com/en/article/wix-editor-showing-an-element-on-all-pages) (Wix Editor).
2. Navigate to a page where you don't want that element to appear.
3. Copy the code below and paste it in your page code under the line that says "// TODO: write your JavaScript here…"
```javascript
// Hides the element when the page loads
$w("#myElement").hide();
```
1. Make sure to make this substitution:
* _#myElement_: the ID of the element that you want to hide on the current page (hover over it to see its ID)
2. Publish the site and view the page to make sure the element does not appear.
If you want to hide other elements, just add all their element IDs to the line of code, like this:
```javascript
// Hides these elements when the page loads
$w("#myElement, #myElement2, ...").hide();
```
### Understanding the Code
The image below shows what the code looks like in the code editor.
Line 3 calls the [`onReady()`](https://www.wix.com/velo/reference/$w/onready) function. This defines the code that will run when the page is finished loading.
Line 5 calls the `hide()` function, which sets the element's `hidden` property to `true`. This means the element will not be displayed on this page even if the element is part of a global section (Wix Studio), or is set to "Show on all pages" (Wix Editor).
If you decide you want to display the element, you can change the `hide()` function to `show()`.
One thing to keep in mind is this: a hidden element still takes up room on the page. In other words, depending on the layout of your page, even though the element is hidden, it could still leave a gap. Instead of hiding your element, you can use the `collapse()` function, because a collapsed element does not take up any space on the page.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Capturing and Displaying Ratings
## Article: Capturing and Displaying Ratings
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/capturing-and-displaying-ratings.md
## Article Content:
# Velo Tutorial: Capture and Display Ratings
This tutorial shows you how you can capture and display ratings of your items from your visitors. You will set up a Ratings Display element to display the current average rating and the total number of ratings. Then using a Ratings Input element, you'll capture your visitor's rating, calculate the new average rating and total number of ratings, and then update the collection and the Ratings Display element with the new values.
You'll need a collection with items you want to let your visitors rate and a page with a dataset connected to that collection.
This tutorial has 3 parts:
* [How to set up your collection and your page](#set-up)
* [Code you can copy and paste onto your page](#the-code)
* [A detailed explanation of the code](#code-explanation)
## Set up
This section covers what you need to prepare in your collection and what you need to do in your page in the editor.
#### In your collection
1. Make sure your collection's [permissions](https://support.wix.com/en/article/changing-your-database-collection-permissions) allow visitors to view and add content.
2. Add 3 new Number fields, for the average rating, number of ratings submitted, and sum of all the ratings submitted. You can leave these fields blank or input starting values. Remember that the average rating must be between 1 and 5.
#### In your page
1. Set your dataset's [mode](https://support.wix.com/en/article/working-with-dataset-modes-and-collection-permissions) to "Read and Write." This will let your visitors update information in the collection.
2. Add the following elements:
1. A [Ratings Display](https://support.wix.com/en/article/working-with-the-connect-ratings-panel) element connected to the new Number fields in your collection.
2. A [Ratings Input](https://support.wix.com/en/article/ratings-input) element your visitors can use to pick a rating for the item. You can use the default setting for the ratings, or define your own. Don't connect it to the dataset.
## The code
This section has 2 parts. The first part shows you how to add the event handler to the Ratings Input element. The second part has the actual code that you can copy and paste onto your page.
#### Add the event handler
An [event handler](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) adds code that only runs when your visitor performs a certain action. In our code, we used the "onChange" event, so that the rating is saved when our visitor makes their selection in the Ratings Input.
**To add the event handler:**
1. Select your Ratings Input.
2. In the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md), click the "onChange" event handler.
The code for the event handler is added to the bottom of your page code. The image below shows what it looked like on our page.
```js
$w('#ratingsInput1').onChange((event) => {
//Add your code for this event here:
})
```
#### Add the code
1. Copy the code below and paste it into the event handler method above the line that says "//Add your code for this event here:". You can delete that line if you want.
```javascript
$w("#dataset1").onReady(() => {
// get the current item from the dataset
const currentItem = $w("#dataset1").getCurrentItem();
// get the current average rating, number of ratings, and
//total ratings for the current dataset item
const average = currentItem.avg;
const count = currentItem.numRatings;
const total = currentItem.totalRatings;
// get the new rating from the ratings input
const newRating = $w('#ratingsInput1').value;
// calculate the new average rating based on the current
//average and count
const newAverageLong = (total + newRating) / (count +1);
// Round the average rating to 1 decimal point
const newAverageShort = Number.parseFloat(newAverageLong).toFixed(1);
// set the dataset fields to the new average, total
// ratings, and number of ratings
$w('#dataset1').setFieldValues({
'avg': newAverageShort,
'totalRatings': total + newRating,
'numRatings': (count + 1)
});
// save the dataset fields to the collection
$w('#dataset1').save()
.catch((err) => {
console.log('could not save new rating');
});
});
```
2. Make sure to make these substitutions.
* `'#myDataset1'`: The ID of your dataset
* `avg`: The field ID of the field in your collection that holds the average rating
* `numRatings`: The field ID of the field in your collection that holds the total number of ratings received
* `totalRatings`: The field ID of the field in your collection that holds the sum of all ratings received
* `'#ratingsInput1'`: The ID of your Dropdown element
3. Preview your page and test out the Ratings Input element. Watch how the ratings display element updates when you add a rating.
4. Go back to the Content Management System (CMS) to see how the average rating and the total number of ratings for that item have been updated in your collection.
## Code explanation
First we read the current item from the dataset. Then we define variables called `average`, `count` and `total`, and set their values to be the item's current average rating, number of ratings, and the sum of all the ratings.
```js
const currentItem = $w("#myDataset").getCurrentItem();
const average = currentItem.averageRating;
const count = currentItem.numRatings;
```
We define a variable called `newRating` and set its value to be the rating selected by the user in the Ratings Input.
`const newRating = Number($w('#ratingsInput1').value);`
Next we calculate the updated average rating and save it to a variable called `newAverageLong`. We then round the results to 1 decimal place and assign it to the variable `newAverageShort`.
```js
const newAverageLong = (total + newRating) / (count + 1);
const newAverageShort = Number.parseFloat(newAverageLong).toFixed(1);
```
Now we save the new average rating, sum of all the ratings, and total number of ratings to the current item. We include code to deal with errors should they occur.
```js
$w('#dataset1').setFieldValues({
'avg': newAverageShort,
'totalRatings': total + newRating,
'numRatings': (count + 1)
});
$w('#dataset1').save()
.catch((err) => {
console.log('could not save new rating');
});
```
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Creating a Rich Text Editor Using the HTML Component
## Article: Creating a Rich Text Editor Using the HTML Component
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/creating-a-rich-text-editor-using-the-html-component.md
## Article Content:
# Velo Tutorial: Creating a Rich Text Editor Using the HTML Component
Before reading this article, you might want to learn about [Working with the HTML Component in Velo](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/other-elements/html-i-frame-element/working-with-the-html-iframe-element.md).
In this article, we demonstrate how to use an HTML Component to add a rich text editor to your page.
We start by creating the following page:
Clicking **View** directs you to the **Packages & Apps** section of the Code sidebar (Wix Editor) or Code sidebar (Wix Studio) where you can see the installed Velo package. If there is a major update available for a package installed on your site, or if there is a minor update available and the automatic updates option toggle is turned off, you'll see a blue dot next to the package.
>**Note**
> By installing a Velo Package that uses an npm package, you agree to that npm module's license agreement.
### Using an Installed Package
Once you install a package, read the package's README file. The README includes all the information you need to work with the package: initial setup prerequisites, which exported functions are available for use, and how to use the package.
To use the package functions, you'll need to import them in your code.
Use the **@velo namespace** to import Velo packages. Note that import statements within the **@velo namespace** differ depending on the location and type of package file the function is exported from.
To import backend functions, use the following syntax:
```javascript
import { **Notes** * If you want to use backend functions from a .js file in your page code, wrap the function in a [web module](https://support.wix.com/en/article/velo-web-modules-calling-server-side-code-from-the-front-end), and import the web module to your page code. * Some Velo packages include web modules. You can call web module functions directly from your backend code, public code, or page code. Import them with the syntax for importing backend functions.To learn more about which import statements to use for each Velo package, see the package's README file. #### Package Examples To help you understand how to use specific Velo packages on your site, we added some examples to the [Coding Examples site](https://dev.wix.com/docs/coding-examples.md) that integrate Velo packages. You can open an example site and see the code we added to work with the package. You'll see a Velo Package tag on examples that integrate a Velo Package. 
**Note:** These package examples and their steps are based on Wix Editor sites. You can adapt the steps for a Wix Studio site by using the equivalent [Wix Studio](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/overview/about-coding-with-wix-studio.md#finding-your-way) features.### Updating a Package's Version If there is a **minor update** to a package installed on your site: * If the automatic updates option toggle is turned on, the package will update automatically. * If the automatic updates option toggle is turned off, you'll see a blue dot next to the package in the Code sidebar. If there is a **major update** to a package installed on your site, you'll see a blue dot next to the package in the Code sidebar. To update the package on your site: 1. Hover over the dot and click **See Release Notes** in the tooltip.
The Package Manager opens and you can see the available update.
2. In the README on the right side of the Package Manager, scroll down to the Release Notes section to view the relevant changes for this update.
3. If you want to update the package, click **Update to X.X.X**.
You can view all versions of a package by clicking the ellipsis icon **>** **See all versions**.
**Important** After applying a package update, make sure that the code on your site is compatible with the updated version of the package.### Uninstalling a Package To uninstall a package: 1. In the **Velo Packages** section of the Code sidebar (Wix Editor) or the Code sidebar (Wix Studio), hover over the package you want to uninstall. Click the ellipsis  icon, and select **Uninstall**. 2. The package is removed from the **Velo Packages** section of the Code sidebar (Wix Editor) or the Code Sidebar (Wix Studio).
**Warning** When you uninstall a package, you may break code that relies on that package.### Requesting a Package To request that a package be added to the list of Velo packages built by Wix, click **Make a request for a new Velo package** at the bottom of the Package Manager.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Custom Apps
## Article: Working with Your Velo Packages
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/packages/about-custom-apps.md
## Article Content:
# About Custom Apps
> **Note:** Custom apps replace Velo packages built by you. Now, instead of creating packages, functionality is managed as apps.
Custom apps are applications you create using [Wix Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/about-wix-blocks.md) to add functionality that can be used across multiple Wix sites. Your custom apps are private and only you can install them on sites where you're a site contributor. Once installed, all site contributors can access the functionality of the custom app.
Using custom apps allows you to unify the following functionality across your sites:
- Widgets
- Code
- [Dashboard extensions](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/dashboard-extensions/about-dashboard-extensions.md)
- [Collections](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/cms-collections-in-blocks/about-cms-collections-in-blocks.md)
For example, you might use custom apps to do the following across your sites:
- Ensure a standardized visual design.
- Centralize and reuse custom logic and code.
- Add and manage custom dashboard features.
- Use uniform data structures and content setups.
## Supported IDEs
You can use and access functionality from your custom apps using:
- The editor (Wix Studio and Wix Editor)
- The Wix IDE
- Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md)
> **Note:** You must have a Wix Studio account to create a Blocks app.
## Accessing custom app functionality on a site
Install and manage your custom apps, including the version installed on the site, under **Custom Apps** when you click **App Market**  in the Editor.
Once installed, a custom app's functionality is automatically available on your site. To learn how to access the functionality, see [Install a Blocks App on a Site](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/deploy-and-manage-blocks-apps/install-a-blocks-app-on-a-site.md#change-the-installed-app-version).
## See also
- [Install a Blocks app on a site](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/deploy-and-manage-blocks-apps/install-a-blocks-app-on-a-site.md#change-the-installed-app-version)
- [About Wix Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/about-wix-blocks.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: About Routers
## Article: About Routers
## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md
## Article Content:
# About Routers
Wix gives you the ability to display multiple items from your data collection with [dynamic pages](https://support.wix.com/en/article/cms-about-dynamic-pages). In your site editor, you see only one dynamic item page, but visitors to your site see multiple pages with the same design, each rendering a different item from your collection. You can set a unique URL for each of these item pages.
Behind the scenes, Wix creates a router that handles incoming requests to the dynamic page and directs the client to the correct URL. Wix also handles SEO for you in the background. However, if you prefer to handle requests with your own custom logic, you can create your own router.
With your own router, you have full control over how your site handles incoming requests, as well as the SEO for dynamic pages. You set up a router to receive all incoming requests with a specified prefix, and define the logic of what to do when a request with that prefix is received. You decide what actions to perform, what response to return, where to route the request, and what data to pass to the page.
You might want to use a router to:
* Display a dynamic page using content from any data source.
* Customize your URLs to make them more meaningful and yield better SEO results.
* Authenticate users and then display content just for them.
* Return custom HTTP response codes.
In the following sections, we review the important components of creating a router for your site.
## Supported IDEs
You can create routers using:
* The [editor](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/workspaces/wix-studio-working-with-the-code-panel.md) (Wix Studio and Wix Editor).
* The [Wix IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/wix-ide/wix-studio-about-the-wix-ide.md).
* Your [local IDE](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/git-integration-wix-cli/about-git-integration-wix-cli.md) (Wix Studio and Wix Editor).
## URL prefix
When you create a router, you specify a URL path prefix that follows your site's domain name. The prefix is the part of the URL shown in angle brackets in the following examples:
* Premium site: `https://domain.com/
__Tip:__ In case you don't know your collection ID, in the sidebar go to **CMS** > **Your Collections**. Open the menu for your collection and click **Edit settings**. The modal that pops up contains some information about your collection including its ID.1. Now we need to handle the case where the `path` variable is _not_ empty. There are two cases here: - The visitor requests an existing path. - The visitor requests a path that doesn't exist. Let's start with the case where the requested path exists. Add the following `else` statement to the `if` we just wrote: ```js else { const results = await wixData.query('RealEstateListings') .eq('slug', request.path[0]) .find(); if (results) { const listing = results.items[0]; const seoData = { title: listing.title, metaTags: [ { name: 'description', content: listing.description }, { name: 'og:title', content: listing.title }, { property: 'og:image', content: listing.image } ], }; return ok('listing', listing, seoData); } } ``` **Lines 2-4:** We again query the collection, but this time we filter the data by searching for a slug that matches one in the collection. **Lines 6-8:** If we get a result, we pull the item data out and place it in a variable `listing`. **Lines 10-24:** We use the data from `listing` to populate the SEO object. **Line 26:** We pass the listing and SEO data to the `ok()` function to render the correct page to the visitor. To handle the case of a request for a non-existing path, we only need to make one simple addition: ```js else { const results = await wixData.query('RealEstateListings') .eq('slug', request.path[0]) .find(); if (results) { const listing = results.items[0]; const seoData = { title: listing.title, metaTags: [ { name: 'description', content: listing.description }, { name: 'og:title', content: listing.title }, { property: 'og:image', content: listing.image } ], }; return ok('listing', listing, seoData); } else { // Add this to handle requests for items that don't exist return notFound(); } } ``` **Line 28:** Send the requester to an error page if we don't find the slug in our collection. This completes the code for our router function. Our router now knows how to handle requests for the index page and the dynamic item pages. ## Step 4 | Add the sitemap code The sitemap is necessary for your site's SEO. When you use dynamic pages, Wix handles the SEO and site mapping for you. But when you manually create dynamic pages with your own router, you must build your own sitemap using the provided function. The sitemap function also appears in `routers.js`, immediately below the related router function. In this tutorial, the sitemap function is called `listings_SiteMap()`. 1. Delete the sample code in `listings_SiteMap()` and add the following code: ```js export async function listings_SiteMap(sitemapRequest) { const { items: listings } = await wixData.query('RealEstateListings').find(); const siteMapEntries = listings.map(listing => { const entry = new WixRouterSitemapEntry(listing.title); entry.pageName = 'listing'; entry.url = '/listings/' + listing.slug; entry.title = listing.title; return entry; }); const indexEntry = new WixRouterSitemapEntry('Property Listings'); indexEntry.pageName = 'listings-page'; indexEntry.url = '/listings' indexEntry.title = 'Property Listings'; siteMapEntries.push(indexEntry); return siteMapEntries; } ``` **Line 2:** We query the collection to get the item data, and store the data for each item in an object `listings`. **Line 4-10:** We create a new site map entry for each item in the collection and map it to a new array `siteMapEntries`. We set the sitemap entry title from the title of the listing, and use the item's slug to create the entry's URL. **Lines 12-17:** We also need to add the index page to the site map, so we create a separate sitemap entry and push it to the `siteMapEntries` array. **Line 19:** Return the sitemap. We've created the sitemap, and now have a fully functional router that works with SEO. Here's the full code of `router.js`, including the router and sitemap functions: ```js import {ok, notFound, WixRouterSitemapEntry} from "wix-router"; import wixData from "wix-data"; export async function listings_Router(request) { // If the request doesn't have a path attached, render the index page if (!request.path[0]) { const { items: listings } = await wixData.query('RealEstateListings').find(); const seoData = { title: 'Property Listings', description: 'List of available properties', noIndex: false }; return ok('listings-page', listings, seoData); } else { const results = await wixData.query('RealEstateListings') .eq('slug', request.path[0]) .find(); if (results) { const listing = results.items[0]; const seoData = { title: listing.title, metaTags: [{ name: 'description', content: listing.description }, { name: 'og:title', content: listing.title }, { property: 'og:image', content: listing.image }], }; return ok('listing', listing, seoData); } else { return notFound(); } } } export async function listings_SiteMap(sitemapRequest) { const { items: listings } = await wixData.query('RealEstateListings').find(); // Convert the data to site map entries const siteMapEntries = listings.map(listing => { const entry = new WixRouterSitemapEntry(listing.title); entry.pageName = 'listing'; // The name of the page in the Wix editor to render entry.url = '/listings/' + listing.slug; // Relative URL of the page entry.title = listing.title; // For better SEO - Help Google return entry; }); const indexEntry = new WixRouterSitemapEntry('Property Listings'); indexEntry.pageName = 'listings-page'; // The name of the page in the Wix editor to render indexEntry.url = '/listings' // Relative URL of the page indexEntry.title = 'Property Listings'; // For better SEO - Help Google siteMapEntries.push(indexEntry); return siteMapEntries; } ``` ## Step 5 | Test dynamic pages 1. Publish your site by clicking **Publish** in the top right corner of the editor. 1. Open the menu in the top left corner and click **Site** > **View Published Site**.  The published site opens in a new tab. You should see the homepage first:  1. Click the button on the homepage to go to the listings index page. Because you're requesting to view a page with the `listings` URL prefix, Wix passes the request to your router to handle. The site should navigate to the dynamic index page you created. From there, click on any of the listings on the page. The site then navigates to the dynamic item page, correctly rendered for the item you selected. Again, this request is handled by the router.  1. You can return to the index page and test out the other listings if you wish. Each time you click on a listing, you make a request to the router and it fetches the item data from the `Real Estate Listings` collection, and renders it on the item page. This is the same thing Wix does when you add dynamic pages to your site! 1. Now that you know your router is working, let's take a brief look at the sitemap. Return to your homepage and in the address bar, add `/sitemap.xml` to your site address. It looks something like this: ```bash https://mysite.wixstudio.io/test-site/sitemap.xml ``` 1. Navigate to the address and you'll see your site's sitemap displayed in XML. For example: ```xml
Write: 1500/minute |Data request timeout|5 seconds |External database integration|Yes ### Compute platform |Feature |Limit | |---|---| |Backend containers| 1 micro container |Capacity per container|1 vCPU
400 MB RAM |Backend requests per minute|7000 |Backend request timeout|14 seconds ### Developer tools |Feature |Limit | |---|---| |Scheduled jobs|Up to 20
1 hour minimum interval |Backend event handlers|Yes |Service plugins|Yes --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Using Velo with a Free Wix Site ## Article: Using Velo with a Free Wix Site ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/using-velo-with-a-free-wix-site.md ## Article Content: # Using Velo with a Free Wix Site You can try out most Velo and Data features with a [free site](https://support.wix.com/en/article/building-a-website-for-free). As you develop your site you may reach some of the free site quotas, and can select a [plan](https://www.wix.com/upgrade/website) to increase the number of features and resources available for your site. >**Note:** Some Velo and data quotas are not enforced on all sites yet. The following table lists the feature and resource quotas available for free sites. You can learn more about each feature [here](https://support.wix.com/en/article/velo-about-premium-packages). |Feature|Free Site Limit| |--|--| |**Data Platform**| | |Dedicated infrastructure|Not available |Data storage|1,000 items |Data collections|1,000 |Data indexes|4 |Data requests per minute|1000 reads
60 writes |Data request timeout|5 seconds |**Compute platform**|| |Backend containers| 1 micro |Capacity per container|1 vCPU
400 MB RAM |Backend requests per minute|60 |Backend request timeout|14 seconds |**Developer tools**|| |Scheduled jobs|20 jobs
1-hour minimum interval --- > Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Data Features ## Article: Data Platform Features ## Article Link: https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/limits-and-optimization/data-features.md ## Article Content: # Data Features All sites have different data capacities and resource needs. Data quotas apply to anything making data requests on a site, including the [CMS (Content Management System)](https://support.wix.com/en/article/about-the-content-manager-7160473), [Datasets](https://support.wix.com/en/article/about-datasets-6368396), and the Velo [Wix Data API](https://www.wix.com/velo/reference/wix-data). This article covers the data platform features that are available based on your [premium plan](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/premium-plans/about-premium-plans.md). Learn about the differences and [choose the plan](https://www.wix.com/upgrade/website) that's right for you. ## Data storage A site's collections and items are hosted by Wix, and there is a limit to the amount of data you can store on a site. This limit only applies to your collection items. ### Collection items Wix limits the total number of collection items a site can have. If a site reaches this limit, you won't be able to add any more data to any of your collections. The collection items limit is not applied to [Wix app collections](https://support.wix.com/en/article/content-manager-working-with-wix-app-collections) or [external database collections](https://support.wix.com/en/article/velo-adding-and-deleting-an-external-database-collection) connected to a site. It also doesn't apply to items in [sandbox collections](https://support.wix.com/en/article/cms-about-sandbox-and-live-collections-and-syncing). Collection items can also include media or other files, which have [separate limits](https://support.wix.com/en/article/about-storage-and-bandwidth).
**Notes**: - If a site exceeds its storage quota and you delete data to free up space, it may take up to 1 hour before you can add new data to your collections. - There are also some [limits](https://support.wix.com/en/article/field-type-support-and-limitations-in-the-content-manager) that are specific to certain field types. - Collections in Blocks apps also affect a [site's collection item limit](https://support.wix.com/en/article/wix-studio-cms-limits-on-free-sites) depending if the app is private or public: - **Private Blocks apps**: Items in collections from private Blocks apps count towards the site's collection item quota. - **Public Blocks apps**: Items in collections from public Blocks apps, installed from the Wix App Market, don't count towards the site's collection item quota.
Downgrade behavior
If you downgrade to a lower tier plan, the storage quota changes to the one defined by the new plan. If your site has more than this amount of data when you downgrade, none of your data is deleted. However, you can't add any new data to your site until you delete enough existing data to be below the quota.Downgrade behavior
If you downgrade to a lower tier plan, the oldest indexes are maintained up to the new plan's quota. All other indexes on the site are deleted. If you downgrade to a free plan, all indexes are deleted.Downgrade behavior
If you downgrade to a lower tier plan and you have more jobs on your site than the new plan allows, some of your jobs may not run.See an example
Instead of calling a series of backend functions from your frontend code, like this: ```js import {getSalary, getTax, calculateFinalSalary} from 'backend/myBackend.jsw'; const salary = await getSalary(employeeId); const tax = await getTax(employeeId); const finalSalary = await calculateFinalSalary(salary, tax); ``` You can batch the requests together in the backend and make one call to the batch function from the frontend, like this:**Frontend code** ```js import {calculateFinalSalary} from 'backend/myBackend.jsw'; const finalSalary = await computeFinalSalary(employeeId); ``` **Backend code** ```js export function computeFinalSalary(employeeId) { const salary = getSalary(employeeId); const tax = getTax(employeeId); return calculateFinalSalary(salary, tax); } ```
See an example
To test your code’s running time using console logs, do the following: 1. In your backend code, add [`console.time()`](https://developer.mozilla.org/en-US/docs/Web/API/Console/time) before calling a function and [console.timeEnd()](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd) after the call. For example: ```js export function rocketModel () { console.time(); const trajectory = calculateTrajectory(velocity, direction); console.timeEnd(); } ``` 2. Open [Wix Logs](https://support.wix.com/en/article/velo-viewing-live-site-monitoring-events) log. 3. Use [Functional Testing](https://support.wix.com/en/article/velo-functional-testing-in-the-backend) to trigger your backend code. 4. Check the log to see how long it took your function to run. The results are displayed in your **Wix Logs** window: 
Follow the steps below to create a currency converter with the wix-fetch API.
### Step 1: Create a New Wix Site
1. Sign into your Wix account or [sign up for a Wix account](https://users.wix.com/signin?overrideLocale=en&loginDialogContext=signup) if you don’t already have one.
2. Open a blank template in [Wix Studio](https://wixstudio.new/) or the [Wix Editor](https://editor.wix.com/html/editor/web/renderer/new?siteId=cbf36d3a-49d0-41c2-9482-1bb58d5fdda3&metaSiteId=a573279f-ae6f-46d1-8556-7c93ae9b2c84&editorSessionId=799795e9-07c2-4e7e-8a17-33dab829f776).
### Step 2: Enable Velo Dev Mode
+ **Wix Studio:** In the Code panel, click **Start Coding**.
+ **Wix Editor:** In the top bar of the Wix Editor, click **Dev Mode > Turn on Dev Mode**.
### Step 3: Add Elements to the Page
Add page elements in the editor:
1. On the left side of the editor, click **Add Elements**.
2. Add the page elements illustrated below to your site.
* When you add each element, set its ID in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md). In Wix Studio it appears at the bottom of the code editor, and in Wix Editor, the Properties & Events panel appears on the right side of the code editor.
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|User Input|For selecting the source currency|sourceCurrency
|Dropdown|User Input|For selecting the target currency|targetCurrency
|Input|User Input|For entering the amount to convert|sourceAmount
|Text Box|User Input|To display the converted amount|targetAmount
|Button|Button|To trigger the currency conversion when clicked|calculateButton
### Step 4: Add Code
>**Notes**
> * 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](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/tutorial-using-the-fetch-api-to-add-a-currency-converter.md) to the end of the tutorial.
> * See our [API Reference](https://www.wix.com/velo/reference/) to learn more about the Velo-based code in this example.
**To add the code:**
1. + **Wix Studio:** On the left, click  **> Page Code**.
+ **Wix Editor:** In the Code sidebar, click **Page Code**. Under **Main Pages** double-click the page labeled **HOME**.
2. Add the following code to the top of the code in the tab before the [onReady](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) function:
```javascript
// The getJSON function in wix-fetch lets you retrieve a
// JSON resource from the network using HTTPS.
import {getJSON} from 'wix-fetch';
// Set the URL of the 3rd-party service.
const url = "https://api.exchangerate.host/convert";
// Define the currency option values and text for the dropdowns.
let currencyOptions = [
{ "value": "USD", "label": "US Dollars"},
{ "value": "EUR", "label": "Euros"},
{ "value": "JPY", "label": "Japanese Yen"},
];
```
3. Add the code below to the [onReady](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/working-in-the-code-editor.md) function. Code inside the onReady function runs when the page loads.
```js
$w.onReady(function () {
// Set the currency options for the dropdowns.
populateDropdowns();
// Set the onClick event handler for calculateButton to calculate the target amount.
$w('#calculateButton').onClick((event) => {
calculateCurrency();
})
});
```
The [`$w`](https://www.wix.com/code/reference/$w.html#$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, `$w("ElementType")`.
Here we select the button and define an `onClick` [event handler](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md) to calculate the target amount.
4. Add code to define the functions:
**populateDropdowns( )**
```js
// Populate the dropdowns.
function populateDropdowns(){
//Set the dropdown options.
$w("Dropdown").options = currencyOptions;
// Set the first dropdown option as the initial option.
$w("Dropdown").selectedIndex = 0;
}
```
Here we select all the dropdowns by type. By calling [`$w`](https://www.wix.com/velo/reference/$w.html) with the element type "Dropdown", we select all dropdowns on the page
**calculateCurrency( )**
```js
// Calculate the target amount.
function calculateCurrency() {
// Initial amount
let initialAmount = $w("#sourceAmount").value;
// Original currency
let sourceSymbol = $w("#sourceCurrency").value;
// Target currency
let targetSymbol = $w("#targetCurrency").value;
// Define the full url.
let fullUrl = `${url}?from=${sourceSymbol}&to=${targetSymbol}`;
// Call the wix-fetch API function to retrieve the JSON resource.
getJSON(fullUrl)
.then(json => {
// Set the target amount as the initial amount multiplied by
// the conversion rate.
$w("#targetAmount").value = initialAmount * json.info.rate;
}
)}
```
We use [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to define the full URL, which includes the source and target currencies.
The wix-fetch API [`getJSON`](https://www.wix.com/velo/reference/wix-fetch.html#getJSON) function retrieves the JSON resource using the full URL. `getJSON` returns a [promise](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/java-script-velo/working-with-promises.md), which resolves to a JSON object.
We multiply the retrieved rate by the initial amount and assign it to the `targetAmount` text box.
### Step 5: See It in Action
Now it's time to test your site:
1. In the top right corner of the editor, click  (Wix Studio) or **Preview** (Wix Editor).
2. Enter an amount in the source currency input.
3. Click the calculate button and see the converted currency result in the target amount text box.
4. [Publish](https://support.wix.com/en/article/publishing-your-site-6980885) your site to make it live and production ready.
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.
### Next Steps
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](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/web-modules/call-backend-code-from-the-frontend.md).
* Work with Wix's [visual builder](https://support.wix.com/en/article/getting-started-with-the-wix-editor).
* Add features and customize your site using [Velo APIs](https://www.wix.com/velo/reference/api-overview/introduction). Here are some examples of what you can do:
* [Collect](https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-pay/tutorial-using-the-velo-pay-api-to-collect-payments-for-a-single-product.md) payments
* [Create](https://support.wix.com/en/article/velo-tutorial-expand-text-with-a-read-more-link) a show-more link
* [Use](https://www.wix.com/velo/example/create-a-custom-chart) an HTML component to embed a chart on your page
* Work with the data from [other Wix Apps](https://dev.wix.com/docs/develop-websites/articles/databases/wix-data/collections/working-with-wix-app-collections-and-code.md) like [Stores](https://dev.wix.com/docs/develop-websites/articles/wix-apps/wix-app-collections/wix-e-commerce-stores/wix-stores-collections-collection-fields.md), [Bookings](https://dev.wix.com/docs/develop-websites/articles/wix-apps/wix-app-collections/wix-bookings/wix-bookings-services-collection-fields.md), and [Events](https://dev.wix.com/docs/develop-websites/articles/wix-apps/wix-app-collections/other-apps/wix-events/wix-events-events-collection-fields.md)
* Visit the [Velo by Wix website](https://www.wix.com/velo) to onboard and continue learning. Check out Velo [documentation](https://dev.wix.com/docs/develop-websites/articles/get-started/about-developing-websites.md) and the [API Reference](https://www.wix.com/velo/reference).
### Example Code
Here is the complete code for this example, without comments:
```javascript
import {getJSON} from 'wix-fetch';
const url = "https://api.exchangerate.host/convert";
let currencyOptions = [
{ "value": "USD", "label": "US Dollars"},
{ "value": "EUR", "label": "Euros"},
{ "value": "JPY", "label": "Japanese Yen"},
];
$w.onReady(function () {
populateDropdowns();
$w('#calculateButton').onClick((event) => {
calculateCurrency();
})
});
function populateDropdowns(){
$w('Dropdown').options = currencyOptions;
$w('Dropdown').selectedIndex = 0;
}
function calculateCurrency() {
let initialAmount = $w("#sourceAmount").value;
let sourceSymbol = $w("#sourceCurrency").value;
let targetSymbol = $w("#targetCurrency").value;
let fullUrl = `${url}?from=${sourceSymbol}&to=${targetSymbol}`;
getJSON(fullUrl)
.then(json => {
$w("#targetAmount").value = initialAmount * json.info.rate;
}
)}
```
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Use External API Keys Stored in the Secrets Manager to Call the OpenWeatherMap API
## Article: Use External API Keys Stored in the Secrets Manager to Call the OpenWeatherMap API
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/use-external-api-keys-stored-in-the-secrets-manager-to-call-the-open-weather-map-api.md
## Article Content:
# Tutorial: Use External API Keys Stored in the Secrets Manager to Call the OpenWeatherMap API
In this tutorial, you'll learn how to securely use external API keys stored in the [Secrets Manager](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md) to call the [OpenWeatherMap API](https://openweathermap.org/api).
By keeping your API keys safe and confidential with the Secrets Manager, you can make secure API requests without exposing sensitive information in your code.
We'll use the following steps to call the OpenWeatherMap API with external API keys:
1. Save your API key in the Secrets Manager.
2. Configure your code to retrieve the API key and call OpenWeatherMap.
## Step 1 | Save your API key in the Secrets Manager
1. Access the Secrets Manager. There are 2 ways to navigate to the Secrets Manager:
- Select **Developer Tools** from the code panel. Under the Security section, select **Secrets Manager**.
- Select **Developer Tools** in your site's dashboard, and then select **Secrets Manager**.
2. Add and save the API key for the OpenWeatherMap API. For purposes of this tutorial we have named this key "WeatherApiKey".
## Step 2 | Write code to retrieve the API key and call OpenWeatherMap
Create a function in a web method to call the weather service and retrieve the data:
1. Import the functions needed to make `https` requests and to get secrets from the Secrets Manager.
For example:
```javascript
import {Permissions, webMethod} from "wix-web-module";
import {fetch} from 'wix-fetch';
import {getSecret} from 'wix-secrets-backend';
```
2. Create a new function and do the following:
a. Takes in a `city` whose weather you want to look up.
b. Defines the service's address.
c. Retrieves the API key from the Secrets Manager.
For example:
```javascript
export const getCurrentTemp = webMethod(Permissions.Anyone, async (city) => {
const url = 'https://api.openweathermap.org/data/2.5/weather?q=';
const key = await getSecret(WeatherApiKey);
// ...
}
```
3. Continue the function by constructing the full URL for the fetch request. The URL is made up of the service's address and an API key.
For example:
```javascript
let fullUrl = url + city + '&APPID=' + key + '&units=imperial';
```
4. Finish the function by receiving a response from the API call. When you receive the response, pull out the temperature data and return it.
For example:
```javascript
return fetch(fullUrl, {method: 'get'})
.then(response => response.json())
.then(json => json.main.temp);
```
### Example Code
Here is the complete code for this example, without comments:
```javascript
// serviceModule.web.js
import {Permissions, webMethod} from "wix-web-module";
import {fetch} from 'wix-fetch';
import {getSecret} from 'wix-secrets-backend';
export const getCurrentTemp = webMethod(Permissions.Anyone, async (city) => {
const url = 'https://api.openweathermap.org/data/2.5/weather?q=';
const key = await getSecret(WeatherApiKey);
let fullUrl = url + city + '&APPID=' + key + '&units=imperial';
return fetch(fullUrl, {method: 'get'})
.then(response => response.json())
.then(json => json.main.temp);
});
```
## See also
- [Wix Fetch API](https://dev.wix.com/docs/velo/api-reference/wix-fetch/introduction.md)
- [Wix Secrets Manager](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md)
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Adding Custom Interactivity with Events
## Article: Adding Custom Interactivity with Events
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/adding-custom-interactivity-with-events.md
## Article Content:
# Velo Tutorial: Adding Custom Interactivity with Events
In this tutorial, we’ll show you how to set up an image so that it’s hidden when the page loads, only becoming visible when your visitor clicks a button. We’ll start by adding an image and button to a page, then set up the button to run some code when it’s clicked. Then we’ll configure an image so that it doesn’t automatically load with the page. Finally, we’ll add the code that will make the image appear, with an animation, when the button is clicked.
## 1\. Enable Velo
- **Wix Editor:**
Click **Dev Mode** in your site's top bar and turn on **Enable Developer Mode** in the dropdown.
- **Wix Studio:**
If necessary, click  and then **Start Coding**..
## 2\. Set Up an Element to React to a User Action
Your site can react to user actions with [event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md). When you add an event handler to an element, you’re telling your site to watch the element to see if that event occurs. If it does, you’ll want your site to run some code.
**To set up an image to display when a button is clicked:**
1. Add a **button** and an **image** to your page.
2. Select the **button** and open the **Properties & Events panel** and then add the **onClick** event handler.
3. The function for your event handler is added to your code in the code editor:
```js
$w('#button1').onClick((event) => {
})
```
## 3\. Add Code to Your Event Handler
Now you’ll need to set up the image so it’s not visible when the page loads. Then add code so that the image appears when the button is clicked.
Interactions are coded using the Velo APIs. For example, to make an image appear, you’ll use the [`.show()`](https://www.wix.com/velo/reference/$w/image/show) function for the image element.
**To set an image to be hidden on load and to show on a button click:**
1. Select the **image** and open the **Properties & Events panel**, then select **Hidden**.
2. In the code editor, add the `.show()` function to your image element using the **image ID** which can be found in the **Properties & Events panel**.
```js
$w('#button1').onClick((event) => {
$w('#image1').show();
})
```
## 4\. Add an Animation
Many functions accept an optional parameter to change how the function works. For example, you can add animations like FadeIn, Drop-In, Fly-In, and Spin-In to the `.show()` function using the `effectName` parameter. To add a Slide-In animation when the button is clicked,
use `'slide'` as the `effectName` parameter as follows:
```js
$w('#button1').onClick((event) => {
$w('#image1').show('slide');
})
```
Now when the button is clicked, the `.show()` function runs on your image with the `'slide'` animation.
>**Note:**
> To make your image appear without an animation, don't add any parameters to your function.
## Next Steps
With Velo, you can do even more:
* Add more events and event handlers using the [Velo APIs](https://www.wix.com/velo/reference/api-overview).
* Make sections with alternating layouts using the [Slideshow](http://wix.to/94BuAAs/$w.Slideshow.html) element.
* Add collapsible sections.
* Add interactions on elements as they enter the viewport.
* Manipulate Text, Image, Gallery, Repeaters, and other elements using code.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Change the Text Label of a Button with Events
## Article: Change the Text Label of a Button with Events
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/change-the-text-label-of-a-button-with-events.md
## Article Content:
# Velo Tutorial: Change the Text Label of a Button with Events
An **Event** is something that happens to an element in your site. The **Events Handlers** section in the [Properties & Events panel](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/properties-events-panel/about-the-properties-events-panel.md) lets your site respond to these events by adding **Event Handlers** to your elements. For example, let's say you have a site with a "Take the tour" button. You'd like the text on the button to change to "Let's Go!" when the user hovers over it. Here's what you would do:
1. Use the Add panel to add a button to your site.
2. Change its text to "Take the tour".
3. The Properties & Events panel shows you the default properties for the button you just added.
4. In the Properties Panel, click on the **ID** name to rename the element to **takeTourButton** and press **Enter**. This makes the element easier to identify. (This isn't required, but it is recommended.)
5. In the **Event Handlers** section click **onMouseIn,** click the **+** , and press **Enter**. The name of the onMouseIn event handler is displayed.
6. Code is automatically added to the code editor. This is what you'll see there:
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
})
```
7. Let's add the code that changes the text on the button. Afterwards we'll go back and see how it worked. Under line 7 where it says: **//Add your code for this event here:** add a line and type **$**.
8. A popup window opens that contains a list of all the elements in your site surrounded by some code. Use the arrow keys to move down and select **$w("#takeTourButton")**.
9. Press **Enter** to add the code for the element you selected.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton');
})
```
10. Now enter a period at the end of the line and you'll see a popup window that contains a list of all the properties, methods, and events that you can use with your element. Use the arrow keys to scroll down and select the **label** property.
11. Press **Enter** to add the code you selected.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton');
})
```
12. To set the label to its new value add **\= "Let's Go!";** at the end of the line and save your work.
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
$w('#takeTourButton').label = "Let's Go!";
})
```
And that's it! Click **Preview** and you can test that your code works. Hover over the "Take the tour" button and it will change to look like this:
### Understanding the Code
When you selected the **onMouseIn** event handler in the **Event Handlers** section two things happened - one of them you can see and the other you can't. The thing you _can_ see is that these lines were added to the code editor for your page, which add the **takeTour\_mouseIn** function to your page code:
```javascript
$w('#takeTourButton').onMouseIn((event) => {
// Add your code for this event here:
})
```
This function is a block of code that will run whenever takeTourButton is hovered on. The way that works has to do with the thing that happened that you can't see.
The thing you _can't_ see is that Velo adds code to your page that watches or "listens" to your button to see if it's ever hovered on. If it is, Velo knows it needs to run any code that's inside the takeTourButton mouseIn function. That means any code between the { and } is run whenever takeTourButton is hovered on.
Now we come to the code that you created inside your event handler function. Some of what you needed to enter in the code editor is simply code syntax. Syntax is a set of rules that lets us communicate using code. In our case, the first thing we need to do is tell the code that we want to do something to takeTourButton. We do that with **$w("#takeTourButton")**. Why? You can obviously see the takeTourButton element name in there. The rest is the syntax that tells the code "This isn't just words, it's the name of an element on my page I want to do something to."
Each element has certain properties, methods, and events associated with it. Properties are the things about your element that you might want to know or change. In the example above we used the label property to set the label text of our button. You may have noticed that there were other properties like `link` and `id`, and methods like `hide` and `isEnabled`, that were also in the list for the button. The list of properties, methods, and events associated with an element is specific to that element. For example, a Text Element doesn't have the `isEnabled` method because it doesn't make sense to enable a Text Element. But a button can be enabled (clickable) or disabled (not clickable).
Then we added a period at the end of the element. This tells the code "Now I want to work with one of the properties, methods, or events that are associated with my element." `label` is the property that controls the text that appears on a button, so we selected it. Then all we needed to do was assign a new text to the label property, in our case "Let's Go!" The semicolon at the end is standard JavaScript syntax that says "this is the end of a line."
>**Note:**
> In this tutorial the event and the response to that event both happen on the same element. We add an event that watches to see if the user hovers on a button, and if they do we change the label of that button.
>
> It's important to note that you aren't limited to the event and its response being on the same element and that any event on any action can create a response on any other element in your site. It all depends on what element you select in the code you put inside your function.
---
> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Expand Text with a Read More Link
## Article: Expand Text with a Read More Link
## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/expand-text-with-a-read-more-link.md
## Article Content:
# Velo Tutorial: Expand Text with a Read More Link
This tutorial describes how to use [Velo](https://dev.wix.com/docs/develop-websites/articles/get-started/about-developing-websites.md) to let site visitors expand and collapse text with "Read More" and "Read Less" buttons.
Remove a border from a pre-designed multi-state box and blend it in with your page background
Click on the pre-designed multi-state box and update the design as follows: 1. Set the border width to 0. 2. Make sure the shadow is disabled. 3. Change the box's background color to match the color of your page's background color. >**Notes:** > - Pre-designed multi-state boxes aren't currently supported in Wix Studio. > - You can't remove the border from a blank multi-state box.
The left side of the page is a Wix Text element.
The right side of the page is created with an HTML Component. The component contains HTML that creates a [CKEditor](https://ckeditor.com/) and a button.
Using this setup, a user can enter rich text in the rich text editor, click the **Submit text** button, and the rich text will be displayed in the Wix text element.
#### Page Code
The following code is added to the code editor.
In the page's `onReady()` event handler, we set an event handler that runs when the page receives a message from the HTML Component. The event handler sets the text of the page's Text element to be the data sent from the HTML Component.
```javascript
$w.onReady(function () {
$w("#myHtmlComponent").onMessage( (event) => {
$w('#myText').html = event.data;
} );
} );
```
**Note:** We are using the Text element's **html** property to set its styled text. To learn about how a Text element displays content that is set using the **html** property, see [Formatting Text Elements with Velo](https://dev.wix.com/docs/develop-websites/articles/wix-editor-elements/formatting-layout/about-formatting-text-elements.md).#### HTML Component Code The following code is added to the HTML Component using the **Enter Code** or **Edit Code** button. It contains three main sections. In the `` tag, we define the HTML elements that make up our page: * A `