Browser SDK
The MonetizationOS Browser SDK runs in your user's browser, makes a surface decision with a public key, and applies the resulting component transformations to the live DOM. To apply decisions server-side before HTML reaches the browser, use a proxy instead.
Prerequisites
- A MonetizationOS environment with a configured surface.
- A public key. In the console, open your environment's API Keys screen and select New Public Key under Public Keys. Public keys are safe to ship in page source. In code, pass your public key as
publicKey, which the script-tag config shortens topk.
Script tag for static sites
Paste this once in <head>, after your <meta> tags. Edit the config object at the bottom of the snippet. Its keys become data-mos-* attributes on the injected SDK tag, so pk becomes data-mos-pk and surface becomes data-mos-surface.
<script>
/* MonetizationOS loader (queue + async SDK, one paste). Edit the config below. */
(function(c){var w=window,d=document,g="MOS",q="q";
w[g]=w[g]||{};w[g][q]=w[g][q]||[];
["identify","decide","reveal"].forEach(function(m){w[g][m]=w[g][m]||function(){w[g][q].push([m,arguments]);};});
if(d.getElementById("mos-sdk"))return;
var j=d.createElement('script');j.id="mos-sdk";j.async=true;j.src="https://assets.monetizationos.com/browser/v1.js";j.setAttribute('fetchpriority','high');
for(var k in c)j.setAttribute('data-mos-'+k,c[k]);
(d.head||d.documentElement).appendChild(j);
})({"pk":"pk_live_...","surface":"article-paywall"});
</script>Replace pk_live_... with your public key and article-paywall with your surface slug. Attributes carry strings only. To set callbacks, define window.MOSConfig = { ... } above this block.
The SDK self-initializes, makes one decision on load, and exposes window.MOS with the imperative methods identify, decide, and reveal.
ES modules for bundlers and single-page apps
Install the package:
npm install @monetizationos/browserCreate the client:
import { createMOS } from "@monetizationos/browser";
const mos = createMOS({
publicKey: "pk_live_...",
surface: "article-paywall",
});The client makes one decision automatically on load. In a single-page app, call mos.decide() again on route change, but only after the targeted DOM has re-rendered: insertions aren't idempotent and removed content is never restored.
Verify
Load the page. The decision's component transformations appear in the DOM, and the Network tab of your browser's developer tools shows a POST to /api/v1/surface-decisions on api.monetizationos.com. Decision failures fail open: the page stays intact with no transforms.
Next steps
- Full configuration and behavior in the Browser SDK reference
- The underlying decision call in the Surface Decision API reference