Customization

Customize the embedded components using HTML attributes. All attribute names use kebab-case (e.g., dealer-id, primary-color).

Common Attributes

These attributes are available on all components:

Theming

Analytics

wheelbase-store

The complete rental store with hero section, filters, and listings.

Attributes

Filter Options

Top-level filters (visible-filters):

• type - Vehicle type filter
• price - Price range filter (Auto only)
• filters - Opens the filters modal

Nested filters for RV (visible-nested-filters):

• guests - Number of guests
• rules - Rules & policies
• amenities - Amenities

Nested filters for Auto (visible-nested-filters):

• price - Price range
• guests - Number of guests
• vehicle_type - Vehicle type
• make_model - Make and model
• year - Year range
• transmission - Transmission type
• fuel - Fuel type
• drivers_age - Driver’s age

Examples

Basic usage:

<wheelbase-store dealer-id="YOUR_DEALER_ID"></wheelbase-store>

With customization:

<wheelbase-store
  dealer-id="YOUR_DEALER_ID"
  locale="fr-ca"
  store-type="rv"
  hide-hero
  primary-color="#2563EB"
  secondary-color="#3B82F6"
  text-color="#111827"
  surface-color="#F9FAFB"
></wheelbase-store>

With specific filters:

<wheelbase-store
  dealer-id="YOUR_DEALER_ID"
  visible-filters="type,filters"
  visible-nested-filters="guests,amenities"
></wheelbase-store>

wheelbase-rentals-list

Just the rental grid without hero or filters. Useful for custom layouts.

Attributes

Examples

Basic usage:

<wheelbase-rentals-list dealer-id="YOUR_DEALER_ID"></wheelbase-rentals-list>

With click handler:

<wheelbase-rentals-list
  dealer-id="YOUR_DEALER_ID"
  id="rentals-list"
></wheelbase-rentals-list>
 
<script>
  // Define a named function on window (required for r2wc)
  window.handleRentalClick = function handleRentalClick(rentalId) {
    console.log('Rental clicked:', rentalId)
    // Navigate to details, open modal, etc.
  }
 
  // Set the handler on the element
  document.getElementById('rentals-list').onRentalClick = window.handleRentalClick
</script>

listing-details

Individual rental details with booking interface.

Attributes

Example

<listing-details
  dealer-id="YOUR_DEALER_ID"
  rental-id="143905"
></listing-details>

Supported Locales