Skip to main content

​
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

FeatureQuery ParamDefaultDescription
Upscaled ImagesupscaledtrueStart with upscaled/enhanced images if available.
Photo ModephotomodefalseStart in “photo mode” (one-by-one image view) instead of default view.
HotspotshotspottrueShow damage hotspots on exterior/interior images.
Share ButtonsharabletrueShow the share icon in the top right.
Zoom SupportzoomabletrueAllow zooming in functionality.
FullscreenfullscreenabletrueAllow fullscreen functionality (mainly for 360 view).
Interior SwitchinteriorfalseShow the switch to toggle between Exterior and Interior views.
DamagesdamagestrueShow the damages carousel/list.
CarouselcarouseltrueShow the image carousel.
SelectorselectortrueShow the position selector
Tab ViewtabviewexteriorSet the active tab view. Possible values: 360, exterior, interior, others, damages.

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

​
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.