# Site API

The Site API enables code within [Embedded Scripts](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/embedded-scripts/about-embedded-scripts-and-the-cli) and [Site Widgets](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site-extensions/site-widgets/add-a-site-widget-extension-in-the-cli) 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](https://dev.wix.com/docs/build-apps/develop-your-app/about-developing-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:

```sh
npm install @wix/site
```

or

```sh
yarn add @wix/site
```

Next, create a [Wix Client](https://dev.wix.com/docs/sdk/core-modules/sdk/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](https://dev.wix.com/docs/sdk/frontend-modules/seo/introduction):

```js
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](https://dev.wix.com/apps/my-apps).

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

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

### 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 differs based on the `type` of the script:

#### `type="module"` (ESM)

#### 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 script 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 injected 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.

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

##### Inject an access token into the script

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 `getAccessTokenInjector` on the `auth` object of the Wix Client.

```js
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.getAccessTokenInjector();

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.

```js
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 `getAccessTokenInjector` on the `auth` object of the Wix Client.

```js
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.getAccessTokenInjector();
  }
  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);
```