Layer 1 · Player SDK

Your inspection reports, on your own website.

CarHub's embeddable vehicle-inspection viewer: a 360° player that displays inspection reports on your own website, dropped in as an iframe and tuned per page with query parameters.

standalone view · iframe embed · 15 options across 5 groups

the whole integration

<iframe
  src="https://app.example.com/view/{token}/360"
  allowfullscreen
></iframe>

{token} identifies the report · allowfullscreen is what makes the fullscreen control work

What it shows

One player, 5 views of the same vehicle.

Every view reads from the same inspection, so switching between them costs nothing and shows the same damages.

  • 360° exterior

    Spin from an indexed frame set, drag and auto-rotate, mobile-first, hotspot-aware

  • Interior panorama

    Cockpit view with navigable points of view

  • Walkaround video

    Playback with timeline markers pinned to detected damages

  • Photo gallery

    Ordered by shot position, before/after slider for raw vs rendered

  • Hotspot overlay

    Consumes viewer/hotspots; tap a damage, get severity and repair cost

How it is configured

Query beats prop. Prop beats default.

Settings resolve in a fixed order of precedence, which is what lets one embed be tuned per page. Append a query parameter and that page's player behaves differently — no second integration, no redeploy.

  1. 01

    URL query parameter

    Wins outright — how the same embed is tuned per page

  2. 02

    Passed prop

    The value you configure at integration time

  3. 03

    Built-in default

    What you get when neither is set

same embed, tuned for a claims page

https://app.example.com/view/{token}/360?tabview=damages&hotspot=true&color=00D178

opens on damages · markers overlaid · icons recoloured to your brand

The reference

15 options, 5 groups.

Each one works as a query parameter or as a prop. The names below are exactly what you append to the URL.

Content tabs

4 options

Which views the player opens on, and which it offers at all.

  • tabview

    Sets the initial tab — 360, exterior, interior, others or damages

  • selector

    Shows or hides the tab switcher

  • excludeTab

    Comma-separated list of tabs to hide

  • interior

    Controls the exterior/interior toggle

Damage display

2 options

How detections surface on top of the imagery.

  • hotspot

    Overlays damage markers on exterior and interior images

  • damages

    Shows the damages carousel

Image quality

2 options

Enhanced renders or the originals the camera produced.

  • upscaled

    Starts with enhanced images where available

  • upscaleToggle

    Lets the viewer switch back to the originals

Interaction

6 options

What the viewer is allowed to do with the vehicle.

  • zoomable

    Zoom into the current image

  • fullscreenable

    Fullscreen control — pair it with allowfullscreen on the iframe

  • autoplay360

    Auto-starts the rotation

  • photomode

    One image at a time instead of the spin

  • carousel

    Carousel navigation across the shot set

  • sharable

    Shows the share icon

Branding

1 option

Making the player read as your product.

  • color

    Hex value, with or without the #, recolouring every player icon

One iframe, one token.

Point it at a report and the whole pipeline's output is on your page — before you write a line of viewer code.