Site API

The Site API enables code within Embedded Scripts and Site Widgets created with the CLI to interact with a Wix site. For example, you can access site data and interact with other Wix Apps, such as Wix Stores and Wix Bookings.

Note: This API is only available for use in Wix Apps that run within a Wix site environment. It isn't compatible with Velo code executed in the Wix Editor or on sites not hosted by Wix.

Setup

Install the @wix/site package using npm or Yarn:

npm install @wix/site

or

yarn add @wix/site

Next, create a Wix Client with the relevant frontend modules. Supported modules are listed under Frontend Modules in the menu of this SDK reference. The following example uses the seo module:

import { site } from "@wix/site";
import { createClient } from "@wix/sdk";
import { seo } from "@wix/site-seo"; // Frontend module of your choice

const client = createClient({
  host: site.host({ applicationId: "<your_app_id>" }),
  modules: {
    seo,
  },
});

Note: You can find your app ID in the OAuth page of the Wix Dev Center.

Finally, use the client constant to interact with the site via the frontend module. For example:

client.seo.title().then((title) => {
  console.log("Site title:", title);
});

Usage in Embedded Scripts

You can create a Wix Client in one of your scripts inside your embedded html when you create an Embedded Script extension.

Define a script to inject an access token to

When you create an Embedded Script extension, you provide an html snippet in which you can define scripts tags to load and execute Javascript. If you need to interact with Wix REST APIs or other Site APIs, you'll need to define a script tag that will have an access token inject into (only a single script tag can be used for this purpose). Add the accesstoken="true" attribute to the script tag to indicate that the script should be injected with an access token.

<script accesstoken="true" src="<your script source>"></script>

Create a Wix Client in your script

In your script, you can now create a Wix Client and use it to interact with the site. Creating the client different based on the type of the script:

type="module" (ESM)

In a script of type module (ESM), the script should export a function called injectAccessTokenFunction that will be called by Wix to inject the access token into the script. The function should be created by calling createInjector on the auth object of the Wix Client.

import { site } from "@wix/site";
import { createClient } from "@wix/sdk";
import { seo } from "@wix/site-seo"; // Frontend module of your choice
import { products } from '@wix/stores' // Any REST API module

const wixClient = createClient({
  auth: site.auth(),
  host: site.host({ applicationId: "<your_app_id>" }),
  modules: {
    seo,
    products,
  },
});

export const injectAccessTokenFunction = wixClient.auth.createInjector();

wixClient.products.queryProducts().find().then((productsResult) => {
  console.log('Products => ', productsResult)
});

client.seo.title().then((title) => {
  console.log("Site title:", title);
});

type="text/javascript" (Classic)

In a classic script (when no type is specified or text/javacsript is specified), you can create the Wix Client and use it directly in the script.

import { site } from "@wix/site";
import { createClient } from "@wix/sdk";
import { seo } from "@wix/site-seo"; // Frontend module of your choice
import { products } from '@wix/stores' // Any REST API module

const wixClient = createClient({
  auth: site.auth(),
  host: site.host({ applicationId: "<your_app_id>" }),
  modules: {
    seo,
    products,
  });

wixClient.products.queryProducts().find().then((productsResult) => {
  console.log('Products => ', productsResult)
});

client.seo.title().then((title) => {
  console.log("Site title:", title);
});

Usage in Custom Elements

You can create a Wix Client in one of your custom elements when you create a Custom Element extension.

Create a Wix Client in your custom element

In a custom element, the custom element should expose an accessTokenListener property which is a function that will be called by Wix to inject the access token into the custom element. The property should be set to the return of createInjector on the auth object of the Wix Client.

import { site } from "@wix/site";
import { createClient } from "@wix/sdk";
import { seo } from "@wix/site-seo"; // Frontend module of your choice
import { products } from "@wix/stores"; // Any REST API module

const wixClient = createClient({
  auth: site.auth(),
  host: site.host({ applicationId: "<your_app_id>" }),
  modules: {
    seo,
    products,
  },
});

class MyCustomEleemnt extends HTMLElement {
  constructor() {
    super();
    this.accessTokenListener = wixClient.auth.createInjector();
  }
  connectedCallback() {
    wixClient.products
      .queryProducts()
      .find()
      .then((productsResult) => {
        console.log("Products => ", productsResult);
      });

    client.seo.title().then((title) => {
      console.log("Site title:", title);
    });
  }
}
customElements.define(tagName, MyCustomEleemnt);