Discover the ideal integration for your website with our concise integration guide.
External Storefront - Checkout Link (recommended!)
Wheelbase produces an external checkout link that displays your published inventory, allowing customers to check availability, filter for amenities, add-ons, and complete their reservation. This is the easiest integration option as it is ready to go once your account is activated.
While an outdated version of the external checkout link is still available, we will be deprecating it.
Example of external storefront - see full page - outdated version
Customization:
- Create a "book now" button on your website with this link + any query params to direct customers directly to a specific location/type of vehicle.
- Query Params include: locale, type, amenities, & location
- The header image & logo can be updated from your Wheelbase Dashboard
How to use an external storefront integration:
<a href="https://checkout.wheelbasepro.com/reserve?owner_id={{user_id}}">Book Now</a>
Embedded Storefront
This option is similar to the Checkout Link above, but you’re embedded it into an existing webpage.
This would keep customers on your website while they shop all of your vehicles and build a quote, then open the Wheelbase checkout flow once they create a reservation. We also host a Wordpress plugin.
Example of embedded storefront - see full page
Customization:
-
Button color: Specify the accent/button color just like the external storefront
Add data-color="000000" to your div element. -
View: Specify which view you start with. Add data-calendar="true" to your div element to start with the calendar.
-
Calendar: Disable the ability to access the monthly availability calendar. Add data-calendar="false" to disable the calendar portion of the storefront.
-
Location: Limit the results to a specific location. Add data-locations=location-id.
-
Price: Hide prices on the shop page. Add data-hide-prices="true" to disable the prices on the storefront page.
-
Location: Hide locations from being selectable. Add data-hide-locations="true" to disable location selector.
- Filters: Add any pre-set filters by appending a URL param that starts with wb-, for example wb-from=2017-01-01&wb-to=2017-01-10 will automatically filter by those dates
wb-from=YYYY-MM-DD -- filters by start date
wb-to=YYYY-MM-DD -- filters by end date
wb-type[]=a&wb-type[]=b -- Filters types a and b vehicles only
wb-location[]=1&wb-location[]=2 -- Filters by location, you’ll need to know the location ID for each location
How to install the embedded storefront
<script type="text/javascript">
var Outdoorsy = Outdoorsy || {};
Outdoorsy.color = "1b4a8f";
(function() {
var script = document.createElement("script");
script.src = "https://d3cuf6g1arkgx6.cloudfront.net/sdk/wheelbase.min.js";
script.async = true;
var entry = document.getElementsByTagName("script")[0];
entry.parentNode.insertBefore(script, entry);
})();
</script>
<div id="outdoorsy-book-now-container" data-owner="741" data-color="000000"></div>
How to use embedded storefront in WordPress
Alternatively, if you are using WordPress, there is a simplified plugin to help set things up. This is necessary because WordPress blocks scripts from loading inside posts sometimes.
- Install the plugin located at https://github.com/outdoorsy/wheelbase-wordpress-plugin
- Installation instructions included in the README.
- On any page where you want to embed the storefront, simply add the correct shortcode with your user id.
[wheelbase owner="{{user_id}}" color="000000"]
---
Embedded Individual Listing Pages
Here you're embedding just a listing page onto your website.
This would keep customers on your website while they review a specific vehicle and build a quote, then open the Wheelbase checkout flow once they create a reservation. We also host a Wordpress plugin.
Example of embedded listing page - see full page
How to install the embedded listing page
<script type="text/javascript">
var Outdoorsy = Outdoorsy || {};
Outdoorsy.color = "1b4a8f";
(function() {
var script = document.createElement("script");
script.src = "https://d3cuf6g1arkgx6.cloudfront.net/sdk/wheelbase.min.js";
script.async = true;
var entry = document.getElementsByTagName("script")[0];
entry.parentNode.insertBefore(script, entry);
})();
</script>
<div id="outdoorsy-book-now-container" data-rental="1916" data-color="000000"></div>How to use embedded Listing pages with Wordpress
- Install the plugin located at https://github.com/outdoorsy/wheelbase-wordpress-plugin
Installation instructions included in the README - On any page where you want to embed the storefront, simply add the correct shortcode
[wheelbase rental="{{rental_is}}" color="000000"]
Custom Widget integration - Advanced
The Wheelbase Integration Guide provides developers with tools and resources to integrate Wheelbase widgets into their websites. Whether you’re creating a fully customized search page or embedding pre-built components, this guide covers everything you need to get started.
Flexible Integration Options
Implement search pages, filters, calendars, and more using a lightweight JavaScript SDK. Customize widgets with CSS, templates, and advanced filtering for tailored experiences.
Custom Reservation and Checkout Workflows
Build personalized booking flows, manage add-ons, and display dynamic data like pricing, reviews, and availability—all while maintaining control over the user experience.
Learn More about Advanced Integrations