{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-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":["Player VirtualCar360 to gotowy wizualny komponent przeznaczony do osadzania na stronach internetowych. Player działa jako zewnętrzny widget ładowany przez ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]},", dzięki czemu nie wymaga implementowania własnej galerii zdjęć, obsługi hotspotów, powiększania zdjęć ani logiki pobierania najnowszej galerii pojazdu."]},{"$$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","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":["Player może być wykorzystywany między innymi:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["na listingu ofert,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako główny slider na stronie pojazdu,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako dodatkowy element opisu pojazdu,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako interaktywna galeria zdjęć,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["jako element prezentujący zdjęcia, hotspoty, certyfikat pojazdu oraz inne oferty z tej samej lokalizacji."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player może zostać załadowany na podstawie ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["carId"]}," lub ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["numeru VIN"]}," albo ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["numeru rejestracyjnego"]}," pojazdu. Po przekazaniu identyfikatora pojazdu Player automatycznie wyszukuje najnowszą dostępną galerię i wyświetla ją użytkownikowi."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Wskazówka"},"children":[" ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," jest wewnętrznym identyfikatorem Playera i pozwala precyzyjnie wskazać konkretną prezentację pojazdu. W praktycznych integracjach wygodniejsze może być jednak użycie ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," albo ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},", ponieważ te wartości łatwiej powiązać z ofertą w systemie dealera, CRM lub na stronie internetowej. W takim przypadku system automatycznie wyszukuje i wyświetla najnowszego Playera dostępnego dla danego pojazdu. "]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"zasada-działania","__idx":1},"children":["Zasada działania"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player jest osadzany jako ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," wskazujący na adres:"]},{"$$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":["Do adresu należy przekazać wymagane parametry w query stringu."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Minimalna konfiguracja wymaga:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["identyfikatora pojazdu: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," lub ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," albo ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},","]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["klucza API: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["key"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player po załadowaniu:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["odczytuje przekazane parametry z adresu URL,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["identyfikuje pojazd po numerze VIN albo numerze rejestracyjnym,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["pobiera najnowszą galerię przypisaną do pojazdu,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["renderuje zdjęcia, dostępne zestawy zdjęć, hotspoty i dodatkowe elementy prezentacji,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["umożliwia użytkownikowi przeglądanie oraz powiększanie zdjęć."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"parametry-url","__idx":2},"children":["Parametry URL"]},{"$$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":"Parametr"},"children":["Parametr          "]},{"$$mdtype":"Tag","name":"th","attributes":{"align":"right","data-label":"Wymagany"},"children":["Wymagany"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Opis"},"children":["Opis"]}]}]},{"$$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":["warunkowo"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Identyfikator samochodu. Pozwala bezpośrednio wskazać konkretny player."]}]},{"$$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":["warunkowo"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Numer VIN pojazdu. Wymagany, jeżeli nie przekazano ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," lub ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},"."]}]},{"$$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":["warunkowo"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Numer rejestracyjny pojazdu. Wymagany, jeżeli nie przekazano ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," lub ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]},"."]}]},{"$$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":["tak"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Klucz API przypisany do lokalizacji albo klucz grupowy dla wielu lokalizacji."]}]}]}]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"warning","name":"Uwaga"},"children":[" W jednym adresie Playera należy przekazać tylko jeden identyfikator pojazdu: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," albo ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},". Nie ma potrzeby przekazywania kilku parametrów jednocześnie. ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," pozwala wskazać konkretny Player, natomiast ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," i ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]}," służą do automatycznego wyszukania najnowszego Playera dostępnego dla danego pojazdu. "]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"osadzenie-playera-po-numerze-vin","__idx":3},"children":["Osadzenie Playera po numerze VIN"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"osadzenie-playera-po-numerze-rejestracyjnym","__idx":4},"children":["Osadzenie Playera po numerze rejestracyjnym"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"responsywne-osadzenie","__idx":5},"children":["Responsywne osadzenie"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Zalecanym sposobem osadzania Playera jest umieszczenie ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," w responsywnym kontenerze. Dzięki temu Player dopasowuje się do szerokości strony i zachowuje proporcje niezależnie od urządzenia."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n \n
\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}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Proporcja ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["56.25%"]}," odpowiada układowi ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["16:9"]},". Jeżeli Player ma być wyższy, na przykład jako główny slider strony pojazdu, można zastosować inną proporcję lub ustawić stałą wysokość kontenera."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Przykład dla większego Playera na stronie szczegółów pojazdu:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".vc360-player-wrapper {\n position: relative;\n width: 100%;\n height: 720px;\n overflow: hidden;\n}\n\n.vc360-player-wrapper iframe {\n width: 100%;\n height: 100%;\n border: 0;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"przykład-użycia-na-listingu-ofert","__idx":6},"children":["Przykład użycia na listingu ofert"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player może być osadzony bezpośrednio na karcie oferty, jeżeli listing ma prezentować interaktywną galerię zamiast statycznego zdjęcia."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".vehicle-card__media {\n position: relative;\n width: 100%;\n aspect-ratio: 16 / 9;\n background: #f5f5f5;\n overflow: hidden;\n}\n\n.vehicle-card__media iframe {\n width: 100%;\n height: 100%;\n border: 0;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Wskazówka"},"children":[" Na listingu ofert warto używać atrybutu ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading=\"lazy\""]},", aby Player ładował się dopiero wtedy, gdy karta pojazdu znajdzie się w obszarze widocznym dla użytkownika. Takie podejście ogranicza liczbę jednocześnie ładowanych Playerów i poprawia wydajność strony. "]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"przykład-użycia-jako-slider-na-stronie-pojazdu","__idx":7},"children":["Przykład użycia jako slider na stronie pojazdu"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player może pełnić funkcję głównego slidera na stronie szczegółów pojazdu. W takim scenariuszu zastępuje klasyczną galerię zdjęć i zapewnia użytkownikowi dostęp do zdjęć, powiększeń, hotspotów oraz dodatkowych materiałów."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n
\n \n
\n\n
\n

Volkswagen Passat Variant

\n

2.0 TDI · DSG · 2022

\n
\n
\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":".vehicle-hero__player {\n width: 100%;\n height: 680px;\n}\n\n.vehicle-hero__player iframe {\n width: 100%;\n height: 100%;\n border: 0;\n}\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"dynamiczne-generowanie-adresu-playera","__idx":8},"children":["Dynamiczne generowanie adresu Playera"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["W typowej integracji strona klienta posiada już dane pojazdu, na przykład VIN albo numer rejestracyjny. Adres Playera można wtedy wygenerować dynamicznie."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"js","header":{"controls":{"copy":{}}},"source":"function createVirtualCarPlayerUrl({ vin, numberplates, apiKey }) {\n const url = new URL('https://virtualcar360.pl/player/');\n\n if (vin) {\n url.searchParams.set('vin', vin);\n } else if (numberplates) {\n url.searchParams.set('numberplates', numberplates);\n } else {\n throw new Error('VIN albo numer rejestracyjny jest wymagany.');\n }\n\n url.searchParams.set('key', apiKey);\n\n return url.toString();\n}\n\nconst playerUrl = createVirtualCarPlayerUrl({\n vin: '1NKCLR0X1XR568641',\n apiKey: 'TWOJ_KLUCZ_API',\n});\n\ndocument.querySelector('#vc360-player').src = playerUrl;\n","lang":"js"},"children":[]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"przykład-integracji-w-react","__idx":9},"children":["Przykład integracji w React"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"type VirtualCarPlayerProps = {\n vin?: string;\n numberplates?: string;\n apiKey: string;\n};\n\nexport function VirtualCarPlayer({\n vin,\n numberplates,\n apiKey,\n}: VirtualCarPlayerProps) {\n const url = new URL('https://virtualcar360.pl/player/');\n\n if (vin) {\n url.searchParams.set('vin', vin);\n } else if (numberplates) {\n url.searchParams.set('numberplates', numberplates);\n } else {\n throw new Error('VIN albo numer rejestracyjny jest wymagany.');\n }\n\n url.searchParams.set('key', apiKey);\n\n return (\n \n );\n}\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"przykład-integracji-w-angularze","__idx":10},"children":["Przykład integracji w Angularze"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { CommonModule } from '@angular/common';\nimport { Component, Input } 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 \n `,\n})\nexport class VirtualCarPlayerComponent {\n @Input() carId?: string | number;\n @Input() vin?: string;\n @Input() numberplates?: string;\n @Input({ required: true }) apiKey!: string;\n\n constructor(private readonly sanitizer: DomSanitizer) {}\n\n get playerUrl(): SafeResourceUrl | null {\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 return null;\n }\n\n url.searchParams.set('key', this.apiKey);\n\n return this.sanitizer.bypassSecurityTrustResourceUrl(url.toString());\n }\n}\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Przykład użycia komponentu:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["albo po numerze rejestracyjnym:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["albo po carId:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"\n","lang":"ts"},"children":[]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"prezentowane-dane","__idx":11},"children":["Prezentowane dane"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Zakres danych widocznych w Playerze zależy od tego, jakie materiały są dostępne dla danej galerii pojazdu."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player może prezentować między innymi:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["zdjęcia samochodu z zamkniętymi drzwiami,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["zdjęcia samochodu z otwartymi drzwiami,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["zdjęcia dodatkowe,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["panoramę wnętrza,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["interaktywne zdjęcie wykonane z gimbala,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["hotspoty,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["certyfikat samochodu,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["inne oferty z tej samej lokalizacji."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Jeżeli dana galeria nie zawiera określonego typu materiału, Player może go pominąć i wyświetlić pozostałe dostępne dane."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"hotspoty-w-playerze","__idx":12},"children":["Hotspoty w Playerze"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hotspoty są częścią Playera i służą do oznaczania konkretnych elementów bezpośrednio na zdjęciach samochodu. Hotspot może wskazywać na przykład:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["reflektor,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["felgę,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["element wyposażenia,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["rysę,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["uszkodzenie,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["detal karoserii,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["element wnętrza."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Hotspot może posiadać dodatkowe zdjęcia pokazujące zaznaczony element w większym zbliżeniu. Przykładowo, jeżeli hotspot wskazuje reflektor, po jego wybraniu użytkownik może zobaczyć dodatkowe zdjęcie reflektora. Jeżeli hotspot oznacza rysę na karoserii, Player może wyświetlić powiększone zdjęcie tego miejsca."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Dzięki hotspotom Player może pełnić funkcję interaktywnej prezentacji stanu pojazdu, a nie tylko standardowej galerii zdjęć."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"automatyczny-wybór-galerii","__idx":13},"children":["Automatyczny wybór galerii"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player automatycznie wybiera najnowszą galerię przypisaną do przekazanego numeru VIN albo numeru rejestracyjnego."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Oznacza to, że w integracji nie trzeba znać identyfikatora ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]},". Wystarczy, że system klienta posiada VIN albo numer rejestracyjny pojazdu."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Przykład:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"txt","header":{"controls":{"copy":{}}},"source":"https://virtualcar360.pl/player/?vin=1NKCLR0X1XR568641&key=TWOJ_KLUCZ_API\n","lang":"txt"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["W tym przypadku Player:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["wyszuka galerie przypisane do VIN ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["1NKCLR0X1XR568641"]},","]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["wybierze najnowszą galerię,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["wyświetli ją w osadzonym widoku."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"player-a-api","__idx":14},"children":["Player a API"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player jest najprostszym sposobem integracji, ponieważ nie wymaga samodzielnego pobierania zdjęć ani implementowania logiki galerii po stronie klienta."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Jeżeli chcesz samodzielnie zbudować własny interfejs galerii, użyj API. Typowy proces API wygląda wtedy następująco:"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Pobierz najnowszą galerię po VIN albo numerze rejestracyjnym."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Odczytaj ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," galerii."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Przekaż ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["id"]}," jako ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["carId"]}," do endpointu ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/image-set"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Pobierz zestawy zdjęć, hotspoty i linki do materiałów video."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Zbuduj własny interfejs prezentacji pojazdu."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["W przypadku Playera ten proces jest obsługiwany automatycznie."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"bezpieczeństwo-i-dobre-praktyki","__idx":15},"children":["Bezpieczeństwo i dobre praktyki"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Używaj klucza API przypisanego do właściwej lokalizacji albo klucza grupowego, jeżeli Player ma obsługiwać wiele lokalizacji."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Nie zapisuj prawdziwych kluczy API w publicznych repozytoriach."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dla wielu Playerów na jednej stronie stosuj ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading=\"lazy\""]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Na listingu ofert unikaj jednoczesnego ładowania zbyt wielu Playerów widocznych od razu po wejściu na stronę."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dla stron szczegółów pojazdu zalecane jest użycie Playera jako głównego elementu multimedialnego."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Dla widoków mobilnych ustaw szerokość ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," na ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["100%"]}," i kontroluj wysokość przez responsywny kontener."]}]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"najczęstsze-problemy","__idx":16},"children":["Najczęstsze problemy"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"player-nie-wyświetla-galerii","__idx":17},"children":["Player nie wyświetla galerii"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Sprawdź, czy:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["przekazano poprawny ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["vin"]}," albo ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["numberplates"]},","]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["przekazano poprawny ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["key"]},","]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["pojazd posiada galerię w systemie VirtualCar360,"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["klucz API ma dostęp do lokalizacji, w której znajduje się pojazd."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"player-pokazuje-inną-galerię-niż-oczekiwano","__idx":18},"children":["Player pokazuje inną galerię niż oczekiwano"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Player automatycznie wybiera najnowszą galerię dla danego pojazdu. Jeżeli pojazd posiada wiele galerii, wyświetlona zostanie najnowsza dostępna galeria."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"player-nie-dopasowuje-się-do-szerokości-strony","__idx":19},"children":["Player nie dopasowuje się do szerokości strony"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Upewnij się, że ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iframe"]}," znajduje się w responsywnym kontenerze i ma ustawione:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"width: 100%;\nheight: 100%;\nborder: 0;\n","lang":"css"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"na-stronie-ładuje-się-zbyt-wiele-playerów","__idx":20},"children":["Na stronie ładuje się zbyt wiele Playerów"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Na listingu ofert dodaj ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["loading=\"lazy\""]}," i rozważ ładowanie Playera dopiero po wejściu karty pojazdu w obszar widoczny użytkownika."]},{"$$mdtype":"Tag","name":"hr","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"minimalny-przykład-produkcyjny","__idx":21},"children":["Minimalny przykład produkcyjny"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"
\n \n
\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":[]}]},"headings":[{"value":"Player","id":"player","depth":1},{"value":"Zasada działania","id":"zasada-działania","depth":2},{"value":"Parametry URL","id":"parametry-url","depth":2},{"value":"Osadzenie Playera po numerze VIN","id":"osadzenie-playera-po-numerze-vin","depth":2},{"value":"Osadzenie Playera po numerze rejestracyjnym","id":"osadzenie-playera-po-numerze-rejestracyjnym","depth":2},{"value":"Responsywne osadzenie","id":"responsywne-osadzenie","depth":2},{"value":"Przykład użycia na listingu ofert","id":"przykład-użycia-na-listingu-ofert","depth":2},{"value":"Przykład użycia jako slider na stronie pojazdu","id":"przykład-użycia-jako-slider-na-stronie-pojazdu","depth":2},{"value":"Dynamiczne generowanie adresu Playera","id":"dynamiczne-generowanie-adresu-playera","depth":2},{"value":"Przykład integracji w React","id":"przykład-integracji-w-react","depth":2},{"value":"Przykład integracji w Angularze","id":"przykład-integracji-w-angularze","depth":2},{"value":"Prezentowane dane","id":"prezentowane-dane","depth":2},{"value":"Hotspoty w Playerze","id":"hotspoty-w-playerze","depth":2},{"value":"Automatyczny wybór galerii","id":"automatyczny-wybór-galerii","depth":2},{"value":"Player a API","id":"player-a-api","depth":2},{"value":"Bezpieczeństwo i dobre praktyki","id":"bezpieczeństwo-i-dobre-praktyki","depth":2},{"value":"Najczęstsze problemy","id":"najczęstsze-problemy","depth":2},{"value":"Player nie wyświetla galerii","id":"player-nie-wyświetla-galerii","depth":3},{"value":"Player pokazuje inną galerię niż oczekiwano","id":"player-pokazuje-inną-galerię-niż-oczekiwano","depth":3},{"value":"Player nie dopasowuje się do szerokości strony","id":"player-nie-dopasowuje-się-do-szerokości-strony","depth":3},{"value":"Na stronie ładuje się zbyt wiele Playerów","id":"na-stronie-ładuje-się-zbyt-wiele-playerów","depth":3},{"value":"Minimalny przykład produkcyjny","id":"minimalny-przykład-produkcyjny","depth":2}],"frontmatter":{"seo":{"title":"Player"}},"lastModified":"2026-06-16T21:52:40.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/player","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}