Quick start

Fetch personalized content in under a minute.

The Content API exposes endpoints for fetching personalized and static content, each available in a client-side variant authenticated with a public application ID and a server-side variant authenticated with a secret API key.

Prefer the SDK

Most applications should integrate through the Croct SDK, which handles authentication, client IDs, context detection, and caching. Call the HTTP API directly only for custom integrations or when building a new client.

Fetch personalized content

Make a POST request to /client/web/content with the slot ID:

const response = await fetch('https://api.croct.io/client/web/content', {  method: 'POST',  headers: {    'Content-Type': 'application/json',    'X-App-Id': '<APP ID>',    'X-Client-Id': '<CLIENT ID>',  },  body: JSON.stringify({slotId: 'hero-banner'}),});
const {content, metadata} = await response.json();

The response contains the resolved content plus metadata describing how it was resolved:

{  "content": {    "_component": "hero-banner@1",    "title": "Welcome back, Pro user!",    "ctaLabel": "Upgrade now",    "ctaUrl": "https://example.com/upgrade"  },  "metadata": {    "version": "1.0",    "contentSource": "experience",    "experience": {      "experienceId": "3f2504e0-4f89-11d3-9a0c-0305e82c3301",      "audienceId": "6ba7b810-9dad-11d1-80b4-00c04fd430c8"    }  }}

See the endpoint reference for more details.

Fetch static content

To fetch the slot's default content without any personalization, call the static endpoint from your backend:

const response = await fetch('https://api.croct.io/external/web/static-content', {  method: 'POST',  headers: {    'Content-Type': 'application/json',    'X-Api-Key': '<API KEY>',  },  body: JSON.stringify({slotId: 'hero-banner'}),});
const {content, metadata} = await response.json();