Embed parameters

The smallest working embed:

CS2Embed.mount(el, { inspect: inspectLink, key: 'cs2pk_your_key_here' });

Only the item (inspect or s) and key are required. Pass each option to CS2Embed.mount() or as a query parameter on the /embed URL. The server and the frame both enforce the bounds. An out-of-range or malformed value is replaced by its default and named in the X-CS2-Dropped response header. Only a query string over 4,096 bytes is refused, with a 400.

Required input

Pass either inspect or s.

• inspect: an inspect link that carries the item as hex, either copied from an item inside CS2 or built as a "gen" link. The frame decodes the item, its float and pattern, stickers, charm and StatTrak count from it. Use this by default. A Steam Community Market or Steam inventory link ends in M…A…D… or S…A…D…, carries no item data, and shows the bad-inspect card.
• s: a catalog id, with wear, seed, st and name alongside it. Each id is a row of /assets/skins.json; see Catalog ids.

Item and condition

Scene, view and chrome

Identity and access

Frame chrome

ui=minimal, the default, shows a small plate with the item's name, and ui=none hides it. The Inspekt wordmark in the bottom-right corner shows on every plan, with either value. Clicking it opens the item in the full studio with the same wear, seed, stickers, charm, StatTrak count and name tag. No plan requires other attribution.

The loader: CS2Embed.mount(el, options)

The loader takes every parameter above as an options object, plus two fields of its own:

var viewer = CS2Embed.mount(document.getElementById('viewer'), {
  inspect: 'steam://rungame/730/76561202255233023/+csgo_econ_action_preview 001807209A0228043004388F85D7F30340950512E67D72',
  scene: 'plate_train_video',
  view: 'front',
  autorotate: true,
  ui: 'minimal',
  theme: 'dark',
  key: 'cs2pk_your_key_here',
  title: 'AK-47 | Redline in 3D',
  lazy: false,
});

mount() returns a handle with the methods setItem, setScene, setView, setAutorotate, setQuality, resetView, screenshot and destroy, plus on and off for events. postMessage API lists every command and event, and the sandbox builds these snippets from your own settings.

cs2embed.js is a script with no npm package. In React or Vue, load it once and mount a viewer into an element:

import { useEffect, useRef } from 'react';

// Loaded once per page, and shared by every viewer.
let loaderPromise;
function loadCs2Embed() {
  if (window.CS2Embed) return Promise.resolve(window.CS2Embed);
  if (!loaderPromise) {
    loaderPromise = new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://inspekt.gg/cs2embed.js';
      script.onload = () => resolve(window.CS2Embed);
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  return loaderPromise;
}

export function SkinViewer({ inspect, scene, autorotate = true }) {
  const hostRef = useRef(null);
  const viewerRef = useRef(null);

  useEffect(() => {
    let cancelled = false;
    loadCs2Embed().then((CS2Embed) => {
      if (cancelled || !hostRef.current) return;
      viewerRef.current = CS2Embed.mount(hostRef.current, {
        inspect, key: 'cs2pk_your_key_here', scene, autorotate,
      });
      viewerRef.current.on('error', (e) => console.error('embed refused:', e.code, e.message));
    });
    return () => {
      cancelled = true;
      viewerRef.current?.destroy();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [inspect, scene, autorotate]);

  return <div ref={hostRef} style={{ width: '100%', height: 400 }} />;
}

// usage: <SkinViewer inspect={item.inspectLink} />

<template>
  <div ref="host" style="width: 100%; height: 400px"></div>
</template>

<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';

const props = defineProps({
  inspect: { type: String, required: true },
  scene: { type: String },
});

const host = ref(null);
let viewer = null;
let loaderPromise;

function loadCs2Embed() {
  if (window.CS2Embed) return Promise.resolve(window.CS2Embed);
  if (!loaderPromise) {
    loaderPromise = new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = 'https://inspekt.gg/cs2embed.js';
      script.onload = () => resolve(window.CS2Embed);
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  return loaderPromise;
}

onMounted(async () => {
  const CS2Embed = await loadCs2Embed();
  viewer = CS2Embed.mount(host.value, {
    inspect: props.inspect,
    key: 'cs2pk_your_key_here',
    scene: props.scene,
    autorotate: true,
  });
  viewer.on('error', (e) => console.error('embed refused:', e.code, e.message));
});

onBeforeUnmount(() => viewer?.destroy());

watch(() => props.inspect, (inspect) => viewer?.setItem({ inspect }));
</script>

The loader frames /embed on the host it was loaded from and accepts messages only from that host. Load it from https://inspekt.gg with a script tag. It then frames https://inspekt.gg/embed and sets CS2Embed.origin to https://inspekt.gg. A copy bundled into your scripts, or served from your own site, frames your site's /embed instead. It builds each iframe with referrerpolicy="strict-origin", so the frame sends your page's origin even when the page's own Referrer-Policy withholds the referrer.

Raw iframe

To embed without the loader script, build the iframe yourself. Every parameter above is a query parameter on GET /embed:

<iframe
  src="https://inspekt.gg/embed?inspect=steam%3A%2F%2Frungame%2F730%2F76561202255233023%2F%2Bcsgo_econ_action_preview%20001807209A0228043004388F85D7F30340950512E67D72&autorotate=1&key=cs2pk_your_key_here&origin=https%3A%2F%2Fyoursite.example"
  style="width:640px;height:400px;border:0"
  loading="lazy"
  allow="autoplay; fullscreen"
  referrerpolicy="strict-origin"
  title="3D skin viewer"
></iframe>

First paint

The frame opens on a still of your item, the same picture GET /api/still serves for that camera, background and size, and switches to the live 3D view once that view has drawn its first frame. The still is part of the embed load and is not counted as a render.

loaded fires when the item is visible, usually as the still. interactive fires when the 3D view has drawn and accepts setView, screenshot and the other commands. autorotate starts once the 3D view has drawn.

The frame opens on a loading card instead of the still when:

1. You set a scene backdrop. Stills are rendered on the default plates only.
2. The frame's size needs a still outside the Render API's 160 to 1600 px bounds, such as a box smaller than 160 px or wider than 10:1.
3. The still is not ready before the 3D view draws, for example during an outage.

Access control

Our server checks your page's origin against the key's registered origins, and the visitor's browser checks it again through a frame-ancestors header, so a key copied onto another site gets the refusal card with origin_not_allowed. See Keys and origins.

Embed loads

An embed load counts once per viewer, per item, per 24 hours, and each served /embed response says 1 or 0 in X-CS2-Counted. Limits & SLA has the full rule.