Introduction

Velo service plugins (formerly SPIs) provide you with a very powerful way to extend Velo’s functionality so that you can:

• Inject your own custom logic into existing app flows

  With the Velo service plugin feature you don't have to code a new flow from beginning to end if you want to customize and extend just one part of an existing app's flow. You can implement the code just for the customized part.

  For example, the out-of-the-box eCommerce checkout flow calculates the total charge for an order based on its line items. With Velo's Additional Fees service plugin, you can inject the ability to add additional fees that apply to the entire order. Examples of additional fees include fees for fragile items or surcharges for deliveries outside your regular delivery area.

• Integrate external services with your Wix site

  Use the service plugins to integrate with 3rd-party services so that your Wix site and the external services can communicate seamlessly. Some service plugins are available with the service plugins feature. Other service plugins, such as Site Monitoring and External Database Collections, are available without using the service plugins feature.

  For example, Velo's Shipping Rates service plugin lets you display shipping rates from different external service providers during checkout. Customers can then choose the shipping provider best for them.

Before you begin

It’s important to note the following points before starting to code:

• The service plugins feature is currently in beta and is subject to change. Some service plugins aren't yet available to all users.

• To use the Velo service plugins, you’ll need a working knowledge of JavaScript. When integrating with an external service, you'll also need familiarity with the external service’s APIs.

Terminology

Let's make sure our terms are aligned before we get started.

Learn more about Velo: Service Plugins

Implementing a Velo service plugin

The service plugins feature currently can’t be added to a site when using Git Integration & Wix CLI (Beta).

The process of implementing an service plugin in Velo generally has 3 steps:

1. Create a new plugin on your site
2. Implement your plugin with custom code
3. Deploy the plugin

See the tutorial for each service plugin for detailed instructions.

Need help implementing a service plugin? Find a professional to help you.

Step 1. Create a new plugin on your Wix site

The first step in setting up your new plugin is to add it to your site. This process creates a new folder in the Service Plugins section of the Velo Sidebar that contains the files for your code.

1. If necessary, add the relevant app to your site, such as Wix Stores.
2. With Velo Dev Mode enabled, click the Public & Backend tab on the Velo Sidebar.
3. Scroll down to the Service Plugins panel at the bottom of the sidebar.
4. Hover over Service Plugins and click Add an integration .
5. Select the plugin you want to add.
6. Follow the prompts to add the plugin and accept any terms and conditions that display.
7. Enter a name for your integration and click Add & Edit Code. The name can't contain spaces or special characters.

Step 2. Implement your plugin with custom code

The procedure in the previous section creates a folder in the service plugins section of the Velo Sidebar. The name of the folder is based on the plugin you chose. Inside this is another folder with the name of the plugin you set up. This folder contains 2 files, `.js` and `-config.js`.

Default plugin files:

• <my-plugin-name>.js: The code in this file generally defines a function named after the purpose of the service plugin, such as getShippingRates() or getFees(). The function is called by Wix to retrieve the data provided by your plugin.
• <my-plugin-name>-config.js: The code in this file generally defines a function that returns an object containing values used to configure your plugin.

Implement the custom code for your plugin in these files. See the service plugin tutorial for each supported service plugin for guidelines for writing your code.

Add more files to the plugin

If you don't want to keep all of your code in the main files, you can add files to the plugin's folder and import functions and objects into the main files.

1. Hover over the plugin folder's name and click Show More .
2. Select the New.js file.
3. To import from these files to the main files, use the following syntax:

Test the plugin

You can test your plugin before publishing your site using functional testing like you would any backend Velo code. Make sure your functions' return values are properly formatted. To test your plugin after deploying, add console logs to your code. The results appear in the Site Events log.

Step 3. Deploy the plugin

Once your code files are ready, deploy your plugin and enable it on your site.

Publish your site.

There may be a delay between publishing the site and the new plugin options appearing on your site.

Available Service Plugins