Velo: Working With Custom Apps

Note: Custom Apps replace Velo Packages Built by You. They are now managed as apps rather than packages.

You can add custom apps to your site, or add existing Velo packages built by Wix. This article describes how to work with custom apps created with Wix Blocks. This provides you with the ability to write code with specific functionality and use it across multiple sites. Note that the apps you create are private and only appear on sites for which you are the site owner. 

After you create a custom app in Wix Blocks, the app is available for installation. Once installed on your site, the app is visible to site contributors. They can then see the app under Custom Apps in the Packages & Apps section of the Velo Sidebar (Wix Editor) or the Code sidebar (Wix Studio).

Installing a Custom App

To install a custom app:

  1. In the left sidebar of the editor, navigate to Packages & Apps. In Wix Studio, you can find this in the Code tab.

  2. Hover over the Custom Apps section and click Show More and select Install custom app. The Custom Apps section opens.

  3. In the Available Apps section, look for the app you want to add to your site. 

  4. Click Install App. If your app has any widgets, you can see them in the App Widgets section of the Add Panel. View your installed app by clicking on the Add Apps icon (Wix Editor), or the App Market icon (Wix Studio). You should see your app under Installed Apps. You can also see your app in the Packages & Apps section of the Velo Sidebar or Code sidebar under Custom Apps.

Notes:

  • Wix Editor: Your app's files are read-only and can only be viewed by users with permission. Learn more about your package permissions.

  • Wix Studio: Currently you can only view your app's files in Wix Blocks.

Using an Installed App

To use the app's functions, you'll need to import them in your code.

Use your site username, @<username> namespace to import the custom app you created. Note that import statements within your namespace differ depending on the location and type of file the function is exported from.

Note: To better demonstrate the next few steps, we created a user account with the name "rebecca".

To import backend functions, use the following syntax:

Copy

For example, assuming your app has been installed, you can use the multiply() function from your app's backend file in your code as follows:

Copy

To import public functions, use the following syntax:

Copy

For example, assuming your app has been installed, you can use the animate() function from your app's public file in your code as follows:

Copy

Notes:

  • If you want to use backend functions from a .js file in your page code, wrap the function in a web module, and import the web module to your page code.
  • If your package includes 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.

Updating Your App's Version

Minor updates to your app are automatically updated. If you make a major update to your app in Wix Blocks, and the app is already installed on your site, you'll see a blue dot displayed next to the app.

To update the app on your site:

  1. Click the ellipsis icon next to the app.

  2. A dropdown menu opens with an option to update the app to the latest available version. In the dropdown menu, you can also:

Important After applying an app update, make sure that the code on your site is compatible with the updated version of the app.

Uninstalling a Custom App

To uninstall an app:

  1. In the Custom Apps section of the Packages & Apps tab, click the ellipsis icon, and then Uninstall.

  2. The app is removed.

Warning When you uninstall an app, you may break code that relies on that app.

Learn More

Did this help?