• scrollBar: Boolean. It default value is false. It will show/hide the scrollbar inside the VVS
• homeStyle: String | null. It default value is null. It will define the home page style on the VVS, the available options are 'lookup', 'segment_selection' and 'vehicle_make_selection'
• widget: Boolean | Object {sizesLookup: boolean, brandsLookup: boolean, vehiclesLookup: boolean, redirectUrl: string, disableLoadFromUrl: boolean, styles: string}. It will enable the widget mode into the VVS and it can receive and Object that can define configurations about the widget mode, one of these options are 'styles' it can be use to put custom CSS code to replace styles on the widget and 'redirectUrl' is a configuration that we can use to redirect the user to another page after the vehicle or product's specifications are selected
• productSegment: String | null. It default value is null. It will define the allowed segments on the VVS, the available options are 'vehicles', 'tires', 'wheels', 'accessories'. Important.... Vehicles segment cannot be alone
• startPage: String | null. It default value is null. It will define the home page on the VVS when it is loaded the first time, the available options are 'home', 'vehicles', 'tires', 'wheels'
• adaptiveHeight: Boolean | null. It default value is null. It will define if the VVS will adapt the height of the iframe to the content inside it

<div id="autosync-visualizer"></div>
<script src="https://vvs.autosyncstudio.com/js/Autosync.js"></script>
<script>
  var autosync = new Autosync({
    /* Required */
    id: 'autosync-visualizer',
    key: 'YOUR_API_KEY' ,
    /* Optional */
    scrollBar: false,
    /*
      Options: null, 'lookup', 'segment_selection', 'vehicle_make_selection'
      Default: null
      Examples:
        - homeStyle: null
        - homeStyle: 'lookup'
         - homeStyle: 'segment_selection'
    */
    homeStyle: 'lookup', //
    /*
      Options: Boolean or Object {sizesLookup: boolean, brandsLookup: boolean, vehiclesLookup: boolean, redirectUrl: string, styles: string}
      Default: false
      Important : 'styles' must be CSS code and you should inspect the code of the visualizer to know the classes you can modify
      Examples:
        - widget: true
        - widget: {
          sizesLookup: true,
          brandsLookup: true,
          vehiclesLookup: true,
          redirectUrl: true,
          disableLoadFromUrl: true,
          styles: `
            .autosync-visualizer{
              background-color: #f8f9fa;
            }
          .lookup-tabs {
              grid-template-columns: repeat(3, 1fr) !important;
            }
          `
        }
    */
    widget: true,
    /*
    Options: 'vehicles', 'tires', 'wheels', 'accessories'
    Default: ['vehicles', 'tires', 'wheels']
    Important : 'vehicles' can't be used alone, this must be use at least one of the other options
    Examples:
      - productSegment: ['vehicles', 'wheels']
      - productSegment: 'tires'
    */
    productSegment: null,
    /*
      Options: 'home', 'vehicles', 'tires', 'wheels'
      Default: 'home'
      Example:
        - startPage: 'vehicles' // It will start the visualizer on the vehicle's makes page
    */
    startPage: null,
    adaptiveHeight: false,
  });
</script>