<!-- Generated from /docs/quickstart by tools/docs-md.js. Do not edit by hand. -->
> Source: https://inspekt.gg/docs/quickstart · Put an exact CS2 item on your page: a still image from the Render API with one image tag, or the live 3D viewer with the embed. Both take an inspect link.

# Quickstart

Paste this tag into a page to show a CS2 item. The image works in every browser.

```html
<img src="https://inspekt.gg/api/still?id=ak47_cu_ak47_cobra_gen&wear=0.1662&seed=55&view=front&w=640&h=400&key=cs2pk_your_key_here"
     referrerpolicy="strict-origin">
```

To name the item with an inspect link, replace `id=…&wear=…&seed=…` with `inspect=<the link>`. [Render API](https://inspekt.gg/docs/render-api) lists every parameter, the cache rules and the placeholder.

Keep `referrerpolicy="strict-origin"` on every `<img>` and on every `<iframe>` you write yourself; `CS2Embed.mount()` sets it on the frames it builds. It makes the browser send your origin even when the page's own `Referrer-Policy` withholds the referrer. A keyed request without an `Origin` or `Referer` header is refused with [`origin_required`](https://inspekt.gg/docs/errors#access-codes).

The **Download for AI agents** button above downloads one Markdown file for a coding agent, with every endpoint, bound, refusal code and worked example in these docs.

## Render API or embed

|  | Render API | Embed |
| --- | --- | --- |
| Output | One webp image of the item | The live 3D viewer, in an iframe |
| Integration | One `<img>` tag | A script tag and an element |
| Needs WebGPU | No | Yes, in the visitor's browser |
| Time to ship | An afternoon | A day or two |
| Counts as | One render | One embed load |

Start with stills, then add the embed to the pages that need 3D. [The listing grid demo](https://inspekt.gg/embed-demo.html) works this way and shows the code for each card.

## Embed in four steps

> Every snippet below needs its `key` line. From your site or your server, a request without a key is refused with `401` and `key_required` ([Error codes](https://inspekt.gg/docs/errors#access-codes)).
>
> Get a key before you start. [Sign in](https://inspekt.gg/dashboard) with an email address to get one. The key works once the account starts a 10-day free trial or picks a plan. While you are signed in, this page replaces every `cs2pk_your_key_here` with your key, so Copy gives you a working snippet. A new key has **no allowed origins**. Register the origin your page runs on, or the frame shows an `origin_not_allowed` card.

1. **Copy an inspect link**

   Use a link that carries the item as hex after `csgo_econ_action_preview`. Two kinds do: a link copied from an item inside CS2, and a "gen" link like this one:

   inspect link:

   ```
   steam://rungame/730/76561202255233023/+csgo_econ_action_preview 001807209A0228043004388F85D7F30340950512E67D72
   ```

   Send the whole link, URL-encoded or not, or the hex alone.

   A link from a Steam Community Market listing or a Steam inventory page ends in `M…A…D…` or `S…A…D…`. It points at an item stored on Steam's servers, which only a signed-in CS2 session can read. The Render API refuses it with a `400`, and the embed shows its [`bad-inspect` card](https://inspekt.gg/docs/errors#fallback-codes).

   To name an item by its catalog id instead, pass `s` with `wear` and `seed` (see [Embed parameters](https://inspekt.gg/docs/embed)). [Catalog ids](https://inspekt.gg/docs/render-api#catalog-ids) lists every id.
2. **Add the loader script, once per page**

   ```html
   <script src="https://inspekt.gg/cs2embed.js"></script>
   ```

   The loader is a few kilobytes and needs no dependencies or build step. It adds one global, `CS2Embed`.
3. **Mount the viewer on an element with a size**

   ```html
   <div id="viewer" style="width:640px;height:400px"></div>
   <script src="https://inspekt.gg/cs2embed.js"></script>
   <script>
     var viewer = CS2Embed.mount(document.getElementById('viewer'), {
       inspect: 'steam://rungame/730/76561202255233023/+csgo_econ_action_preview 001807209A0228043004388F85D7F30340950512E67D72',
       key: 'cs2pk_your_key_here',
       autorotate: true,
     });

     viewer.on('loaded', function (e) {
       console.log('rendered', e.id, 'in', e.ms, 'ms');
     });
   </script>
   ```

   `mount()` returns a handle with `setView`, `setScene`, `screenshot`, and `on` for the `loaded`, `error` and `state` events. [postMessage API](https://inspekt.gg/docs/postmessage) lists every method and event, and [Embed parameters](https://inspekt.gg/docs/embed) lists every option.
4. **Reload and check**

   The frame shows a still of your item within a second, then switches to the live 3D view once the textures load. Rotating and zooming then run in the visitor's browser.

## Before you ship

- **The first request for a new still waits while it renders.** A render takes about a second, and longer while the render queue is long. Pre-warm the URL from your server so no visitor waits, or send `wait=0` to show a placeholder at once; see [Caching and the placeholder](https://inspekt.gg/docs/render-api#caching-and-the-placeholder).
- **`origin_not_allowed` means the page's origin is not registered.** Add it under Allowed origins in the [dashboard](https://inspekt.gg/dashboard). Scheme and port both count, so `https://shop.example` and `http://localhost:3000` are two entries.
- **`key_required` means the `key` option is missing or empty.** [Error codes](https://inspekt.gg/docs/errors) lists every code.
- **Log refusals in code.** A refused frame shows a card with the reason and fires an `error` postMessage event with the same code.

## Next

### Read now

[Render API Every parameter of the `<img>` above, and the cache.](https://inspekt.gg/docs/render-api) [Embed parameters Each option with its bounds and default.](https://inspekt.gg/docs/embed) [Error codes Each refusal and what to do about it.](https://inspekt.gg/docs/errors)

### Later

[Frameworks Copy-paste HTML, React, Vue, or a raw iframe.](https://inspekt.gg/docs/frameworks) [postMessage API Every event in and out of the frame.](https://inspekt.gg/docs/postmessage) [Listing grid demo A marketplace page using both, with the code for each card.](https://inspekt.gg/embed-demo.html) [Inventory API Look up a Steam account's items.](https://inspekt.gg/docs/inventory-api) [Limits & SLA Quotas, rate limits, embed loads and uptime.](https://inspekt.gg/docs/limits) [Pricing Flat monthly plans with hard quota caps.](https://inspekt.gg/pricing)
