...
To add the visualizer to any page you must have a valid AutoSync API key. If you have a valid API key you can proceed to:
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:
id– The ID of the containerkey– The API key provided for you in the portal
Optional:
scrollBar– Show or hide the visualizer’s scroll bar; by default it's set to falseproductSegment- Show only the interface for one product’s segment, it can be an array with more or a string for only one option, this are the valid values:tires - Allows a tire’s brand page and a interface to see each tire by it self
wheels - Allows a wheel’s brand page and a interface to see each wheel by it self
accessories - Allows a accessory’s brand page and a interface to see each accessory by it self
vehicles - Allows the VOV (View on vehicle) Images for each of the others segments
| 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. |
...
| Code Block | ||
|---|---|---|
| ||
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Example</title>
<script src="https://vvs.autosyncstudio.com/js/Autosync.js"></script>
</head>
<body style="margin: 0">
<div id="YOUR_CONTAINER_ID"></div>
<script>
var autosync = new Autosync({
/* Required */
id: "YOUR_CONTAINER_IDautosync-visualizer",
key: "YOURapi_API_KEYtest",
/* Optional */
scrollBar: false,
productSegment: null, /* /*
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,
});
</script>
</body>
</html> |
...
You may provide us with your own Measurement ID through the portal following the steps below.
Click on API in the sidebar menu
Open your key configuration page
Go to the section Visualizer Configuration
Paste you Measurement ID into the field labeled “Measurement ID”
User properties
Visualizer configuration, set in the portal under Visualizer Configuration section, is tracked with Google Analytics (under user_properties). This is mainly to know which settings are the most popular to improve our services for our customers.
...