...
Create a container
divwith an ID.Code Block <div id="EXAMPLE-ID"></div>
Import the script into your page. This script should be at the end of the body tag.
Code Block <script src="AUTOSYNC_API_URL/js/Autosync.js"></script>
Call the
AutosyncVisualizerconstructor. You must provide the API key and the container ID. Use object notation to provide the following values.
...
Required
...
Parameters
id (String)
...
Description: The ID of the visualizer container
Usage: A unique identifier for the visualizer container in the DOM
Example:
| Code Block | ||
|---|---|---|
| ||
id: 'autosync-visualizer' ```
---
### `key` |
...
key (String)
...
Description: Your API key for authentication.
Usage: Ensure you replace 'YOUR_API_KEY'
...
with
...
a
...
valid
...
API
...
key.
...
Example:
| Code Block | ||
|---|---|---|
| ||
key: 'your-valid-api-key'
```
---
## Optional Parameters
### `adaptiveHeight` |
...
Optional Parameters
adaptiveHeight (Boolean)
...
Description: Adapts the iframe's
...
height
...
to
...
the
...
content
...
inside.
...
Default: false
Example:
| Code Block | ||
|---|---|---|
| ||
adaptiveHeight: true |
...
customStyleSheet (String | null)
Description: Adds a custom stylesheet to modify the visualizer's style.
Default: null
Example:
| Code Block | ||
|---|---|---|
| ||
customStyleSheet: 'path/to/stylesheet.css' ``` --- ### `disableQuoteForm` |
...
disableQuoteForm (Boolean)
...
Description: Disables the quote form after a user interaction with "Quote,"
...
"Buy,"
...
or
...
"Add
...
to
...
Cart"
...
buttons.
...
Default: false
Example:
| Code Block | ||
|---|---|---|
| ||
disableQuoteForm: true |
...
homeStyle (String | null)
Description: Determines the home layout style of the visualizer.
Options: 'lookup', 'segment_selection'
...
,
...
'vehicle_make_selection'
...
Default: null
Example:
| Code Block | ||
|---|---|---|
| ||
homeStyle: 'lookup'
```
---
### `onEvent` |
...
onEvent (Function
...
|
...
null)
...
Description: A callback function triggered on specific events.
Default: null
Available events:
submitQuote: Triggered when we request an order.
Example:
| Code Block | ||
|---|---|---|
| ||
onEvent: ({ event, data }) => console.debug('Event triggered', event, data)
```
---
### `productSegment` |
...
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:
| Code Block | ||
|---|---|---|
| ||
productSegment: ['vehicles', 'wheels'] ``` --- ### `startPage` |
...
startPage (String
...
|
...
null)
...
Description: Specifies the page where the visualizer will start.
Options: 'home', 'vehicles', 'tires', 'wheels'
Default: 'home'
Example:
| Code Block | ||
|---|---|---|
| ||
startPage: 'vehicles'
```
---
### `scrollBar` |
...
scrollBar (Boolean)
...
Description: Enables or disables the scrollbar.
Default: false
Example:
| Code Block | ||
|---|---|---|
| ||
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:
| Code Block | ||
|---|---|---|
| ||
widget: true |
Customize the widget:
| Code Block | ||
|---|---|---|
| ||
widget: {
sizesLookup: true,
brandsLookup: true,
vehiclesLookup: true,
redirectUrl: 'https<https://example.com',>
styles: `
.autosync-visualizer {
background-color: #f8f9fa;
}
.lookup-tabs {
grid-template-columns: repeat(3, 1fr) !important;
}
`
}
```
---
## Complete Example Configuration
```javascript
|
...
Complete Example Configuration
| Code Block | ||
|---|---|---|
| ||
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<https://example.com',>
styles: `
.autosync-visualizer {
background-color: #f8f9fa;
}
.lookup-tabs {
grid-template-columns: repeat(3, 1fr) !important;
}
`
}
});
``` |
| Note |
|---|
Each domain where the visualizer is embedded must be whitelisted in the settings of the API key used for the visualizer in the portal. |
...