Get to know our frameworks

Select an app template built on your preferred framework.

Build apps on our native app editor. Use drag and drop elements, Velo code and Wix APIs to develop custom features.

Streamline your app development process with the Wix CLI. Get a familiar developer experience with minimal setup and configuration.

Take full control over your app's tech stack, deployment, and hosting.

App templates

Wix Blocks templates

Wix CLI templates

Self-hosted templates

Kickstart your app development with templates built on your preferred Wix developer tool. Browse templates for practical foundation and get to know the Wix ecosystem.

Wix App Templates for Developers

This example apps can be used as a starting point for building your own app, for concrete examples of how to use Wix framework, or for inspiration.

Choose a template.<0 />Build an app.

Browse by:

How to build it step by step:

This template is built with:

Read how this template was built, step by step.

How we built this template

Deployment instructions:

Choose a package manager and run the command in your terminal.

Copy command

Before you get started, make sure you have the following:

Prerequisite steps

Get started with Wix CLI

Begin by setting up your Next.js project with your preferred hosting platform.

Select your hosting service

Start the deployment flow and set up your template repo on Netlify. After you finish set up, come back here and add your Netlify custom domain.

Copy the code from our Git repo to deploy your app on any platform that supports Next.js.

Start the deployment flow and set up your template repo on Vercel. After you finish set up, come back here and add your Vercel generated URL.

Add the base URL and give your app a name.

App details

Go to the app dashboard and test your app to ensure a smooth integration within the Wix ecosystem. <0>Learn more about app checks and testing</0>

Define your environment

Terminal

Related templates

Note

Warning

Your app name will be used as the namespace suffix.

Name your app to generate a namespace. This lets you refer to your app in code later on.

Go Headless

Build Apps

Client

API Preview

Ricos

Develop Websites

REST

Velo

GraphQL (Alpha)

velo-spi_wix-automations

Runs your custom action when an automation is triggered.

Wix calls this function when an automation is triggered, for example by a form submission or a completed order. Therefore, write 
any code for your action in `invoke()`. Use the [Velo APIs](https://www.wix.com/velo/reference/api-overview) to create your 
action in the same way as you use them in your site's page code.

For example, let's say you want to save a site visitor's contact data to a collection when they submit a form. In this case,
Wix calls `invoke()` when the form is submitted. Write the code to save the 
contact data, using the relevant [wix-data](https://www.wix.com/velo/reference/wix-data) methods, in the `invoke()` function.

`invoke()` accepts the trigger payload as a parameter. This payload changes depending on what your trigger is. You can access the payload
fields and use them in your action code.

invoke

Fulfilled - An additional payload to pass to a chained action. Empty if no action follows the current one.

# Introduction
When you create a new automation on your site, you're presented with a variety of actions to perform after your automation is 
triggered. The actions available to you depend on which apps you have installed on your site. However, you also have the choice 
to create your own action, independent of any app.

The Velo Action service plugin (formerly SPI) allows you to provide your own actions for automations on your site. You can use the service plugin to write
code for a custom action instead of selecting a premade 
action. The action you create is specific for your site and cannot be used on other sites.

# Implement a custom action in Velo

The Velo Action SPI lets you develop your custom action directly in your site dashboard. Once you create a new automation, you can write your own action code using the **Run Velo Code** feature.

Working directly in the automation 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.

To write your action code, use the Velo APIs just like you would in your site's public or backend files.

## Before you start

- Make sure you're familiar with [Wix Automations](https://support.wix.com/en/article/wix-automations-getting-started) and how they
  work on Wix.
- The custom extensions feature currently can’t be added to a site when using Git integration and Wix CLI.
  You need to have permission to publish the site and the site must be published.
- This custom extension is intended for site owners who want to create custom actions on a single site. If you're a 3rd-party app developer interested in becoming an automation provider, see our documentation [here](https://dev.wix.com/docs/rest/business-management/automations/introduction).

## Create a custom action

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**.
3. Select and configure a [trigger](https://support.wix.com/en/article/wix-automations-creating-a-new-automation#step-2-choose-a-trigger).

   <blockquote class="important">

   __Important:__
   The code file you create for your custom action is associated with the original trigger you selected. 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.

   </blockquote>

4. Under **Choose an Action**, select **Run Velo code**. Then click **Start Coding** to add your code.

   ![Run velo code action](https://static.wixstatic.com/media/d4dde1_871065f2f911403686fac76cf064629c~mv2.png)

   You'll be prompted to create a new code file.

5. Give the file a name and click **Create & Start Coding**.

   > **Note:**
   > A file is created with the name you give under the **Custom Extensions** tab in your site's backend code.
   > Though you can add or edit code in this file, we recommend working only in the file that appears in your
   > automation. This allows you to verify you're working with the correct trigger, as well as take advantage of features like testing and payload viewer.

   You should now see something like this:

   ![Write velo action code](https://static.wixstatic.com/media/d4dde1_636f1a1ad55c4c0399410db29c86912b~mv2.png)

   The **Write Velo Code** modal contains two tabs. The first is the .js file where you write your code. This is a backend file
   that contains a single function, [`invoke()`](velo-action-spi/invoke).
   Write any code that you want the action to execute inside `invoke()`. Do not delete the `return` statement.

   The second tab, which appears under **Payload view**, lets you view the expected structure of the trigger payload. This changes
   depending on the trigger you select. The displayed payload is read-only.

6. 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.

7. 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.

   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/wix-automations-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.
