# loadTryYourSize()

> Loads TryYourSize.js from our CDN once (the latest compatible v1 build) and creates a client, like loadStripe().

Source: https://docs.tryyoursize.com/reference/web/load-tryyoursize/

*Function* · `@tryyoursize/sdk/loader`

Loads TryYourSize.js from our CDN once (the latest compatible v1 build) and creates a client, like `loadStripe()`. Resolves to `null` during server-side rendering, so it is safe to call at module level in Next.js, Remix or Astro.

```ts
async function loadTryYourSize(
  publishableKey: string,
  options: TryYourSizeOptions & { scriptUrl?: string } = {},
): Promise<TryYourSizeClient | null>
```

## Parameters

- **`publishableKey`** (`string`, required): Your publishable key (`pk_test_…` or `pk_live_…`).
- **`options`** (`TryYourSizeOptions & { scriptUrl?: string }`, optional, default `{}`): The options of `TryYourSize()`, plus `scriptUrl` to load the script from another URL (development only).
  - **`embedOrigin`** (`string`, optional): Override for development (e.g. http://localhost:5173).
  - **`apiOrigin`** (`string`, optional): Override of the API origin for development (e.g. http://localhost:8000): the A/B holdout config.
  - **`locale`** (`Locale`, optional): Language of our windows; "auto" follows the browser.

## Returns

`Promise<TryYourSizeClient | null>`: A promise of the client, or `null` on the server.

## Errors

Rejects with `TryYourSizeError` code `script_load_failed` when the script cannot load (network, CSP). Call it again to retry.

## Example

**JavaScript**

```js

const tys = await loadTryYourSize("pk_test_…");
if (tys) tys.elements().create("sizeGuide", { product: "SKU-123" }).mount("#size-guide");
```

**React**

```tsx

const tysPromise = loadTryYourSize("pk_test_…"); // module level, once

  return <TryYourSizeProvider client={tysPromise}><App /></TryYourSizeProvider>;
}
```