Installation

The Latch JavaScript SDK handles access checks, paywall display, identity management, and event tracking in browser environments.

Script tag (recommended)

The simplest way to use the SDK — add two lines to your HTML:

<meta name="latch:key" content="pk_your_publishable_key" />
<script src="https://latch-api.v3ck.com/sdk/latch.js"></script>

The SDK auto-initializes, checks access, and shows paywalls automatically. See the HTML integration guide for details.

Package import

The SDK can also be imported as an ES module in bundled applications. It is not currently published to npm — import it from your Latch monorepo workspace.

Install

Package import

import { init } from '@latch/sdk';

Initialize

Call init() once when your page loads.

import { init } from '@latch/sdk';

init({
  apiKey: 'pk_your_publishable_key',
  apiUrl: 'https://latch-api.v3ck.com',
});

Auto-init

The SDK will auto-init if your bundle sets window.__LATCH_CONFIG__ before loading the SDK code:

<script>
  window.__LATCH_CONFIG__ = {
    apiKey: 'pk_your_publishable_key',
    apiUrl: 'https://latch-api.v3ck.com',
  };
</script>

Configuration options

Option	Type	Required	Description
`apiKey`	`string`	Yes	Your publishable key (`pk_...`).
`apiUrl`	`string`	No	Base URL of your Latch API. Defaults to `""`.
`userId`	`string`	No	Known logged-in reader ID.
`anonymousId`	`string`	No	Override the stored anonymous ID.
`debug`	`boolean`	No	Enable console logging.
`onPaywall`	`function`	No	Custom callback for denied access.
`onCheckout`	`function`	No	Called when the built-in Subscribe button is clicked.
`paywallSelector`	`string`	No	CSS selector used by the `inline` template.

What happens on init

When you call init():

the SDK creates or loads an anonymous ID
it queues an initial pageview event
it starts a 5-second flush timer for queued events
it registers a beforeunload flush