{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-@l10n/en-US/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Player","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"player","__idx":0},"children":["Player"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The VirtualCar360 Player is a ready-made visual component designed for embedding on websites. It works as an external widget loaded through an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]},", so it does not require implementing a custom photo gallery, hotspot handling, zoom logic or gallery lookup logic."]},{"$$mdtype":"Tag","name":"div","attributes":{"style":{"position":"relative","width":"100%","paddingBottom":"75%","height":"0","overflow":"hidden"}},"children":[{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://player360-staging.web.app/player/?carId=10171169&key=9c3b1830513cc3b8fc4b76635d32e692&lang=en","width":"100%","height":"600","frameBorder":"0","allowFullScreen":"","style":{"position":"absolute","inset":"0","width":"100%","height":"100%"}},"children":[]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Player can be used:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["on offer listings,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["as the main slider on a vehicle detail page,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["as an additional element in the vehicle description,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["as an interactive vehicle gallery,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["as a component presenting photos, hotspots, the vehicle certificate and other offers from the same location."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Player can be loaded using ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["carId"]},", ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["VIN"]}," or the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["registration number"]},". Once a vehicle identifier is provided, the Player automatically finds the latest available presentation and displays it to the user."]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Tip"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," is the internal Player identifier and allows you to point to a specific vehicle presentation. In many practical integrations, using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]}," can be more convenient because these values are easier to match with an offer in a dealer system, CRM or website. In that case, the system automatically finds and displays the latest Player available for the vehicle."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"how-it-works","__idx":1},"children":["How it works"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The Player is embedded as an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," pointing to:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"txt","header":{"controls":{"copy":{}}},"source":"https://virtualcar360.pl/player/\n","lang":"txt"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The required parameters are passed in the query string."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Minimal configuration requires:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["a vehicle identifier: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},","]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["an API key: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["key"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After loading, the Player:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["reads the URL parameters,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["identifies the vehicle or Player,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["retrieves the latest available data when VIN or registration number is used,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["renders photos, available image sets, hotspots and additional presentation elements,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["allows users to browse and zoom photos."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"url-parameters","__idx":2},"children":["URL parameters"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Parameter"},"children":["Parameter"]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"right","data-label":"Required"},"children":["Required"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["conditional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Internal Player identifier. It points to a specific presentation."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["conditional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Vehicle VIN. Required if ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]}," are not provided."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["conditional"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Vehicle registration number. Required if ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," are not provided."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["key"]}]},{"$$mdtype":"Tag","name":"td","attributes":{"align":"right"},"children":["yes"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["API key assigned to a VirtualCar360 account, location or group."]}]}]}]}]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Important"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A single Player URL should contain only one vehicle identifier: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},". There is no need to pass multiple identifiers at the same time."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"embed-by-carid","__idx":3},"children":["Embed by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<iframe\n  src=\"https://virtualcar360.pl/player/?carId=10209937&key=YOUR_API_KEY\"\n  width=\"100%\"\n  height=\"600\"\n  frameborder=\"0\"\n  allowfullscreen\n></iframe>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"embed-by-vin","__idx":4},"children":["Embed by VIN"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<iframe\n  src=\"https://virtualcar360.pl/player/?vin=1NKCLR0X1XR568641&key=YOUR_API_KEY\"\n  width=\"100%\"\n  height=\"600\"\n  frameborder=\"0\"\n  allowfullscreen\n></iframe>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"embed-by-registration-number","__idx":5},"children":["Embed by registration number"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<iframe\n  src=\"https://virtualcar360.pl/player/?numberplates=WW4433E&key=YOUR_API_KEY\"\n  width=\"100%\"\n  height=\"600\"\n  frameborder=\"0\"\n  allowfullscreen\n></iframe>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsive-embed","__idx":6},"children":["Responsive embed"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"<div class=\"vc360-player-wrapper\">\n  <iframe\n    src=\"https://virtualcar360.pl/player/?vin=1NKCLR0X1XR568641&key=YOUR_API_KEY\"\n    title=\"VirtualCar360 Player\"\n    frameborder=\"0\"\n    allowfullscreen\n    loading=\"lazy\"\n  ></iframe>\n</div>\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".vc360-player-wrapper {\n  position: relative;\n  width: 100%;\n  padding-bottom: 56.25%;\n  height: 0;\n  overflow: hidden;\n}\n\n.vc360-player-wrapper iframe {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Tip"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["On offer listings, use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading=\"lazy\""]}," so the Player loads only when the vehicle card appears in the user's viewport. This reduces the number of Players loaded at the same time and improves page performance."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"angular-integration-example","__idx":7},"children":["Angular integration example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { CommonModule } from '@angular/common';\nimport { Component, Input, OnChanges } from '@angular/core';\nimport { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';\n\n@Component({\n  selector: 'vc360-player',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <iframe\n      *ngIf=\"playerUrl\"\n      [src]=\"playerUrl\"\n      title=\"VirtualCar360 Player\"\n      width=\"100%\"\n      height=\"600\"\n      frameborder=\"0\"\n      allowfullscreen\n      loading=\"lazy\"\n    ></iframe>\n  `,\n})\nexport class VirtualCarPlayerComponent implements OnChanges {\n  @Input() carId?: string | number;\n  @Input() vin?: string;\n  @Input() numberplates?: string;\n  @Input({ required: true }) apiKey!: string;\n\n  playerUrl?: SafeResourceUrl;\n\n  constructor(private readonly sanitizer: DomSanitizer) {}\n\n  ngOnChanges(): void {\n    const url = new URL('https://virtualcar360.pl/player/');\n\n    if (this.carId) {\n      url.searchParams.set('carId', String(this.carId));\n    } else if (this.vin) {\n      url.searchParams.set('vin', this.vin);\n    } else if (this.numberplates) {\n      url.searchParams.set('numberplates', this.numberplates);\n    } else {\n      throw new Error('carId, VIN or registration number is required.');\n    }\n\n    url.searchParams.set('key', this.apiKey);\n\n    this.playerUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url.toString());\n  }\n}\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"displayed-data","__idx":8},"children":["Displayed data"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The data displayed by the Player depends on the materials available for the vehicle gallery. The Player can display:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["exterior photos with closed doors,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["photos with open doors,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["additional photos,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["interior panoramas,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["interactive gimbal photos,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["hotspots,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["the vehicle certificate,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["other offers from the same location."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If a gallery does not contain a specific material type, the Player can skip it and display the remaining available data."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"hotspots","__idx":9},"children":["Hotspots"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hotspots are part of the Player and allow specific elements to be marked directly on vehicle photos. A hotspot may indicate a headlight, wheel, equipment item, scratch, damage, body detail or interior element."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A hotspot may include additional photos showing the marked element in a close-up. This turns the Player into an interactive tool for presenting vehicle condition and details, not only a standard photo gallery."]}]},"headings":[{"value":"Player","id":"player","depth":1},{"value":"How it works","id":"how-it-works","depth":2},{"value":"URL parameters","id":"url-parameters","depth":2},{"value":"Embed by carId","id":"embed-by-carid","depth":2},{"value":"Embed by VIN","id":"embed-by-vin","depth":2},{"value":"Embed by registration number","id":"embed-by-registration-number","depth":2},{"value":"Responsive embed","id":"responsive-embed","depth":2},{"value":"Angular integration example","id":"angular-integration-example","depth":2},{"value":"Displayed data","id":"displayed-data","depth":2},{"value":"Hotspots","id":"hotspots","depth":2}],"frontmatter":{"seo":{"title":"Player"}},"lastModified":"2026-06-16T21:52:40.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/en-us/player","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}