Demo Widget Configuration

Widget Name

Customize Size

Configure the display dimensions for your widget.

Widget Width

Empty width means 100%. Examples: 600px, 100%, 50em

Widget Height

Empty height means autoresize. Examples: 400px, auto

Geographic Market Filtering

Target your audience by selecting the regions where they are located (e.g., select 'USDM' for the United States region). The widget will then display vehicles sold in those regions. Leave blank to include all available regions.

Choose Regions

Include or Exclude Brands

Use the tabs to control which brands appear in the widget. "Include Brands" shows only the brands you pick. "Exclude Brands" hides the brands you pick from the results.

No brand filtering

All brands will be shown in the widget

Search History Settings

Search History Configuration (4 options)

Configure how search history behaves for users of this widget. Search history allows users to save and quickly re-execute their recent vehicle searches.

Enable Search History

Show Timestamps

Maximum Stored Searches

Default Display Items

How Search History Works

Search history is stored locally in the user's browser using localStorage
Users can click on any previous search to instantly re-execute it
Search data is automatically cleaned and deduplicated
No personal data is sent to servers - everything stays in the user's browser
History gracefully degrades if localStorage is not available

Theme & Styling

Theme & Visual Customization (11 options)

Customize the visual appearance of your widget to match your website design.

Theme Name

Name for this theme configuration

Predefined Theme

Select a predefined theme as a starting point

Color Settings

Primary Color

Primary brand color (buttons, links, highlights). Use in templates: text-primary-color, bg-primary-color, border-primary-color

Secondary Color

Secondary color (borders, dividers, subtle elements). Use in templates: text-secondary-color, bg-secondary-color, border-secondary-color

Accent Color

Accent color (success states, calls-to-action). Use in templates: text-accent-color, bg-accent-color, border-accent-color

Background Color

Background color for the widget. Use in templates: text-background-color, bg-background-color, border-background-color

Text Color

Primary text color. Use in templates: text-main-color, bg-main-color, border-main-color

Typography Settings

Font Family

Font family for text elements

Base Font Size

Base font size for the widget

Visual Effects

Border Radius

Border radius for form elements and containers

Shadow Intensity

Shadow intensity for elevated elements

Live Preview

Your theme changes are reflected in real-time in the preview section below. Adjust colors, fonts, and visual effects to see how they look on your widget.

How it works:

Select a predefined theme to automatically fill in all color and styling options
Manually adjust individual colors, fonts, and effects for custom styling
Click "Update Configuration" to save your theme changes
The preview will reload automatically to show your changes

User Search Path

Select the order of dropdowns users will see when searching for a vehicle.

API Flow Type

Custom Translations

Customize widget text in JSON format. Defaults will be used for missing keys.

Translations (JSON)

JSON object with translation keys. Leave empty to use defaults.

Template Configuration

Customize your widget template and preview changes in real-time.

Customize how search results are displayed. Template is pre-populated with the default design.
Use TailwindCSS v4 classes.

Placeholders | Colors

Template Gallery (6 templates)

Click on any template below to apply it to your configuration

Custom Output Template

⚠️ Links Disabled (Free Widget)

Links in templates are only available for paid subscriptions. Upgrade to use <a> tags in your custom templates.

<div class="space-y-4">
  <h3 class="text-lg font-semibold mb-2 text-main-color">
    {{ make.name }} {{ model.name }} ({{ start_year }}-{{ end_year }})
  </h3>
  {% for wheel in wheels %}
    <div class="p-3 rounded-md border {% if wheel.is_stock %}border-primary-color bg-primary-color/10{% else %}border-secondary-color{% endif %}">
      <div class="font-medium uppercase tracking-wide text-sm mb-1 {% if wheel.is_stock %}text-primary-color{% else %}text-secondary-color{% endif %}">
        {% if wheel.is_stock %}Original Equipment{% else %}Optional{% endif %}
      </div>
      {% if wheel.showing_fp_only %}
        <div class="text-sm">
          <span class="text-secondary-color">Front & Rear:</span>
          <span class="text-main-color">{{ wheel.front.tire }} – {{ wheel.front.rim }}</span>
        </div>
      {% else %}
        <div class="grid grid-cols-2 gap-2 text-sm">
          <div>
            <span class="text-secondary-color">Front:</span>
            <span class="text-main-color">{{ wheel.front.tire }} – {{ wheel.front.rim }}</span>
          </div>
          <div>
            <span class="text-secondary-color">Rear:</span>
            <span class="text-main-color">{{ wheel.rear.tire }} – {{ wheel.rear.rim }}</span>
          </div>
        </div>
      {% endif %}
    </div>
  {% endfor %}
</div>

HTML template with placeholders. Supports TailwindCSS classes and loops. Pre-populated with default template - modify as needed.

Available Theme Colors

Primary Brand Color

Primary brand color (buttons, links, highlights)

text-primary-color - Primary text color

bg-primary-color - Primary background

border-primary-color - Primary border

hover:bg-primary-color - Primary hover background

Opacity variants:

bg-primary-color/5 - 5% opacity

bg-primary-color/10 - 10% opacity

bg-primary-color/20 - 20% opacity

bg-primary-color/50 - 50% opacity

Secondary Color

Secondary color (borders, dividers, subtle elements)

text-secondary-color - Secondary text color

bg-secondary-color - Secondary background

border-secondary-color - Secondary border

hover:bg-secondary-color - Secondary hover background

Opacity variants:

bg-secondary-color/5 - 5% opacity

bg-secondary-color/10 - 10% opacity

bg-secondary-color/20 - 20% opacity

bg-secondary-color/50 - 50% opacity

Accent Color

Accent color (success states, calls-to-action)

text-accent-color - Accent text color

bg-accent-color - Accent background

border-accent-color - Accent border

hover:bg-accent-color - Accent hover background

Opacity variants:

bg-accent-color/5 - 5% opacity

bg-accent-color/10 - 10% opacity

bg-accent-color/20 - 20% opacity

bg-accent-color/50 - 50% opacity

Background Color

Background color for the widget

text-background-color - Background as text color

bg-background-color - Background color

border-background-color - Background as border color

hover:bg-background-color - Background hover

Text Color

Primary text color

text-main-color - Main text color

bg-main-color - Main color as background

border-main-color - Main color as border

hover:text-main-color - Main text hover

Usage Examples

class="bg-primary-color/10 text-primary-color" - Light primary background with primary text

class="border-secondary-color bg-secondary-color/20" - Secondary border with light background

class="bg-accent-color text-background-color" - Accent background with contrasting text

class="hover:bg-primary-color/10 transition-colors" - Hover effect with smooth transition

Use these classes in your template

Visual Link Builder Paid Widget Only

Generate dynamic shopping links with wheel fitment data. These links automatically populate with search results and can be used in two ways:
1) In your Custom Output Templates for displaying clickable links
2) In the Immediate Redirect feature to automatically send users to your catalog after vehicle selection

🔒 Upgrade Required to Configure Link Builder

Premium Feature - Upgrade Required

The Visual Link Builder is a premium feature that allows you to:

Generate dynamic shopping links with wheel fitment data
Use custom URL templates with vehicle-specific parameters
Direct users to your catalog with pre-filled filters
Increase conversion with targeted product links

Upgrade to paid subscription to unlock this feature.

Immediate Redirect Paid Widget Only

Automatically redirect users to your catalog page after they complete vehicle selection. The URL will include all wheel fitment parameters.

Premium Feature

The Immediate Redirect feature is available only for paid widgets. Upgrade to:

Redirect users directly to your catalog after vehicle selection
Pass all wheel fitment parameters automatically
Provide a seamless shopping experience
Increase conversion rates

Upgrade to paid plan →

Widget Preview

Widget Preview appears only after widget creation in database. Please save your configuration to generate a preview.

Wheel-Size Services

Widget Configuration Settings Navigation

Customize Size

Geographic Market Filtering

Include or Exclude Brands

No brand filtering

Search History Settings

How Search History Works

Theme & Styling

Color Settings

Typography Settings

Visual Effects

Live Preview

User Search Path

Custom Translations

Template Configuration

Available Template Placeholders

Vehicle Information

Engine & Technical

Wheels Loop

Front Wheel Data

Rear Wheel Data

Syntax Examples

Loop Counter Variables

Template Filters

Conditional Logic

Available Theme Colors

Primary Brand Color

Secondary Color

Accent Color

Background Color

Text Color

Usage Examples

Visual Link Builder Paid Widget Only

Premium Feature - Upgrade Required

Immediate Redirect Paid Widget Only

Premium Feature

Widget Preview

Widget Preview