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

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>

Note: A leading ? is automatically stripped from spec values, so "?diameter=22" and "diameter=22" are equivalent. Both formats work.

Spec Format

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

Note: A leading ? is accepted but automatically stripped. Both "?diameter=22" and "diameter=22" work identically.

Example:

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

Mapped to spec values:

front-wheel: diameter=22, width=10, offset=25
rear-wheel:  diameter=22, width=12, offset=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 -->

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	Front wheel specifications
rear-wheel	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

<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

<!-- 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>

Partial Specification

You don't need to specify all keys. Partial specs are supported — omit any spec or key and the tool falls back to its defaults:

<button class="autoviz"
        data-tool="configurator"
        data-spec-front-wheel="diameter=22">
  Configure
</button>

How It Works

When an element with spec attributes is clicked:

1. Parsing: The SDK extracts all data-spec-* attributes
2. Resolution: Dynamic values (?paramName) are resolved from the current URL
3. Conversion: Specs are converted to JSON and passed as URL parameters to the tool
4. 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"}

Notes

• 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