Docs

Script integration Manual integration Required URL parameters Widget size Popular query parameters Other query parameters iOS/Android integration Email integration Support Changelog

Widescale integration guide

With just a location and a starting date, you can instantly generate multiple Stay22 maps on the fly. Below you will find all the information needed to help get you started.

Quick-start integration guide using <script>

Simply copy paste the below script anywhere in your body tag where you want the map to be shown, and fill out the 3 required steps (widget size, location and dates) in the code.

<!-- Paste this script where you want the map to be shown -->
<script id="stay22-script">
  document.addEventListener("DOMContentLoaded", function(e) {
    // 1. Edit widget size
    var settings22 = {
      width: '100%', // set the width in px or %
      height: '460px' // set the height in px or %
    };

    // 2. Fill out your config here and the rest should work
    var s22obj = {
      aid: 'affiliateid', // your affiliate id for tracking
      address: 'Madison Square Park, New York' , // Lat/Lng or full street address. For latlng use the "lat":,"lng": keys instead
      checkin: '2020-08-22', // checkin date for their stay in MM/DD/YYYY or ISO 8601 format
      maincolor: '00549E' // your main brand color in hex (without the #)
    };

    // Leave this part intact
    var params22=''; for (var key in s22obj){if (params22){params22 +='&';}params22 +=key + '=' + encodeURIComponent(s22obj[key]);}var div22=document.getElementById('stay22-script'); div22.insertAdjacentHTML('afterend', '<iframe id="stay22-widget" width="' + settings22.width + '" height="' + settings22.height + '" src="' + 'https://www.stay22.com/embed/gm?' + params22 + '" frameborder="0"></iframe>');
  });
</script>

This script is all you need to generate a map. If you want to have a bit more flexibility, you can manually integrate your maps by reading the points below.

Manual integration guide using <iframe>

Everything is built upon a single URL that you will need to along the way. Here's an example of how the code could look:

<iframe id="stay22-widget" width="100%" height="460" frameborder="0" src="https://www.stay22.com/embed/gm?lat=40.742612&lng=-73.987777&venue=Optional%20Text"></iframe>

The code above will generate this map:

Required URL parameters

In order for a map to be fully generated, it will require a few parameters from your part to fill out. Head over to our advanced section to know how you can customize your widget even further.

1) Affiliate ID

‍Your affiliate ID assigned to you to track $$$, clicks and loads. You can segment the stats by appending a dash followed by your campaign name. Unlimited characters in length. Please avoid characters that can disrupt an URL such as & . ' " # % > < / _ (we use underscore/low dashes for our own internal tracking. Feel free to use normal dashes).

aid


aid=affiliateid-campaignid

2) Location

Provide lat/lng coordinates AND/OR address in text format. If you have access to lat/lng coordinates of the location, this is the recommended way to integrate as it will always be more precise.

‍lat && lng


lat=40.7505045&lng=-73.9934387

‍For the address method, try to feed as much info as possible (venue, street address, city, country), as it is fuzzy searching Google's database. You can also feed it a venue name + city and it will also work.

‍address


address=Madison%20Square%20Garden%204%20Pennsylvania%20Plaza,%20New%20York,%20NY%2010001

Pro-tip: If you provide both the lat/lng coordinates and the address at the same time, the map will automatically load the most accurate location.

3) Dates

Provide check-in date OR the event start date. This is needed so the map can poll live availabilities and accurate rates. If omitted, it will poll availabilities 18 months from now, for 1 night, to show as much properties as possible.
‍
‍You can send in any ISO 8601 format like YYYY-MM-DD or in MM/DD/YYYY. If checkout is empty, it will default to checkin + 1 day.

‍checkin && checkout


checkin=04/22/2020&checkout=04/24/2020

If you prefer, we can smartly detect the best time to check in. Provide the data in unix timestamp (seconds) when the event starts. If eventend is not provided, we will select the next day for the check-out from the check-in. Please make sure that the unix timestamp is based on the event's or the location's timezone and not based on the user's timezone.

‍eventstart && eventend


eventstart=1587578400&eventend=1587751200

All together, the complete URL would look like this:


https://www.stay22.com/embed/gm?aid=affiliateid-campaignid&lat=40.7505045&lng=-73.9934387&checkin=04/22/2020&checkout=04/24/2020

Widget size

You are free to change the size of the map to whatever you want using the width and height attributes or CSS properties of the <iframe>.

Popular query parameters (type - "default value")

Once you have set up your required parameters, use the below list to further customize your widget:

• maincolor (hex string - "#2D87FC") - The main color of the widget (without the #).

• navimage (string) - If set, provide an absolute full URL to change the main logo in the navbar (button on the far left) image.

• markerimage (string) - If set, provide an absolute full URL to change the marker (main map pin) image.

• venue (string) - If set, this will change the map title on the searchbar.

• disableautohover (boolean - false) - Set to true if you want to disable a recommended listing to be automatically hovered/popped-up on load.

Other query parameters

• adults (number - 1) - Number of adults. Max to 30.

• buttoncolor (hex string) - The top menu button color in hex (without the #).

• buttoncoloractive (hex string) - The top menu button active color in hex (without the #).

• buttoncolorhover (hex string) - The top menu button hover color in hex (without the #).

• children (number - 0) - Number of children. Max to 10.

• chpincolor (hex string - "2ccccc") - If you have custom hotels, in hex (without the #).

• chpinfontcolor (hex string - "ffffff") - If you have custom hotels, the font color in hex (without the #).

• currency (string - "USD") - We automatically detect the user's currency, but if you wish to force it, we support all currencies. Write in 3 letter format: for e.g: "JPY".

• customfontlink and customfont - You cannot only have one, must have both.

• customfontlink (string - "") - The full URL for the google font link

• customfont (string - "Helvetica Neue") - The custom font name

• disabledirections (boolean - false) - If set to true, this will hide the polyline generated on hover of a listing.

• disablediscounts (boolean - false) - Disable the whitelabel special discounts rates.

• disablehotels (boolean - false) - Disable Stay22's current hotel provider (HotelsCombined).

• disablerentals (boolean - false) - Disable Stay22's current rental provider (Airbnb).

• dotlistings (boolean - false) - Compact the price pins into dots for more mapping space.

• featuredhcids (string - "") - Comma seperated list of HotelsCombined IDs to stand out from other hotels.

• featuredhpids (string - "") - Comma seperated list of HotelPlanner IDs to stand out from other hotels.

• feedbackemail (string - "hello@stay22.com") - Useful if you want to gather feedback to yourself from your users. It's located in the share button (bottom right).

• fitmaptopoi (boolean - false) - If you happen to have POIs, you can make sure they all show on initial map load.

• fontcolor (hex string - auto) - The navbar's font color in hex (without the #).

• freezeviewport (boolean - false) - If you want to disable automatic zoom out/in when map is loaded.

• hideadults (boolean - false) - If set to true, the adults field will be hidden.

• hidecheckinout (boolean - false) - If set to true, the check-in and check-out inputs will be hidden.

• hidechildren (boolean - false) - If set to true, the children field will be hidden.

• hidecurrency (boolean - false) - If set to true, this will hide the currency selection.

• hideenlargemap (boolean - false) - If set to true, this will hide the enlarge map buttons.

• hidefilters (boolean - false) - If set to true, this will hide the filter button.

• hidefooter (boolean - false) - If set to true, the footer will be hidden.

• hideguestpicker (boolean - false) - If set to true, the guest picker will be hidden.

• hideguestrating (boolean - false) - If set to true, the guest rating filter will be hidden.

• hidelanguage (boolean - false) - If set to true, this will hide the language selection.

• hidemainmarkercover (boolean - false) - If set to true, it will hide the background color behind the main marker and remove the default marker shape.

• hidemapcopy (boolean - false) - If set to true, this will hide the clipboard button on the map (bottom right)

• hidemappanels (boolean - false) - If set to true, this will hide map panels (e.g: zoom control, etc.).

• hideppn (boolean - false) - If set to true, the price information (price per night or total) in the footer will be hidden.

• hidepricefilter (boolean - false) - If set to true, the budget slider will be hidden.

• hidepriceper (boolean - false) - If set to true, this will hide the price per (night/total) toggle in the dropdown filter menu.

• hiderooms (boolean - false) - If set to true, the rooms field will be hidden.

• hideroomtypefilter (boolean - false) - Hide Stay22's room type filter section from the dropdown fitler menu.

• hidesettings (boolean - false) - If set to true, this will hide the setting button (currency and language).

• hideshare (boolean - false) - If set to true, this will hide the share button.

• hidestarrating (boolean - false) - If set to true, the star filter will be hidden.

• hotelscolor (hex string - "125cc5") - Hotels pin color, in hex (without the #).

• hotelsfontcolor (hex string - "ffffff") - Hotels pin font color, in hex (without the #).

• isinstantbook (boolean - false) - To show only listings that are instant bookable (for Airbnb).

• ljs (string) - We automatically detect the user's language, but if you wish to force it, we support these languages: ("en", "fr", "es", "de", "pt", "it", "nl", "pl"). Let us know what should we add next!

• loadingbarcolor (hex string) - The loading bar color in hex (without the #).

• mapstyle (string - "default") - Choose a theme for the map. Choices are: "default" and "light" for now. Email us if you want something more. Update: Light tiles are down for maintenance for an undetermined period (fallsback automatically to default).

• max (number - 1000) - Maximum nightly price range in USD. If set to 1000 or more, it'll assume it's 1000 or more.

• min (number - 0) - Minimum nightly price range in USD.

• minguestrating (number - 1) - Minimum guest ratings for Airbnb and Hotels. Max to 5

• minstarrating (number - 1) - Minimum stars for hotels. Max to 5.

• nelat (number) - To force a map viewport (needs all 4 variables). North-East Latitude.

• nelng (number) - To force a map viewport (needs all 4 variables). North-East Longitude.

• onlyabids (string - "") - Comma seperated list of Airbnb IDs to only show on the map.

• onlyhcids (string - "") - Comma seperated list of HotelsCombined IDs to only show on the map.

• openmenu (string - "filters") - If you want to open a different menu at the beginning. You can set it as "null" to not open anything. Menu will only open for non-mobile devices if space permits. Options currently are: "null", "filters", "info", "guestpicker", "datepicker", and "settings".

• priceper (string - "nightly") - The display price. You can also display it by "total".

• priceslidercolor (hex string - "0077e7") - The price slider color in hex (without the #). If not set, will mimic navbarcolor.

• rentalscolor (hex string - "fd5c63") - Rentals pin color, in hex (without the #).

• rentalsfontcolor (hex string - "ffffff") - Rentals pin font color, in hex (without the #).

• rooms (number - 1) - Number of rooms. Max to 30. Also works as number of bedrooms for Airbnbs (including studios for the default 1).

• searchbarmode (boolean - false) - Changes map layout to a bigger search bar over the map.

• showsearchbar (boolean - true) - If set to false, this will hide the search box.

• scroll (string - "disabled") - Zooming with scrolling is intially disabled by default to avoid conflict with the page. Once we detect user intent, we will automatically enable zoom scrolling. You can force it to be always enabled by setting it as "enabled".

• showairbnbs (boolean - false) - Show Airbnbs spaces (filter pre-checked).

• showgmapsicon (boolean - false) - If set to true, a Google Maps icon on the footer will show for your user's convenience.

• showhotels (boolean - false) - Show hotel rooms (filter pre-checked).

• showothers (boolean - false) - Show alternative spaces like Hostels and Private/Shared rooms (filter pre-checked).

• skipabids (string - "") - Comma seperated list of Airbnb IDs to hide from the map.

• skiphcids (string - "") - Comma seperated list of HotelsCombined IDs to hide from the map.

• supportedcurrencies (string) - To force the list of currencies to your liking. Comma seperated like so "usd,cad,eur".

• supportedlang (string) - To force the list of language to your liking. Comma seperated like so "en,fr,es,de".

• swlat (number) - To force a map viewport (needs all 4 variables). South-West Latitude.

• swlng (number) - To force a map viewport (needs all 4 variables). South-West Longitude.

• zoom (number - 16) - The initial zoom level. The higher the number, the "zoom-ier" it is.

• maincolor (hex string - "#2D87FC") - The main color of the widget (without the #).

• navimage (string) - If set, provide an absolute full URL to change the main logo in the navbar (button on the far left) image.

• markerimage (string) - If set, provide an absolute full URL to change the marker (main map pin) image.

• showsearchbar (boolean - true) - If set to false, this will hide the search box.

• venue (string) - If set, this will change the map title on the searchbar.

• disableautohover (boolean - false) - Set to true if you want to disable a recommended listing to be automatically hovered/popped-up on load.

iOS/Android integration

You can absolutely integrate the map into your native mobile application. There's a known issue with iOS, specifically "WKWebView", please follow the instructions in the link below on how to integrate it properly to make sure pins become clickable.


https://gist.github.com/trevorstarick/f5586eef9d09f0116ca6a8713f529708

Email & social media integration (static map)

In order to fetch a snapshot of the Stay22 map for your email campaigns, link the img src to our static version of the website by appending static to the url, like so:


https://static.stay22.com/embed/gm?aid=partner22&lat=40.742612&lng=-73.987777&venue=Optional%20Text

Please wait for the image to be dynamically generated. Once the snapshot is taken, it will be cached for 10 days.

Extra parameters for static:

• refresh (boolean - false) - If you want to flush the cache, send set this as true.

• resolution (number - 2) - Set resolution for retina screens (2) or normal (1).

• width (number - 800) - Set the width in px. height (number - 400) - Set the height in px.

Support

Don't hesitate to email us your questions about the integration process at hello@stay22.com or use the chat bubble in the bottom right corner to reach us faster!

This documentation was last updated on: May 13th, 2019

Developer docs