About Extending Wix Sites

Extending websites on Wix combines regular Wix site creation with the ability to add custom code to extend out-of-the-box functionality. You can build your site using Wix's visual editor and then enhance it with custom JavaScript code to add specific features, integrate with external services, or create unique user experiences.

Which APIs to use

Extend Wix sites using the Wix JavaScript SDK and Velo APIs. These tools allow you to add custom functionality, integrate with Wix business solutions, and build rich, interactive experiences directly in your Wix site.

Transition from Velo to the Wix JavaScript SDK

Until recently, custom code on Wix sites was written using Velo APIs. You can now also use the Wix JavaScript SDK for both extending sites and app building with Blocks. If you have sites with existing Velo code, you might want to migrate them to use the SDK instead.

Wix's transition to the SDK is a gradual process. At this stage, the SDK doesn't currently support the functionality of all Velo APIs for extending sites or for app creation with Blocks. For functionality that isn't yet supported in the SDK, use Velo APIs alongside the SDK.

The Velo APIs that you should still use at this stage fall into 2 categories:

• APIs that are imported from Velo modules.
• APIs that work by file and method name conventions.

APIs that are imported from Velo modules

The APIs in the Velo-Only APIs section of the Velo reference don't have functionality supported by the SDK. There are also APIs in the APIs section of the Velo reference that don't currently have functionality that's fully supported by the SDK. To learn which Velo APIs are fully, partially, or not supported by the SDK, see Velo to SDK API Mapping.

If you need the functionality of these APIs, you need to use their Velo versions. When necessary, import and use these APIs as described in the Velo reference.

APIs that work by file and method name conventions

The following APIs may have SDK counterparts, but the SDK versions don't work for extending sites and for app creation with Blocks. Therefore, if you need the functionality of these APIs, you need to use them with their Velo file and method name conventions as described below.

• Backend event handlers: Handlers for backend events, such as when a booked service is canceled. Place Velo backend event handlers in a backend events.js file using the naming conventions described in the Velo reference.
• Service plugins: Plugins that allow you to inject custom logic into existing flows, such as conditionally adding additional fees on checkout. Install service plugins in the editor, update the getConfig() method in the plugin's -config.js file, and implement the main service plugin method in the .js file that's added to a site.
• Data hooks: Hooks that run before or after data operations, such as updating an item. Place data hooks in a backend data.js file using the naming conventions described in the Velo reference.
• Routers: For custom routing of incoming requests. Place router code in a backend routers.js file using the naming conventions described in the Velo reference. Note that some functionality from the Routers API works by convention while other functionality must be imported from Velo modules.

Wix hosting

Wix site code runs on Wix's cloud infrastructure, where authentication is handled automatically. When using the SDK for extending sites, you don't need to create a Wix client because the SDK already knows the caller's identity. Just call the SDK's APIs directly, and authentication is taken care of for you.

Example

This example demonstrates using SDK functionality alongside Velo APIs. This example creates a router using the Velo API by using method naming conventions and some methods imported from the wix-router module. The router retrieves data using the @wix/data SDK package.