Install Zerocost and Show Your First Ad

Zerocost is an AI monetization platform. Startups monetize AI-generated experiences via automated ad placements (display and video) and optional data products.

This guide gets you from zero to a working ad widget with minimal code.

Prerequisites

• A Zerocost account with a Startup role

• Your appId and an API key

• A web app where you can add one import and one DOM mount point

Recommended: Automated setup

Run the SDK init tool:

npx @zerocost/sdk zerocost-init

This installs the package, creates src/zerocost.ts, and injects it into your entry point.

Manual setup

Install the SDK:

npm i @zerocost/sdk

Create a config file (example: src/zerocost.ts):

import { ZerocostSDK } from '@zerocost/sdk';

export const zc = new ZerocostSDK({
  appId: 'YOUR_APP_ID',
  apiKey: 'zc_live_...',
  appName: 'My App',
  log: true,
});

await zc.init();

Import it once in your entry point (example: src/main.tsx or src/App.tsx):

import './zerocost';

Render an ad placement

Add a mount point:

<div id="sidebar-widget"></div>

Render the ad:

import { zc } from './zerocost';
zc.renderAd('sidebar-widget');

Verify it is working

Open DevTools and validate:

• No console errors from initialization.

• Network calls succeed to endpoints such as get-placements, serve-widget or serve-ad, and track-event.

If the placement is blank, see articles/support-ads-not-showing.md.

Next steps

• Add a second placement only after you measure baseline CPM and retention impact.

• Review placement settings (viewability, refresh, floor) in the dashboard.

• Decide whether to enable optional data collection settings.