Part Specification [beta]

Overview

Part Specification allows you to pass pre-selected product configuration data (like wheel sizing specs) to the AutoViz SDK. When a user launches a tool, these specifications are automatically applied, enabling pre-populated selections in the configurator, viewer, or other tools.

This feature is useful for:

Pre-selecting wheel sizes based on user selections on your site
Passing fitment data from your product pages
Syncing configurations across front/rear wheel positions
Dynamic spec resolution from URL parameters

Basic Usage

HTML

Use data-spec-{name} attributes where {name} is the spec identifier (e.g., front-wheel, rear-wheel, tire):

<button class="autoviz"
        data-tool="configurator"
        data-group="my-wheel-series"
        data-spec-front-wheel="?diameter=22&width=10&offset=25"
        data-spec-rear-wheel="?diameter=22&width=12&offset=30">
  Configure Wheels
</button>

React

Use the spec prop with a structured object:

import { AutoViz } from '@autoviz/sdk';

function WheelConfigurator() {
  return (
    <AutoViz
      tool="configurator"
      group="my-wheel-series"
      spec={{
        frontWheel: { diameter: 22, width: 10, offset: 25 },
        rearWheel: { diameter: 22, width: 12, offset: 30 }
      }}
    >
      <button>Configure Wheels</button>
    </AutoViz>
  );
}

Note: In React, use camelCase for spec names (frontWheel). They are automatically converted to kebab-case HTML attributes (data-spec-front-wheel).

Spec Format

Query String Format (HTML)

Specs are passed as query string format values:

?key1=value1&key2=value2&key3=value3

Format	Description	Example
`?key=value`	Static value	`?diameter=22`
`?key`	Dynamic value from URL param	`?diameter` (resolves from `?diameter=...` in URL)
Mixed	Combine static and dynamic	`?diameter&width=10`

Object Format (React)

interface SpecValues {
  [key: string]: string | number | undefined;
}

interface Spec {
  [specName: string]: SpecValues | undefined;
}

Example:

spec={{
  frontWheel: {
    diameter: 22,        // number
    width: '10',         // string
    offset: 25
  },
  rearWheel: {
    diameter: 22,
    width: 12,
    offset: 30
  },
  tire: {
    size: '305',
    profile: '30'
  }
}}

Dynamic Value Resolution

Spec values can be resolved dynamically from the current page URL.

From URL Query Parameters

Use ?paramName syntax to resolve values from URL query parameters:

<!-- Page URL: https://example.com/wheels?front_diameter=22&front_width=10&rear_diameter=24 -->

<button class="autoviz"
        data-tool="configurator"
        data-spec-front-wheel="?diameter=?front_diameter&width=?front_width"
        data-spec-rear-wheel="?diameter=?rear_diameter&width=12">
  Configure
</button>

Or use shorthand when the param name matches the spec key:

<!-- Page URL: https://example.com/wheels?diameter=22&width=10 -->

<button class="autoviz"
        data-tool="configurator"
        data-spec-front-wheel="?diameter&width">
  Configure
</button>
<!-- Resolves to: diameter=22, width=10 from URL params -->

React Dynamic Values

<AutoViz
  tool="configurator"
  spec={{
    frontWheel: {
      diameter: '?diameter',  // Resolves from URL param ?diameter=...
      width: '?width',        // Resolves from URL param ?width=...
      offset: 25              // Static value
    }
  }}
>
  <button>Configure</button>
</AutoViz>

Mixed Static and Dynamic

You can combine static values with dynamic resolution:

<button class="autoviz"
        data-tool="configurator"
        data-spec-front-wheel="?diameter&width=10&offset=25">
  Configure
</button>
<!-- diameter resolved from URL, width and offset are static -->

Spec Names

Spec names are flexible and not predefined. Common patterns include:

Spec Name	Use Case
`front-wheel` / `frontWheel`	Front wheel specifications
`rear-wheel` / `rearWheel`	Rear wheel specifications
`tire`	Tire specifications
`suspension`	Suspension settings

You can use any spec name that makes sense for your integration.

Common Spec Keys

While spec keys are flexible, common wheel-related keys include:

Key	Description	Example Values
`diameter`	Wheel diameter in inches	`20`, `22`, `24`
`width`	Wheel width in inches	`9`, `10`, `12`
`offset`	Wheel offset in mm	`25`, `30`, `35`
`lip`	Lip size	`3`, `4`, `5`
`bolt-pattern`	Bolt pattern	`5x120`, `6x139.7`

Complete Examples

Staggered Wheel Setup (HTML)

<button class="autoviz"
        data-tool="configurator"
        data-group="velocity-apex"
        data-select-field="finish_name"
        data-select-current="gloss-black"
        data-spec-front-wheel="?diameter=22&width=9&offset=25"
        data-spec-rear-wheel="?diameter=22&width=10.5&offset=30">
  Configure Staggered Setup
</button>

Dynamic Specs from Product Page (HTML)

<!-- Product page URL: /wheels/apex?front_d=22&front_w=9&rear_d=22&rear_w=10 -->

<button class="autoviz"
        data-tool="configurator"
        data-group="velocity-apex"
        data-spec-front-wheel="?diameter=?front_d&width=?front_w"
        data-spec-rear-wheel="?diameter=?rear_d&width=?rear_w">
  Configure with Selected Sizes
</button>

React with State

import { AutoViz } from '@autoviz/sdk';
import { useState } from 'react';

function WheelConfigurator() {
  const [specs, setSpecs] = useState({
    frontWheel: { diameter: 22, width: 9, offset: 25 },
    rearWheel: { diameter: 22, width: 10, offset: 30 }
  });

  return (
    <AutoViz
      tool="configurator"
      group="velocity-apex"
      selectField="finish_name"
      selectCurrent="gloss-black"
      spec={specs}
    >
      <button>Configure Wheels</button>
    </AutoViz>
  );
}

Partial Specification

You don't need to specify all keys. Partial specs are supported:

<AutoViz
  tool="configurator"
  spec={{
    frontWheel: { diameter: 22 }  // Only diameter specified
  }}
>
  <button>Configure</button>
</AutoViz>

How It Works

When an element with spec attributes is clicked:

Parsing: The SDK extracts all data-spec-* attributes
Resolution: Dynamic values (?paramName) are resolved from the current URL
Conversion: Specs are converted to JSON and passed as URL parameters to the tool
Application: The tool applies the specs to pre-populate selections

URL Parameter Format

Specs are passed to tools as JSON-encoded URL parameters:

spec_front_wheel={"diameter":"22","width":"10","offset":"25"}
spec_rear_wheel={"diameter":"22","width":"12","offset":"30"}

TypeScript Types

// Individual spec values
type SpecValues = {
  [key: string]: string | number | undefined;
};

// Complete spec configuration
type Spec = {
  [specName: string]: SpecValues | undefined;
};

// AutoViz component props
interface AutoVizProps {
  // ... other props
  spec?: Spec;
}

Notes

Spec names in React use camelCase (frontWheel) and are converted to kebab-case in HTML (data-spec-front-wheel)
Both string and number values are accepted and converted to strings when passed to tools
Empty or undefined values are omitted from the final spec
Specs work with all tools: viewer, configurator, sims, arto, catalog

Overview​

Basic Usage​

HTML​

React​

Spec Format​

Query String Format (HTML)​

Object Format (React)​

Dynamic Value Resolution​

From URL Query Parameters​

React Dynamic Values​

Mixed Static and Dynamic​

Spec Names​

Common Spec Keys​

Complete Examples​

Staggered Wheel Setup (HTML)​

Dynamic Specs from Product Page (HTML)​

React with State​

Partial Specification​

How It Works​

URL Parameter Format​

TypeScript Types​

Notes​