Quickstart

Embed a real-time, GPU-rendered CS2 skin on your page with one script tag and a Steam inspect link. It takes about ten minutes. Everything past this page is optional.

1. Get a Steam inspect link

   The one input the viewer needs is a Steam inspect link. It's the same string CS2's own "Inspect in Game" context menu gives you, and the same one every Steam Market listing and Steam's item APIs already expose. It looks like this:

   inspect link

   steam://rungame/730/76561202255233023/+csgo_econ_action_preview 00180720000A6B928D00000000E80300000900000000

   If you don't have one handy, most Steam Market listing pages have an "Inspect in Game" link you can right-click and copy. If you're building against your own catalog ids instead, see Embed parameters for the s / wear / seed form. Most integrators only need inspect.

2. Add the loader script

   Drop this in your page, once:

   html Copy

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

   cs2embed.js is dependency-free: a few kilobytes, no build step, no bundler required. It exposes one global, CS2Embed.

3. Mount the viewer

   Give it an element with a size, and an inspect link:

   html Copy

   <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 00180720000A6B928D00000000E80300000900000000',
       scene: 'plate_train_video',
       autorotate: true,
     });
   
     viewer.on('loaded', function (e) {
       console.log('rendered', e.id, 'in', e.ms, 'ms');
     });
   </script>

   CS2Embed.mount(el, options) creates an iframe inside your element and returns a handle. Call methods on it (setView, setScene, screenshot, and more) and listen for events (loaded, error, state, and more). See postMessage API for the full list, and Embed parameters for every option mount() accepts.

4. That's it

   Reload the page. On a cold load, give the frame a moment: it's pulling down the render engine and one item's textures. On a warm connection that typically takes a couple of seconds. What you get is a live, orbit-able, real-time render of that exact skin, at that exact float and pattern, running entirely client-side inside the iframe.

Good to know before you ship

Two things nobody reads about until they hit them. Both are documented in full elsewhere. This points you to where.

• If you also call the Render API directly (for a static product-card image rather than the live 3D embed): a first request for a config that isn't cached yet returns a placeholder immediately, not the real render. See Render API for the polling and blocking forms.
• If your key or origin is misconfigured, the iframe shows a plain-language card explaining why, and fires an error postMessage event with a machine-readable code. That means you can catch it in code instead of relying on someone noticing the card. See Error codes.

Where to go next