INSTASearch Interface

Our INSTASearch library is a collection of JS widgets and embedded tools that allows you to create your own custom search experience. You have full control over the styling, placement and functionality of the entire interface.

Demos & Examples

We've created a few easy-to-follow examples to get you started.

Search Interface

A basic search interface including nearby results and locations

Landing Page

Display rental options in a specific area or nearby your users

Coming Soon

Account Search

An example search interface for a specific account, great for Pros

Coming Soon

In the Wild

Many companies leverage the INSTASearch library for creating engaging search interfaces, here's just a few we're proud to call out.

  • Lazydays - Lazydays has created a great search interface with custom styling and advanced photo management. Check it out here
  • AdventureKT - We love the work AdventureKT did on their search interface to customize the feel of their sidebar. Check it out here

Getting Started

Getting started with the INSTASearch library is easy. Check out the steps below for a quick overview, then dive into our documentation for a full overview of each component option.

1. Get your Partner ID

Leveraging the INSTASearch library requires a partner ID. If you don't yet have one, reach out to us at partners@outdoorsy.com and we'll get you setup.

2. Add the library to your site

First you'll need to include the library. We recommend you place the CSS in the head of your file, and the js script tag just above the closing body tag.

<html>
  <head>
    <link rel="stylesheet" href="https://d1o5877uy6tsnd.cloudfront.net/sdk/v2/trailblazer-widget.css">
  </head>
  <body>
    <script type="text/javascript" src="https://d1o5877uy6tsnd.cloudfront.net/sdk/v2/trailblazer-widget.js"></script>
  </body>
</html>
3. Initialize your library and inject the components onto the page
var trailblazer = Trailblazer({
    partnerId: {{yourID}},
    urlParams: true,
    currency: 'USD', //optional, controls pricing currency you get back
    locale: 'en-us', // optional, controls which checkout flow users are directed to for translations
    filtersChangedCallback: function(currentFilters) {
        // optional callback, if you provide one it allows
        // you to listen externally for filter changes
        // useful when creating your own custom components
    }
});
4. Add a search results component to your page

The search results component is the most import part of the widget library. This is where we'll render search results onto the page. Remember, you can add custom styling to results to display any way you'd like. To learn more, check out our widget documentation.

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <!-- Sidebar -->
        </div>
        <div class="col-sm-8">
            <div id="rental-results"></div>
        </div>
    </div>
</div>

<script>
  trailblazer.addWidget(trailblazer.widgets.RentalList, "rental-results");
</script>
5. Add in a datepicker and location search component
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key={{TOKEN}}"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <!-- Sidebar -->
            <div id="date-container"></div>
        </div>
        <div class="col-sm-8">
            <div id="rental-results"></div>
        </div>
    </div>
</div>

<script>
  trailblazer.addWidget(trailblazer.widgets.RentalList, "rental-results");
  trailblazer.addWidget(trailblazer.widgets.LocationSearch, "location-search");
  trailblazer.addWidget(trailblazer.widgets.DatePicker, "date-container");
</script>
6. Start the widget library

Just one more step, call start() on the widget library

trailblazer.start()

Need some help?

No problem, reach out to us at partners@outdoorsy.co and we'd be happy to help out any way we can.