Player integration

Apr 2

Our Player support the following parameters, while building the embed code.

The embed code can either be defined via the dashboard, via our intuitive GUI, or manually using the following parameters

    Property name
    Description
    Required
    Type
    Default
  


    content-id
    Id of the content. Will be embedded in the “ready to use” snippet or available from the customer dashboard.
    true
    Number
    1
  

    brand-color
    Css color value for- progress bar- rotation prompt icon- ...
    false
    String
    “#ffc719”
  

    height
    Height of the viewer - css value.
    false
    String
    “100%”
  

    width
    Width of the viewer - css value.
    false
    String
    “100%”
  

    enable-rotation-prompt
    Prompt which moves model and hand icon.
    false
    Boolean
    true
  

    show-frame
    To display frame behind object.
    false
    Boolean
    true
  

    initial-zoom
    To zoom the camera additionally after it has been fitted to the model sphere.
    false
    Number
    0
  

    initial-camera-position-x
    To change the initial camera position before it is fitted to the model sphere.
    false
    Number
    9
  

    initial-camera-position-y
    To change the initial camera position before it is fitted to the model sphere.
    false
    Number
    3
  

    initial-camera-position-z
    To change the initial camera position before it is fitted to the model sphere.
    false
    Number
    9
  

    only-in-viewport
    Lazy loading for widget. Widget starts loading only when it is visible in the viewport and intersection widget with the viewport is >= 20%. Widget is destroyed when it goes totally outside the viewport's 0% intersection.
To always eagerly load widget (May decrease performance of the page and increase page loading time) use false value.
    false
    Boolean
    true
  

Property name	Description	Required	Type	Default
content-id	Id of the content. Will be embedded in the “ready to use” snippet or available from the customer dashboard.	true	Number	1
brand-color	Css color value for- progress bar- rotation prompt icon- ...	false	String	“#ffc719”
height	Height of the viewer - css value.	false	String	“100%”
width	Width of the viewer - css value.	false	String	“100%”
enable-rotation-prompt	Prompt which moves model and hand icon.	false	Boolean	true
show-frame	To display frame behind object.	false	Boolean	true
initial-zoom	To zoom the camera additionally after it has been fitted to the model sphere.	false	Number	0
initial-camera-position-x	To change the initial camera position before it is fitted to the model sphere.	false	Number	9
initial-camera-position-y	To change the initial camera position before it is fitted to the model sphere.	false	Number	3
initial-camera-position-z	To change the initial camera position before it is fitted to the model sphere.	false	Number	9
only-in-viewport	Lazy loading for widget. Widget starts loading only when it is visible in the viewport and intersection widget with the viewport is >= 20%. Widget is destroyed when it goes totally outside the viewport's 0% intersection. To always eagerly load widget (May decrease performance of the page and increase page loading time) use false value.	false	Boolean	true

Example usage

<script src="https://widget.kargo.co.uk/kc-kargo-widget.min.js"></script>

<style>
  .kc-kargo-wrapper {
    height: 650px;
  }
</style>

<div class="kc-kargo-wrapper">
  <kc-kargo-widget content-id="15" brand-color="#ffbd4c"></kc-kargo-widget>
</div>

Thomas Michelou

Player integration

Preparing Your 3D models