How to use


  • To integrate the store iframe on your website, you must first get access to the website back office.

  • Once you have access to your back office, drop the following code onto the site to embed the storefront into the site. Website builders have an option to enter a "code" or "html" block to the page. Once selected, copy and paste the code below into the page/box.
    See below for how to use with a Wordpress site.

  • Attention: You will have to paste your user ID instead of XXX for the snippet data-owner-id="XXX" . How to get your user ID? From your Wheelbase dashboard, go to Account Settings, scroll down to the link "View Checkout Example" as shown in the picture below:

    You will get redirected to a page called https://checkout.wheelbasepro.com/. In the URL of this page, you will find your user ID which is displayed as owner_id=XXXXX. In the example below the URL shows https://checkout.wheelbasepro.com/reserve?owner_id=607793, which means the user ID in this example is 607793:

    How to view and reply to reviews?
<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="XXXX" data-newfilters="true" data-calendar=false data-color="000000"></div>

How to use with Wordpress


Alternatively, if you have a wordpress site, there is a simplified plugin to help get things setup. This is a very lightweight plugin that allows wordpress users to embed the wheelbase checkout app into their site.This is necessary cause wordpress blocks scripts from loading inside posts sometimes.

Wheelbase Wordpress Shortcode Installation

Zip up the wheelbase-shortcode.zip file and upload it to the plugins directory in Wordpress. Alternatively, you can upload it through the plugins interface in your

Wordpress dashboard.

Add to your webpage

On any page where you want to embed the storefront, simply add the correct shortcode

[wheelbase owner=XXXX newfilters=“true” color=000000]

How should it looks like once integrated? See an example below:

Embedded store Customization

You are able to customise the iframe by the following features:

  • You can specify the accent/button color with any valid hex-color. That’ll convert the accent/button colors to that color

    • Change the "000000" behind data-color= to any valid hex-color

  • 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

  • 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=2022-01-01&wb-to=2022-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

Filter vehicle types:

wb-type[]=a - Filters type Class A vehicles
wb-type[]=b - Filters type Class B vehicles
wb-type[]=c - Filters type Class C vehicles
wb-type[]=camper-van - Filters type Camper Van
wb-type[]=truck-camper - Filters type Truck Camper
wb-type[]=trailer - Filters type Trailer/ Travel Trailer
wb-type[]=fifth-wheel - Filters type Fifth-Wheel Trailer
wb-type[]=toy-hauler - Filters type Toy Hauler Trailer
wb-type[]=folding-trailer - Filters type Folding Trailer
wb-type[]=other - Filters Vehicles types Other

How to add Customizations?

  • Simply add the additional filter code to your div element in your iframe code

  • The standard div element looks like this:

    <div id="outdoorsy-book-now-container" data-owner="XXXX" data-newfilters="true" data-calendar=false data-color="000000"></div> 
  • The div element with a location filter looks like this:

    <div id="outdoorsy-book-now-container" data-owner="XXXX" data-newfilters="true" data-calendar=false data-color="000000" data-locations=location-id></div> 
Did this answer your question?