Content Comparison

 Parameters

### `id` (String)  
**Description**: The ID of the visualizer element.  
**Usage**: A unique identifier for the visualizer container in the DOM.  
**Example**:  
```javascript
id: 'autosync-visualizer'
```

---

### `key` (String)  
**Description**: Your API key for authentication.  
**Usage**: Ensure you replace `'YOUR_API_KEY'` with a valid API key.  
**Example**:  
```javascript
key: 'your-valid-api-key'
```

---

## Optional Parameters

### `adaptiveHeight` (Boolean)  
**Description**: Adapts the iframe's height to the content inside.  
**Default**: `false`  
**Example**:  
```javascript
adaptiveHeight: true
```

---

### `customStyleSheet` (String | null)  
**Description**: Adds a custom stylesheet to modify the visualizer's style.  
**Default**: `null`  
**Example**:  
```javascript
customStyleSheet: 'path/to/stylesheet.css'
```

---

### `disableQuoteForm` (Boolean)  
**Description**: Disables the quote form after a user interaction with "Quote," "Buy," or "Add to Cart" buttons.  
**Default**: `false`  
**Example**:  
```javascript
disableQuoteForm: true
```

---

### `homeStyle` (String | null)  
**Description**: Determines the home layout style of the visualizer.  
**Options**: `'lookup'`, `'segment_selection'`, `'vehicle_make_selection'`  
**Default**: `null`  
**Example**:  
```javascript
homeStyle: 'lookup'
```

---

### `onEvent` (Function | null)  
**Description**: A callback function triggered on specific events.  
**Default**: `null`  
**Example**:  
```javascript
onEvent: ({ event, data }) => console.debug('Event triggered', event, data)
```

---

### `productSegment` (Array | String | null)  
**Description**: Defines the product segments displayed in the visualizer.  
**Options**: `'vehicles'`, `'tires'`, `'wheels'`, `'accessories'`  
**Default**: `['vehicles', 'tires', 'wheels']`  
**Important**: `'vehicles'` must be combined with at least one other option.  
**Example**:  
```javascript
productSegment: ['vehicles', 'wheels']
```

---

### `startPage` (String | null)  
**Description**: Specifies the page where the visualizer will start.  
**Options**: `'home'`, `'vehicles'`, `'tires'`, `'wheels'`  
**Default**: `'home'`  
**Example**:  
```javascript
startPage: 'vehicles'
```

---

### `scrollBar` (Boolean)  
**Description**: Enables or disables the scrollbar.  
**Default**: `false`  
**Example**:  
```javascript
scrollBar: true
```

---

### `widget` (Boolean | Object)  
**Description**: Configures additional widget features.  
**Default**: `false`  
**Details**: If an object is provided, the following properties are available:  
- `sizesLookup` (Boolean): Enables size lookup.  
- `brandsLookup` (Boolean): Enables brand lookup.  
- `vehiclesLookup` (Boolean): Enables vehicle lookup.  
- `redirectUrl` (String): URL to redirect the user after specific interactions.  
- `styles` (String): CSS code for additional customization.  

**Examples**:  
Enable the widget:  
```javascript
widget: true
```

Customize the widget:  
```javascript
widget: {
  sizesLookup: true,
  brandsLookup: true,
  vehiclesLookup: true,
  redirectUrl: 'https://example.com',
  styles: `
    .autosync-visualizer {
      background-color: #f8f9fa;
    }
    .lookup-tabs {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  `
}
```

---

## Complete Example Configuration

```javascript
var autosync = new Autosync({
  id: 'autosync-visualizer',
  key: 'YOUR_API_KEY',
  adaptiveHeight: false,
  customStyleSheet: null,
  disableQuoteForm: false,
  homeStyle: 'lookup',
  onEvent: null,
  productSegment: ['vehicles', 'wheels'],
  startPage: 'vehicles',
  scrollBar: false,
  widget: {
    sizesLookup: true,
    brandsLookup: true,
    vehiclesLookup: true,
    redirectUrl: 'https://example.com',
    styles: `
      .autosync-visualizer {
        background-color: #f8f9fa;
      }
      .lookup-tabs {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    `
  }
});
```