AutoSync Spins
Documentation
A lightweight, zero-dependency JavaScript library for rendering interactive 360° product spin views — powered by Canvas API, optimised for Retina displays.
Quick Start
Get a 360° spin viewer on your page in three steps.
Add the container element
Place a <div> with the target ID and a data-onload-callback attribute pointing to your init function.
<div id="autosync-spins" data-onload-callback="onSpinLoad"></div>Define your init function
The library calls this function with a factory. Use it to configure and load a product.
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'YOUR_API_KEY',
height: 400,
});
spin.loadWheelById(719528);
}Load the script
Include the library script asynchronously at the end of your <body>.
<script src="https://vvs.autosyncstudio.com/spins/dist/api.js" async></script>Browser & OS Requirements
AutoSync Spins uses the Canvas API and requires a modern browser.
Configuration Options
All options passed to the initAutoSyncSpin() factory function.
| Option | Type | Default | Description |
|---|---|---|---|
| apiKey Required |
string | — | Your AutoSync API key. |
| apiMode Optional |
string | 'production' |
API environment. Either 'production' or 'development'. |
| containerId Optional |
string | 'autosync-spins' |
ID of the container element to render the viewer into. |
| height Optional |
number | 320 |
Height of the viewer in pixels. The canvas renders at 2× for HiDPI/Retina screens. |
| errorMessageOnImagesLoad Optional |
string | null |
Custom message shown in the error overlay when images fail to load. |
| cacheBuster Optional |
boolean | false |
When true, appends a timestamp query parameter to all image URLs to bypass browser caching. |
Methods
All methods return a Promise and can be chained with .then() / .catch() or used with async/await.
A Promise exposed on the API instance that resolves once the API key has been validated. Useful to ensure the connection is established before making load calls.
const spin = initAutoSyncSpin({ apiKey: 'YOUR_KEY' });
await spin.ready;
spin.loadWheelById(719528);Loads a wheel spin by its AutoSync wheel ID.
id number | string required
Loads a wheel spin by vendor part number.
pn string required
Looks up a wheel by its description string and loads the first result with a spin available.
description string required
Loads a tire spin by its AutoSync tire ID.
id number | string required
Loads a tire spin by vendor brand and part number. Both parameters are required.
brand string required
pn string required
Looks up a tire by its description string and loads the first result with a spin available.
description string required
Product Lookup
When a lookup returns multiple results, the library automatically selects the first one that has spin imagery available.
By ID
Most precise. Use the AutoSync internal ID for an exact match.
By Part Number
Match using the vendor's part number (SKU). For tires, also requires brand name.
By Description
Fuzzy search by product name. Great for CMS integrations where only text is available.
Tire Demos
Interactive previews. Drag left and right on the canvas to spin the product — keep dragging past the edge and the rotation follows until you let go.
Load by ID
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
});
spin.loadTireById(1934949);
}Load by Part Number
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
});
spin.loadTireByPn('Amp', '2857017AMPRTC');
}Load by Description
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
});
spin.loadTireByDescription('LT285/70R17 C Amp Terrain Attack R/T'));
}Wheel Demos
Drag left and right on the canvas to rotate the wheel. The drag carries on outside the viewer, so you can swing well past the edge.
Load by ID
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
});
spin.loadWheelById(719528);
}Load by Part Number
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
});
spin.loadWheelByPn('TW118R-22103604+25');
}Load by Description
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
});
spin.loadWheelByDescription(
'Torque Wheels TW118R Velocity'
);
}Error Handling
All load methods return a Promise. Use .catch() or try/await to handle errors gracefully.
Handling a failed load with .catch()
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
});
spin.loadWheelByDescription('DOES NOT EXIST')
.catch(error => {
console.error('Failed:', error.message);
});
}to see the error message.
Handling a failed load with async/await
async function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
});
try {
await spin.loadWheelByDescription('DOES NOT EXIST');
} catch (error) {
console.error('Failed:', error.message);
}
}to see the error message.
Custom error overlay message
function onSpinLoad(initAutoSyncSpin) {
const spin = initAutoSyncSpin({
apiKey: 'vvse_demo',
apiMode: 'production',
height: 400,
// Override the default error message
errorMessageOnImagesLoad: 'Product view unavailable',
});
spin.loadTireById(1934949);
}