Installation

The Web SDK (@ui-kit/web) draws the screens you build in the dashboard on any website. It only renders. Prices come from your site and checkout stays in your code (D-109). You can load it with a script tag or install it from npm.

• No framework is needed. Svelte and the renderer are compiled in.
• Screens draw inside a shadow root, so your page's CSS does not leak in and the screen's CSS does not leak out.
• It is safe to import during server rendering (Next.js, Remix). Nothing touches the DOM until you call a function.
• It ships as ESM for bundlers and as one <script> file that defines window.UIKit and the <uikit-paywall> element.
• TypeScript types are included.

Before you startCopy Anchor Link

You need a public key (it starts with pk_) and, usually, a placement key.

1. In the dashboard open Install SDK. If the project has no public key, select Create a public key. You can also manage keys on API keys. See API keys.
2. Publish a screen and point a placement at it. See Placements.

A public key can only read published screens and send events. It is safe to put in your page. To stop other sites from using it, add your domains to Allowed websites (Pro plan and above). See Allowed domains and Security and CSP.

Option 1: script tagCopy Anchor Link

The Install SDK page shows a snippet with your key and placement filled in. It loads the script from the SDK's hosted build:

<script src="https://sdk.miniwall.app/ui-kit.iife.js"></script>
<script>
  UIKit.configure({ apiKey: 'pk_...' });
</script>

The script defines two things:

• window.UIKit: every function of the SDK (configure, presentPaywall, mountPaywall, loadPaywall, startAutoPlacements, reportPurchase, setAttributes, getPackageIds, productsFromStripe, buildProductVariables, definePaywallElement, fontsFromPaywall, parseFontName, version).
• The <uikit-paywall> custom element, already registered. See Web component.

Load the script before the code that uses UIKit. If you use defer or put the script at the end of the page, run your own code after it has loaded.

Option 2: npmCopy Anchor Link

npm install @ui-kit/web

import { configure, presentPaywall } from '@ui-kit/web';

configure({ apiKey: 'pk_...' });

• The package is ESM only ("type": "module"). Bundlers resolve import. The CommonJS require is not supported.
• The same script-tag build is exported as @ui-kit/web/iife, if you want to copy it into your own assets.
• sideEffects is false, so unused functions are removed by your bundler.
• For React, also install @ui-kit/react. See React.

ConfigureCopy Anchor Link

Call configure() once at startup, before you load a placement. It sets defaults for every call. Options passed to a single call win over configure().

configure({
  apiKey: 'pk_...',
  locale: 'vi_VN',
  colorMode: 'system',
  analytics: true,
  attributes: { plan: 'free' },
  timeoutMs: 8000,
});

Calling configure() again changes only the options you pass. setAttributes(attributes) adds to the saved attributes later (for example after sign-in), and a value of null removes one.

Cookie consentCopy Anchor Link

The SDK writes small items to the browser's storage (keys that start with uikit:). See Events and privacy for the full list. If your cookie banner needs consent first, call configure() and the other SDK functions after the visitor consents.

Server renderingCopy Anchor Link

Importing @ui-kit/web on the server is safe. Do not call presentPaywall, mountPaywall or startAutoPlacements during server rendering: they need the browser. startAutoPlacements() returns a handle that does nothing when there is no window. In React, use the components and hooks of @ui-kit/react, which load the SDK only in the browser.

Browser supportCopy Anchor Link

Current Chrome, Edge, Firefox and Safari (the last two versions), iOS Safari 16 and later, and Android Chrome. The SDK uses shadow DOM, crypto.randomUUID, AbortController and the inert attribute.

Check that it worksCopy Anchor Link

Show a screen from a placement, then open Install SDK in the dashboard. Its status block reads Waiting for your site. until a view arrives, then Live with the number of views in the last 7 days. Select Check again to refresh it. If nothing arrives, see Errors and Security and CSP.

RelatedCopy Anchor Link

• Quickstart
• Present a paywall
• Events and privacy
• Versioning