loadTryYourSize()

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.

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

Parameters

publishableKeystringRequired

Your publishable key (pk_test_… or pk_live_…).

optionsTryYourSizeOptions & { scriptUrl?: string }Optional= {}

The options of TryYourSize(), plus scriptUrl to load the script from another URL (development only).

Properties

embedOriginstringOptional

Override for development (e.g. http://localhost:5173).

apiOriginstringOptional

Override of the API origin for development (e.g. http://localhost:8000): the A/B holdout config.

localeLocaleOptional

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

JavaScriptReact

import { loadTryYourSize } from "@tryyoursize/sdk/loader";

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

import { loadTryYourSize } from "@tryyoursize/sdk/loader";
import { TryYourSizeProvider } from "@tryyoursize/react";

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

export function Root() {
  return <TryYourSizeProvider client={tysPromise}><App /></TryYourSizeProvider>;
}