AutoSync Visualizer relies on AutoSync API, see more in the AutoSync API documentation.

Demo: https://vvs.autosyncstudio.com/demo.html

1 1. How to embed a visualizer
- - 1.1.1 Required Parameters
    - 1.1.1.1 id (String)
  - 1.1.2 key (String)
- 1.2 Optional Parameters
  - 1.2.1 adaptiveHeight (Boolean)
  - 1.2.2 customStyleSheet (String | null)
  - 1.2.3 disableQuoteForm (Boolean)
  - 1.2.4 homeStyle (String | null)
  - 1.2.5 onEvent (Function | null)
    - 1.2.5.1 Configuration
    - 1.2.5.2 Event Structure
    - 1.2.5.3 Available Events
    - 1.2.5.4 1. submitQuote
      - 1.2.5.4.1 1.1 Event Data Structure
      - 1.2.5.4.2 1.2 Redirecting After Quote Submission
    - 1.2.5.5 2. homeSearch
      - 1.2.5.5.1 2.1 Event Data Structure
        1.2.5.5.1.1 2.1.1 brand (Optional String)
        1.2.5.5.1.2 2.1.2 tires (Optional Boolean)
        1.2.5.5.1.3 2.1.3 tire_size (Optional String)
        1.2.5.5.1.4 2.1.4 wheels (Optional Boolean)
        1.2.5.5.1.5 2.1.5 wheel_size (Optional String)
        1.2.5.5.1.6 2.1.6 vehicle_id (Optional Number)
    - 1.2.5.6 Future Events
    - 1.2.5.7 Implementation Examples
      - 1.2.5.7.1 Basic Usage: Event Handling
      - 1.2.5.7.2 Integrating with Analytics
      - 1.2.5.7.3 Sending Data to Your Backend
      - 1.2.5.7.4 Using onEvents to push products to carts
      - 1.2.5.7.5 Using Switch Statement for Multiple Events
    - 1.2.5.8 Best Practices
    - 1.2.5.9 Limitations
  - 1.2.6 productSegment (Array | String | null)
  - 1.2.7 startPage (String | null)
  - 1.2.8 scrollBar (Boolean)
  - 1.2.9 widget (Boolean | Object)
- 1.3 Basic Example Configuration
2 2. Google Analytics
- 2.1 How to use your own Google Analytics dashboard
- 2.2 User properties
- 2.3 Events

1. How to embed a visualizer

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 div with an ID.
<div id="EXAMPLE-ID"></div>
Import the script into your page. This script should be at the end of the body tag.
<script src="AUTOSYNC_API_URL/js/Autosync.js"></script>
Call the AutosyncVisualizer constructor. 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:

id: 'autosync-visualizer'

`key` (String)

Description: Your API key for authentication.
Usage: Ensure you replace 'YOUR_API_KEY' with a valid API key.
Example:

key: 'your-valid-api-key'

Optional Parameters

`adaptiveHeight` (Boolean)

Description: Adapts the iframe's height to the content inside.
Default: false
Example:

adaptiveHeight: true

`customStyleSheet` (String | null)

Description: Adds a custom stylesheet to modify the visualizer's style.
Default: null
Example:

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:

disableQuoteForm: true

`homeStyle` (String | null)

Description: Determines the home layout style of the visualizer.
Options: 'lookup', 'segment_selection', 'vehicle_make_selection'
Default: null
Example:

homeStyle: 'lookup'

`onEvent` (Function | null)

Description: The onEvent configuration provides a powerful way to integrate with user interactions in the AutoSync Visualizer embed. It allows you to execute custom JavaScript code in response to specific user actions, giving you greater control over the user experience and seamless integration with your existing systems.
Default: null

Configuration

Add the onEvent parameter to your embed configuration:

const config = {
    // Other configuration options
    onEvent: function({event, data}) {
        console.log(event, data);
        // Your custom code here
        
        // Example
        const wheels = data?.wheels || [];
        const tires = data?.tires || [];
        const products = [...wheels, ...tires];
        const promises = [];

        products.forEach(product => {
          const URL = `${CART_URL_ADD}?id=${product.partNumber}&quantity=${product.quantity}`;
          promises.push(fetch(URL, { method: 'GET' }));
        });

        Promise.all(promises).then(() => {
          window.location.href = `${CART_URL}`;
        }).catch(err => {
          console.error('Error adding products to cart', err);
        });
    },

    // Optional: disable quote form if needed, For example if you want to use your own cart process and you only want to push the products to your cart
    disableQuoteForm: true
};

Event Structure

The onEvent function receives a single object parameter with two properties:

event: A string identifying the type of event that occurred
data: An object containing the event-specific data

Available Events

Currently, the following events are supported:

1. submitQuote

This event is triggered in two scenarios:
1. When an RFQ (Request for Quote) form is filled and submitted
2. When the "Buy/Add to cart / Request a quote" button is clicked if disableQuoteForm is set to TRUE

1.1 Event Data Structure

For the submitQuote event, the data object contains comprehensive information about the customer's selections:

{
  "vehicle": {
    "id": Number,            // Unique identifier for the vehicle
    "make": String,          // Vehicle make (e.g., "Lexus")
    "model": String,         // Vehicle model (e.g., "ES300h")
    "submodel": String,      // Vehicle submodel (e.g., "F Sport Handling")
    "year": Number,          // Model year (e.g., 2025)
    "body": String,          // Body type (e.g., "Sedan")
    "bed": String,           // Bed type for trucks, if applicable
    "isDrw": Boolean,        // Dual rear wheel flag
    "boltCircle": Number,    // Bolt circle diameter in mm
    "bore": Number,          // Hub bore diameter in mm
    "boreRear": Number,      // Rear hub bore diameter if different, null otherwise
    "maxWheelLoad": Number   // Maximum wheel load capacity in kg
  },
  
  "tires": [                 // Array of selected tires
    {
      "aspectRatio": Number, // Tire aspect ratio (e.g., 40)
      "brand": String,       // Tire brand (e.g., "Radar")
      "diameter": Number,    // Overall diameter in inches
      "displayName": String, // Display name (e.g., "235/40R19 XL All Season Ev")
      "ean": String,         // European Article Number
      "externalProductId": String, // ID from another platform syncronized with ours, using External Products ID mapping on the Admin Panel
      "id": Number,          // Unique identifier for the tire
      "gmCode": String,      // GM code if applicable, null otherwise
      "inchWidth": Number,   // Width in inches
      "loadRating": String,  // Load rating (e.g., "96")
      "model": String,       // Tire model (e.g., "All Season Ev")
      "overallDiameter": Number, // Overall diameter in mm, null if not available
      "overallWidth": Number,    // Overall width in mm, null if not available
      "partNumber": String,      // Manufacturer part number
      "plyRating": String,       // Ply rating, null if not applicable
      "quantity": Number,        // Quantity selected
      "rimDiameter": Number,     // Rim diameter in inches
      "sectionWidth": Number,    // Section width in mm
      "sidewall": String,        // Sidewall type (e.g., "BSW")
      "speedRating": String,     // Speed rating (e.g., "W")
      "services": [             // Array of services associated with this tire. Just mandatory services if disableQuoteForm is true
        "id": Number,           // Unique identifier for the service
        "quantity": Number,     // Service quantity required for the current Tire
      ]
    }
    // Additional tires if selected
  ],
  
  "wheels": [                // Array of selected wheels
    {
      "accent": String,      // Accent type (e.g., "Brushed")
      "brand": String,       // Wheel brand (e.g., "Niche")
      "color": String,       // Color (e.g., "Black")
      "diameter": Number,    // Diameter in inches
      "externalProductId": String, // ID from another platform syncronized with ours, using External Products ID mapping on the Admin Panel
      "finish": String,      // Finish type (e.g., "Gloss")
      "gtin": String,        // Global Trade Item Number, null if not available
      "id": Number,          // Unique identifier for the wheel
      "inventory": Number,   // Available inventory
      "model": String,       // Wheel model (e.g., "Milan")
      "partNumber": String,  // Manufacturer part number
      "price": Number,       // Price per wheel
      "quantity": Number,    // Quantity selected
      "styleId": Number,     // Style identifier
      "submodel": String,    // Wheel submodel
      "services": [         // Array of services associated with this wheel. Just mandatory services if disableQuoteForm is true
        "id": Number,           // Unique identifier for the service
        "quantity": Number,     // Service quantity required for the current Wheel
      ]
    // Additional wheels if selected
  ],
  
  "services": [             // Array of general services selected
    "id": Number,           // Unique identifier for the service
    "name": String,         // Name used to identify the service on the Front-end
    "cost": Number,         // Service's cost displayed on the Front-end and used to calculate the Total Cost for the user
  ]
}

1.2 Redirecting After Quote Submission

const config = {
  // Other configuration options
  onEvent: function({event, data}) {
    if (event === 'submitQuote') {
      // Save selection in localStorage
      localStorage.setItem('last_quote', JSON.stringify(data));
      
      // Redirect to confirmation page
      window.location.href = '/quote-confirmation?id=' + data.vehicle.id;
    }
  }
};

2. `homeSearch`

This event is triggered in two scenarios when the user hits the button “Search”:
1. Using the “Lookup” Home page style and selecting a vehicle / Tire or Wheel Size / Tire or Wheel Brand
2. Using the “Widget” mode and selecting a vehicle / Tire or Wheel Size / Tire or Wheel Brand

2.1 Event Data Structure

For the homeSearch event, the data object contains comprehensive information about the customer's selections:

{
  "brand"?: String,
  "tires"?: Boolean,
  "tire_size"?: String,
  "wheels"?: Boolean,
  "wheel_size"?: String,
  "vehicle_id"?: Number,
}

2.1.1 `brand` (Optional String)

Purpose: Identifies the manufacturer of tires or wheels
Context: Only appears during tire or wheel-specific searches
Example Scenarios:
- Tire brand search: 'Michelin', 'Goodyear', 'Bridgestone'
- Wheel brand search: 'BBS', 'Enkei', 'Sparco'
Not Used: Does not apply to general vehicle searches

`2.1.2 tires` (Optional Boolean)

Purpose: Indicates a specific tire-related search
Behavior: Only present when user is explicitly searching for tires
Linked Properties:
- Appears with brand when searching tire manufacturers
- Accompanied by tire_size for detailed tire specifications

`2.1.3 tire_size` (Optional String)

Purpose: Provides specific tire dimension details
Context: Appears during tire-specific searches
Example Formats: '395/70R16', '285/55R20'
Usage: Enables precise tire specification searches

`2.1.4 wheels` (Optional Boolean)

Purpose: Indicates a specific wheel-related search
Behavior: Only present when user is explicitly searching for wheels
Linked Properties:
- Appears with brand when searching wheel manufacturers
- Accompanied by wheel_size for detailed wheel specifications

`2.1.5 wheel_size` (Optional String)

Purpose: Provides specific wheel dimension details
Context: Appears during wheel-specific searches
Example Formats: '30x11', '20x9'
Usage: Enables precise wheel specification searches

`2.1.6 vehicle_id` (Optional Number)

Purpose: Unique identifier for a specific vehicle
Context: Only appears when user searches for a specific vehicle
Usage: Allows direct retrieval of individual vehicle details

Future Events

AutoSync will be adding more events in the future. When new events are released, they will be delivered through the same onEvent function, with different event string values. This documentation will be updated with details about each new event as they become available.

Implementation Examples

Basic Usage: Event Handling

const config = {
  // Other configuration options
  onEvent: function({event, data}) {
    // Check which event was triggered
    if (event === 'submitQuote') {
      console.log('Quote submitted with the following details:');
      console.log('Vehicle:', data.vehicle.year, data.vehicle.make, data.vehicle.model);
      console.log('Tires selected:', data.tires.length);
      console.log('Wheels selected:', data.wheels.length);
    } else if (event === 'homeSearch') {
      console.log('Search values', data);
    }
    // Ready for future events
    // else if (event === 'otherEvent') {
    //   console.log('Other event triggered:', data);
    // }
  }
};

Integrating with Analytics

const config = {
  // Other configuration options
  onEvent: function({event, data}) {
    if (event === 'submitQuote') {
      // Send to Google Analytics
      gtag('event', 'quote_submission', {
        'vehicle_make': data.vehicle.make,
        'vehicle_model': data.vehicle.model,
        'vehicle_year': data.vehicle.year,
        'tire_brand': data.tires.length > 0 ? data.tires[0].brand : null,
        'wheel_brand': data.wheels.length > 0 ? data.wheels[0].brand : null,
        'total_items': data.tires.length + data.wheels.length
      });
    }
  }
};

Sending Data to Your Backend

const config = {
  // Other configuration options
  onEvent: function({event, data}) {
    if (event === 'submitQuote') {
      // Send the selection data to your own backend
      fetch('https://your-backend.com/api/quotes', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          eventType: event,
          eventData: data
        })
      })
      .then(response => response.json())
      .then(result => {
        console.log('Quote saved successfully:', result);
        // Show success message to user
        alert('Your quote has been submitted successfully!');
      })
      .catch(error => {
        console.error('Error saving quote:', error);
      });
    }
  }
};

Using onEvents to push products to carts

For this example we used externalProductId as the identifier value for products (You can use any other product attribute as partNumber or Id). This value is only available we enable External Product Ids on AutoSync admin panel configurations and we must provide the feed to synchronize AutoSync products and products on the external feed.

const config = {
  // Other configuration options
  disableQuoteForm: true,
  onEvent: function({event, data}) {
      const CART_URL_ADD = 'https://test.com/cart/add';
      if (event === 'submitQuote') {
          const wheels = data?.wheels || [];
          const tires = data?.tires || [];
          const products = [...wheels, ...tires];
          const promises = [];

          products.forEach(product => {
              const URL = `${CART_URL_ADD}?id=${product.externalProductId}&quantity=${product.quantity}`;
              promises.push(fetch(URL, { method: 'GET' }));
          });

          Promise.all(promises).then(() => {
              window.location.href = 'https://test.com/cart';
          }).catch(err => {
              console.error('Error adding products to cart', err);
          });
      }
  }
}

Using Switch Statement for Multiple Events

const config = {
  // Other configuration options
  onEvent: function({event, data}) {
    switch(event) {
      case 'submitQuote':
        // Process quote submission
        processQuoteSubmission(data);
        break;
        
      // Ready for future events
      // case 'otherEvent':
      //   processOtherEvent(data);
      //   break;
        
      default:
        console.log('Unhandled event type:', event);
    }
  }
};

// Helper functions
function processQuoteSubmission(data) {
  console.log('Processing quote submission:', data);
  // Your quote processing logic here
}

Best Practices

Future-Proof Your Code: Design your event handler to check the event type and be ready to handle new event types as they are added to the platform.
Error Handling: Always include error handling in your event handler to prevent interruptions in the user experience.
Performance: Keep your event handler lightweight. If you need to perform complex operations, consider offloading them to a background process or your server.
User Feedback: Provide visual feedback to users when their action triggers an event, especially if there might be a delay in processing.
Testing: Test your event handler thoroughly with different selection combinations to ensure it works correctly in all scenarios.
Security: Be cautious about sending sensitive data. Only send what you need and ensure your endpoints are properly secured.

Limitations

Currently, only the submitQuote and homeSearch event is available.
Only mandatory services are currently sent through the event data if disableQuoteForm is true.
The event handler must be defined at the time of initialization.

`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:

productSegment: ['vehicles', 'wheels']

`startPage` (String | null)

Description: Specifies the page where the visualizer will start.
Options: 'home', 'vehicles', 'tires', 'wheels' or 'visualizer' URL with optional parameters
Default: 'home'
Example:

startPage: 'vehicles'
startPage: 'tires'
startPage: 'wheels'

To use the option visualizer we need to understand the optional and required parameters because for this option we need to generate a custom URL for each case of use.

Required Parameters:

visualizer_view: Defines the content for the top section (Visualization section). Options: wheels, tires, or vehicles.
visualizer_segment: Defines the content for the bottom section (Products list). Options: wheels or tires.
visualizer_shopping_type: Specifies what appears in the products list section. Options: packages, wheels, or tires.

Optional Parameters

wheels: Visualize only wheels without the vehicle. Set to true (wheels=true).
tires: Visualize only tires without the vehicle. Set to true (tires=true).
current_visualizer_vehicle_angle: Determines the default angle for displaying a loaded vehicle. Options: 32, 14, or 1.
ride_height: Sets the lift height for a loaded vehicle (if applicable). Check vehicle lift availability on AutoSync’s admin portal.
vehicle_query: Automatically loads a vehicle using its trim. The first vehicle returned by the API will be loaded; be as specific as possible.
vehicle_id: Load a vehicle by AutoSync vehicle ID.
wheel_query: Lists only wheels that match the query description.
wheel_size: Define a size to load only wheels of that size.
wheel_size_rear: Define a size to load only wheels that have this size as a rear option.
filter_wheels_brand: Show only wheels for the specified brand.
filter_wheels_diameter: Show only wheels for the specified diameter.
filter_wheels_diameter_2: Show only wheels for the specified diameter as an option for the rear side.
filter_wheels_width: Show only wheels for the specified width.
filter_wheels_width_2: Show only wheels for the specified width as an option for the rear side.
filter_wheels_offset: Show only wheels for the specified offset.
filter_wheels_offset_2: Show only wheels for the specified offset as an option for the rear side.
filter_wheels_segment_tag: Show only wheels for the specified segment.
filter_wheels_short_color: Show only wheels for the specified color.
filter_wheels_short_finish: Show only wheels for the specified finish.
filter_wheels_vehicle_type_tag: Show only wheels for the specified vehicle type.
tire_query: Lists only tires that match the query description.
tire_size: Define a size to load only tires of that size.
tire_size_rear: Define a size to load only tires that have this size as a rear option.
filter_tires_brand: Show only tires for the specified brand.
filter_tires_diameter: Show only tires for the specified diameter.
filter_tires_diameter_2: Show only tires for the specified diameter as an option for the rear side.
filter_tires_inch_width: Show only tires for the specified inch width.
filter_tires_inch_width_2: Show only tires for the specified inch width as an option for the rear side.
filter_tires_section_width: Show only tires for the specified section width.
filter_tires_section_width_2: Show only tires for the specified section width as an option for the rear side.
filter_tires_rim_diameter: Show only tires for the specified rim diameter.
filter_tires_rim_diameter_2: Show only tires for the specified rim diameter as an option for the rear side.
filter_tires_segment: Show only tires for the specified segment.
filter_tires_speed_rating: Show only tires for the specified speed rating.
filter_tires_speed_rating_2: Show only tires for the specified speed rating as an option for the rear side.
filter_tires_vehicle_type_tag: Show only tires for the specified vehicle type.

`scrollBar` (Boolean)

Description: Enables or disables the scrollbar.
Default: false
Example:

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:

widget: true

Customize the widget:

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;
    }
  `
}

Basic Example Configuration

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;
      }
    `
  }
});

Each domain where the visualizer is embedded must be whitelisted in the settings of the API key used for the visualizer in the portal.

Implementation example:

<!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: "autosync-visualizer",
			key: "api_test",
			onEvent: ({event, data}) => {
				console.debug(event, data)
			},
		});
	</script>
  </body>
</html>

2. Google Analytics

Visualizer stats are tracked with Google Analytics. You can request access from AutoSync staff.

How to use your own Google Analytics dashboard

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.

Properties:

visualizer_key – the key provided to our customers to use the visualizer.
visualizer_ga4_key – the key provided by our customers to user their own Google Analytics dashboard.
custom_logo – a configuration for the visualizer, this means if our customers are using a logo on the visualizer.
custom_background_image – a configuration for the visualizer, this means if our customers are using a background image on the visualizer.
thumbnails_mono – a configuration for the visualizer, this means if our customers are using thumbnails with monochromatic colors.
scroll_into_view – a configuration to align the visualizer to the top of the page when user is using it.
align_home_page_to_top – a configuration for the visualizer, this means if our customers likes a home page with the content centered or aligned to the top.
listing_vehicles_by_year – a configuration for the visualizer, this means if our customers wants to see on each make's page all the vehicles at the same time or separated by year (Different pages)
pagination_size – a configuration for the visualizer, this means if our customers wants to show more or less items per page for products.
utm_source – a property that means from where is using the user the visualizer. If is using our stage page Stage page you will see the value “AutoSync Stage” in other case you will see a domain name.

Events

AutoSync Visualizer has a complete event tracking configuration, here is the list of events configured.

Event name	Attributes	Description	Where

Event name

Attributes

Description

Where

as_page_view

page_parent_location
page_location
page_title

Visited pages.

page_parent_location: String. Domain name of the website that embeds the visualizer
page_location: String. The URL of the visited page
page_title: String. The name of the visited page

ALL PAGES

as_search_tool_query

search_query
search_type
search_results
search_makes
search_brands

With this event we can know what are the users searching.

AutoSync Visualizer