Skip to content
Latch

HTML

The fastest way to add Latch to any website. Two lines of HTML — a meta tag and a script tag — and the SDK handles access checks, paywalls, event tracking, and identity automatically.

Integration

Section titled “Integration”

Add these two lines to the <head> of any page you want to protect:

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

That’s it. The SDK will:

  1. Read your publishable key from the meta tag
  2. Automatically detect the API URL from the script’s origin
  3. Generate and persist an anonymous visitor ID
  4. Track a pageview event
  5. Check access for the current URL against your paywall rules
  6. Show the configured paywall when access is denied
  7. Show a meter banner when the reader has limited free views remaining

Prerequisites

Section titled “Prerequisites”

Before starting, you need:

  • A running Latch instance with a product, a paywall rule, and a publishable key
  • Your paywall rules configured in the dashboard to match the URLs you want to protect

See the Quickstart guide for step-by-step setup.

Full example

Section titled “Full example”

Here’s a complete HTML page with the Latch SDK:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="latch:key" content="pk_your_publishable_key" />
  <script src="https://latch-api.v3ck.com/sdk/latch.js"></script>
  <title>My Article</title>
</head>
<body>
  <article>
    <h1>Premium Article</h1>
    <p>This content is protected by Latch.</p>
  </article>
</body>
</html>

When a reader visits this page:

  • If they have free views remaining, they see the article with a meter banner showing the count
  • Once they exceed the meter limit, a paywall modal appears
  • The paywall style, message, and template are all configured in your Latch dashboard

How it works

Section titled “How it works”

The SDK script loads from your Latch API (/sdk/latch.js). On load, it:

  1. Reads <meta name="latch:key"> to get the publishable key
  2. Derives the API URL from the script’s own origin (so you don’t need to configure it separately)
  3. Creates or loads a persistent anonymous ID from localStorage
  4. Sends a pageview event via POST /api/v1/events
  5. Calls GET /api/v1/access/check with the current URL and anonymous ID
  6. Based on the response, renders the paywall using the template configured on the matching rule (modal, bottom-bar, or inline)

Debug mode

Section titled “Debug mode”

Add a debug meta tag to see SDK activity in the browser console:

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

Advanced: using the SDK programmatically

Section titled “Advanced: using the SDK programmatically”

The script tag exposes a global Latch object. You can use it for custom behavior:

<script src="https://latch-api.v3ck.com/sdk/latch.js"></script>
<script>
// The SDK auto-initializes from the meta tag, but you can also
// call methods directly:
Latch.checkAccess().then(result => {
  if (!result.granted) {
    // Custom paywall handling
    document.getElementById('content').style.display = 'none';
  }
});


// Track custom events
Latch.trackEvent('button_click', { buttonId: 'subscribe-cta' });


// Identify a logged-in user
Latch.identify('user_123');
</script>

Notes

Section titled “Notes”
  • The SDK fails open — if the API is unreachable, readers are never blocked
  • Anonymous IDs persist in localStorage across visits
  • The SDK is served from your own API, so there are no third-party script dependencies
  • The script is ~13 KB and cached aggressively (Cache-Control: public, max-age=3600)