> ## Documentation Index
> Fetch the complete documentation index at: https://docs.carviz.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Player 360

> Show a beautiful 360° player for your reports in your website

## Configuration Logic

The component's configuration properties are resolved with the following precedence:

1. **Query Parameters**: If a URL query parameter exists, it overrides everything else.
2. **Props**: If no query parameter exists, the passed Prop is used.
3. **Defaults**: If neither is present, the default value is used.

## Available Configuration

| Feature             | Query Param      | Default    | Description                                                               |
| ------------------- | ---------------- | ---------- | ------------------------------------------------------------------------- |
| **Upscaled Images** | `upscaled`       | `true`     | Start with upscaled/enhanced images if available.                         |
| **Upscale Toggle**  | `upscaleToggle`  | `true`     | Show the toggle to switch between upscaled and original images.           |
| **Photo Mode**      | `photomode`      | `false`    | Start in "photo mode" (one-by-one image view) instead of default view.    |
| **Hotspots**        | `hotspot`        | `true`     | Show damage hotspots on exterior/interior images.                         |
| **Share Button**    | `sharable`       | `true`     | Show the share icon in the top right.                                     |
| **Zoom Support**    | `zoomable`       | `true`     | Allow zooming in functionality.                                           |
| **Fullscreen**      | `fullscreenable` | `true`     | Allow fullscreen functionality (mainly for 360 view).                     |
| **Interior Switch** | `interior`       | `false`    | Show the switch to toggle between Exterior and Interior views.            |
| **Damages**         | `damages`        | `true`     | Show the damages carousel/list.                                           |
| **Carousel**        | `carousel`       | `true`     | Show the image carousel.                                                  |
| **Tab Selector**    | `selector`       | `true`     | Show the tab selector to switch between views (360, Exterior, Interior…). |
| **Tab View**        | `tabview`        | `exterior` | Initial active tab (`360`, `exterior`, `interior`, `others`, `damages`).  |
| **Exclude Tabs**    | `excludeTab`     | `null`     | Comma-separated list of tabs to hide (e.g. `interior,damages`).           |
| **360 Autoplay**    | `autoplay360`    | `true`     | Auto-start 360 rotation on load.                                          |
| **Icon Color**      | `color`          | `null`     | Custom hex color for all player icons (e.g. `FF5733` or `#FF5733`).       |

# Usage Examples

## Iframe Usage

This component exposes a standalone view specifically designed to be used as an iframe.

**URL Pattern:**
`https://app.carviz.com/view/{token}/360`

**Example:**

```html theme={null}
<iframe
  src="https://app.carviz.com/view/5da89076-bdbc-47ba-9f61-a55878c06786/360"
  width="100%"
  height="600px"
  frameborder="0"
  allowfullscreen
></iframe>
```

<iframe src="https://app.carviz.com/view/5da89076-bdbc-47ba-9f61-a55878c06786/360" width="100%" height="600px" frameborder="0" allowfullscreen />

## Technical aspect

The player is built using Nuxt. It is a standalone component that can be used as an iframe. The size of the component itself is about 1MB.
It's build to be lightweight and fast. The data loads pictures first and then the 360° view. This allows the player to be interactive even if the 360° view is not loaded yet.