# TryYourSize()

> Creates a client for your publishable key.

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

*Function* · `@tryyoursize/sdk`

Creates a client for your publishable key. Every element and call goes through it.

```ts
function TryYourSize(publishableKey: string, options: TryYourSizeOptions = {}): TryYourSizeClient
```

## Parameters

- **`publishableKey`** (`string`, required): Your publishable key (`pk_test_…` or `pk_live_…`) from Studio → Developers → API keys. It works only on the origins registered for it. A secret key (`sk_…`) throws `secret_key_in_browser`.
- **`options`** (`TryYourSizeOptions`, optional, default `{}`)
  - **`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

`TryYourSizeClient`: The client: `elements()`, `recommendation()`, `recommendationHandle()`, `experiment()` and `version`.

## Errors

`TryYourSizeError` with code `secret_key_in_browser` or `invalid_key`. See [Web SDK errors](https://docs.tryyoursize.com/sdk/errors.md).

## Example

**JavaScript**

```js

const tys = TryYourSize("pk_test_…", { locale: "es" }); // windows in Spanish
```

**HTML**

```html
<script src="https://js.tryyoursize.com/v1/tys.js"></script>
<script>
  const tys = window.TryYourSize("pk_test_…");
</script>
```

**React**

```tsx

// The provider calls TryYourSize() for you.
<TryYourSizeProvider publishableKey="pk_test_…" options={{ locale: "es" }}>
  <App />
</TryYourSizeProvider>
```

## See also

- [loadTryYourSize()](https://docs.tryyoursize.com/reference/web/load-tryyoursize.md)
- [Keys and modes](https://docs.tryyoursize.com/get-started/keys-and-modes.md)