# Quick start

Fetch dynamic content in under a minute.

The Content API exposes endpoints for fetching dynamic and static content, each available in a client-side variant authenticated with a public [application ID](/explanation/application) and a server-side variant authenticated with a secret [API key](/explanation/application/api-keys).

> **Prefer the SDK**
>
> Most applications should integrate through the [Croct SDK](/reference/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](/explanation/slot) ID:

**JavaScript**

```js
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();
```

**cURL**

```bash
curl -X POST 'https://api.croct.io/external/web/content' \
  -H 'Content-Type: application/json' \
  -H 'X-Api-Key: <API KEY>' \
  -H 'X-Client-Id: <CLIENT ID>' \
  -d '{"slotId": "hero-banner"}'
```

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

```json
{
  "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](/reference/api/service/content/endpoint/client/content#response) for more details.

## Fetch static content

To fetch the slot's [default content](/explanation/content/slot-default-content) without any personalization, call the static endpoint from your backend:

**JavaScript**

```js
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();
```

**cURL**

```bash
curl -X POST 'https://api.croct.io/external/web/static-content' \
  -H 'Content-Type: application/json' \
  -H 'X-Api-Key: <API KEY>' \
  -d '{"slotId": "hero-banner"}'
```