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 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
    },

    // 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
      "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
      "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 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'
Default: 'home'
Example:

startPage: 'vehicles'

`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. `search_query`: String. Words used by the user to search something `search_type`: String. What is looking for (Vehicles, Wheels, Tires, Accessories, etc...) `search_results`: Int. How many results has that query `search_makes`: Int. Number of makes found with the query (Only for search_type: vehicles) `search_brands`: Int. Number of brands found with the query (Not for search_type: vehicles)	HOME PAGE
`as_search_tool_selection`	For vehicles: `vehicle_make` `vehicle_model` `vehicle_year` `vehicle_body` `vehicle_name` For products: `item_brand` `item_model` `item_style_id` For makes: `make_name` Form brands: `brand_name`	When an user found a vehicle or a product through the search tool. Each kind of selection has their own attibutes. `vehicle_make` : String. Make name of selected vehicle. `vehicle_model`: String. Model name of selected vehicle `vehicle_year`: Int. Year of the selected vehicle. `vehicle_body`: String. Body type of selected vehicle. `vehicle_name`: String. Large description for the vehicle. Year, Make, Model and Body type. `item_brand`: String. Item’s brand name. `item_model`: String. Item's model. `item_style_id`: Int. Item’s style ID. If it has `make_name`: String. Make name of selected make. `brand_name`: String. Brand name of selected brand.	HOME PAGE
`as_select_make`	`make_name`	Looks for each make selection on vehicle’s makes page. `make_name`: String. Make name of selected make.	VEHICLE’S MAKE PAGE
`as_select_brand`	`brand_name` `brand_type`	Looks for each brand selection on product’s brands page. `brand_name`: String. Brand name of selected brand. `brand_type` : String. Type of product selected.	TIRE’S BRAND PAGE
`as_select_brand`	`brand_name` `brand_type`	Looks for each brand selection on product’s brands page. `brand_name`: String. Brand name of selected brand. `brand_type` : String. Type of product selected.	WHEEL’S BRAND PAGE
`as_select_vehicle`	`vehicle_id` `vehicle_make` `vehicle_model` `vehicle_submodel` `vehicle_year` `vehicle_type` `vehicle_body` `vehicle_drw` `vehicle_name`	This events is telling us which vehicles are loaded on the “Builder” or page for visualization. `vehicle_make` : String. Make name of selected vehicle. `vehicle_model`: String. Model name of selected vehicle `vehicle_submodel`: String. Submodel name of selected vehicle `vehicle_year`: Int. Year of the selected vehicle. `vehicle_type`: String. Type of selected vehicle (SUV, CAR, VAN, etc). `vehicle_body`: String. Body type of selected vehicle. `vehicle_drw`: Boolean. If the vehicle is dually or not. `vehicle_name`: String. Large description for the vehicle. Year, Make, Model and Body type.	BUILDER PAGE
`as_change_vehicle_color`	`vehicle_id` `vehicle_name` `vehicle_color`	What colors are popular for each kind of vehicle, etc… In this way we can help to get accessories or wheels with popular colors. `vehicle_id`: Int. Vehicle selected ID `vehicle_name`: String. Large description for the vehicle. Year, Make, Model and Body type. `vehicle_color`: Int. Color code selected	BUILDER PAGE Hit on this button And select a color
`as_select_wheel`	`item_brand` `item_name` `item_model` `item_finish` `item_color` `item_accent` `item_diameter` `item_style_id` `item_id`	To know what wheels are popular. `item_brand`: String. Brand name of selected brand. `item_name`: String. Large description for the product. `item_model`: String. Model name of selected product. `item_finish`: String. Finish name of selected product. `item_color`: String. Color name of selected product. `item_accent`: String. Accent of selected product. `item_diameter`: Int. Diameter of selected product. `item_style_id`: Int. Product’s style ID. `item_id`: Int. Product’s ID.	BUILDER PAGE Select a wheel, if card has a border then is selected (Only manual selections are tracked)
`as_show_wheel_view`		This event is to track the interest to see better the products. This is for internal use, we can know whick view is more popular and do improvements on the UI and UX	BUILDER PAGE Hit on ‘Wheels’ button on the gray navegation bar. Will be switched to wheel view.
`as_select_filter`	`filter_name` `filter_value`	To know preferred products visual filters and sizes. `filter_name`: String. Filter name. `filter_value`: String. Value to filter products.	BUILDER PAGE Filter products list by color, size, brand, etc…
`as_request_for_quote`	vehicle_id vehicle_make vehicle_model vehicle_submodel vehicle_year vehicle_body vehicle_drw vehicle_name location_id location_name location_country location_state location_city location_address location_zip location_phone type url data requestType products services	With this you can collect the data from the request for quotes and see popular stores, locations, products and vehicles. `vehicle_id`: Int. Vehicle selected ID `vehicle_make` : String. Make name of selected vehicle. `vehicle_model`: String. Model name of selected vehicle `vehicle_submodel`: String. Submodel name of selected vehicle `vehicle_year`: Int. Year of the selected vehicle. `vehicle_body`: String. Body type of selected vehicle. `vehicle_drw`: Boolean. If the vehicle is dually or not. `vehicle_name`: String. Large description for the vehicle. Year, Make, Model and Body type. `location_id`: Int. Id of the location on our administration portal. `location_name`: String. Location’s name configured on our administration portal. `location_country`: String. Location’s country name. `location_state`: String. Location’s state name. `location_city`: String. Location’s city name. `location_address`: String. Location’s address. `location_zip`: String. Location’s zip code or postal code. `type`: String. RFQ type: ‘Webform’ or ‘API’ `url`: String. Url used to send the RFQ `data`:Object \| String. Is the data sent to the request `requestType`: String. POST or GET `products`: Object. It will include a JSON with the product Id and the quantity `services`: Object. It will include a JSON with the service Id, product Id and the quantity	BUILDER PAGE (WHEEL VIEW) Sent a request for quote after fill all the information required.
`as_start_request_for_quote`		This event is for internal uses. We use it to track UI and UX	BUILDER PAGE (WHEEL VIEW) Hit ‘Request for Quote’ button.
`as_request_location`	`location_query`	This works to know which location users are looking for. `location_query`: String. Words used by the user to search locations.	BUILDER PAGE (WHEEL VIEW)
`as_show_wheel_details` `as_show_tire_details`	`item_id` `item_name`	This event is to track the interest to know more about products. `item_name`: String. Large description for the product. `item_id`: Int. Product’s ID.	BUILDER PAGE (WHEEL VIEW) On wheel view hit on ‘Specifications’ button to see all the wheel information.
`as_share`	`item_brand` `item_name` `item_finish` `tem_color` `item_accent` `item_diameter` `item_style_id` `item_id` `vehicle_id` `vehicle_make` `vehicle_model` `vehicle_submodel` `vehicle_year` `vehicle_type` `vehicle_body` `vehicle_drw` `vehicle_name`	This helps to know wich vehicle and products configurations are getting shared. `item_brand`: String. Brand name of selected brand. `item_name`: String. Large description for the product. `item_finish`: String. Finish name of selected product. `item_color`: String. Color name of selected product. `item_accent`: String. Accent of selected product. `item_diameter`: Int. Diameter of selected product. `item_style_id`: Int. Product’s style ID. `item_id`: Int. Product’s ID. `vehicle_id`: Int. Vehicle selected ID `vehicle_make` : String. Make name of selected vehicle. `vehicle_model`: String. Model name of selected vehicle `vehicle_submodel`: String. Submodel name of selected vehicle `vehicle_year`: Int. Year of the selected vehicle. `vehicle_body`: String. Body type of selected vehicle. `vehicle_drw`: Boolean. If the vehicle is dually or not. `vehicle_name`: String. Large description for the vehicle. Year, Make, Model and Body type.	BUILDER PAGE Hit on some of the ‘Share’ buttons.

AutoSync Visualizer

1. How to embed a visualizer

Required Parameters

id (String)

key (String)

Optional Parameters

adaptiveHeight (Boolean)

customStyleSheet (String | null)

disableQuoteForm (Boolean)

homeStyle (String | null)

onEvent (Function | null)