Wheelbase Integrations

There are several levels of integration dealers can choose from for getting Wheelbase on their sites.

The external store is a site dealers can create a link for on their existing sites. It allows renters to check availability, select the rental they want, select addons and complete their reservation. This is the easiest integration for a dealer, but isn’t very customized.

Example

Customization

  • You can add a color=000000 param to the URL with any valid hex-color. That’ll convert the accent/button colors to that color
  • Header image can be changed in the dashboard
  • Logo can be changed in the dashboard

How to Use

To use the external store, customers can create a link anywhere on their site:

Basic URL

https://checkout.wheelbasepro.com/reserve?owner_id={{their_outdoorsy_id}}

 <a href="https://checkout.wheelbasepro.com/reserve?owner_id={{their_outdoorsy_id}}">Book Now</a>

Embedded Store

The embedded Store gives dealers the option of embedding the external store inside their existing sites. This is the second easiest integration method. The result is the same as the external store, but without the header/logo information.

Example

Customization

  • You can specify the accent/button color just like the external store
    • Add data-color="000000" to your div element
  • You can specify which view you start with
    • Add data-calendar="true" to your div element to start with the calendar
  • You can disable the ability to access the monthly availability calendar
    • Add data-calendar="false" to disable the calendar portion of the store
  • You can limit the results to a specific location
    • Add data-locations=location-id
  • You can hide prices on the shop page
    • Add data-hide-prices="true" to disable the prices on the store page
  • You can hide locations from being selectable
    • Add data-hide-locations="true" to disable location selector
  • You can 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
    • wb-sleeps=2 - Filters by how many people the vehicle will sleep

How To Use

Drop the following code onto the site to embed the storefront into the site

<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 with Wordpress

Alternatively, if the customer has a wordpress site, there is a simplified plugin to help get things setup. This is necessary cause wordpress blocks scripts from loading inside posts sometimes.

  1. Install the plugin located at https://github.com/outdoorsy/wheelbase-wordpress-plugin
    1. Installation instructions included in the README
  2. On any page where you want to embed the storefront, simply add the correct shortcode
[wheelbase owner="741" color="000000"]

Embedded Individual Vehicle Page

Some dealers have created their own shopping experience and just want to be able to embed our checkout on a per-vehicle basis. The process here is almost identical to the embedded store, just with a few differences.

Example

Customization

  • You can specify the accent/button color just like the external store

How To Use

Drop the following code onto the site to embed the checkout into the site


<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 with Wordpress

Alternatively, if the customer has a wordpress site, there is a simplified plugin to help get things setup. This is necessary cause wordpress blocks scripts from loading inside posts sometimes.

[wheelbase rental="1916" color="000000"]