Wide scale embed for platforms

With just a location and a starting date, you could instantly generate a Stay22 map on the fly. Using Stay22's map, you can be sure your users won't leave your site/app when browsing for accommodations. Generate more revenue by embedding our high converting map on your ticket confirmation page, email reminder, or anywhere. Whether it's a hotel, a hostel or an apartment rental, we've got it all. Stay22's advanced map enables the end user to find the best deal at the best rate based on the distance from where the action is taken place

Jump to sections by searching the docs

Changelog

You can head over to our changelog page to see the latest changes for the map. This documentation has been last updated on: March 28th, 2018

Quick start integration guide using <script>

If you have a bunch of events on your site, or you're a ticketing reseller or platform, or whatever the case may be; we have a quick solution to automatically generate your map on the fly! Simply copy paste the below script anywhere in your body tag where you want the map to be shown, and fill out the 2 required steps 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: '375px' // 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: 'Key Arena Seattle' , // full street address or venue name + city
              checkin: '4/22/2019', // checkin date for their stay in MM/DD/YYYY
              maincolor: '00549E', // your brand color in hex (without the #)
              markerimage: "https://www.stay22.com/logo.png" // url of your logo or event image (in https)
            };
        
            // 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>

Manual integration guide using <iframe>

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

<iframe id="stay22-widget" width="100%" height="360" src="https://www.stay22.com/embed/gm?lat=40.7505045&lng=-73.9934387&title=Madison%20Square%20Garden" frameborder="0"></iframe>

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

aid

Your affiliate ID assigned to you to track $$$, clicks and loads. You can segment the stats by prepending a dash

aid=mainaffiliateid-campaignid

2) Location

Provide address in text format OR lat/lng coordinates to load the map

address

For the address method, try to feed as much info as possible (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

/embed/gm?address=4%20Pennsylvania%20Plaza,%20New%20York,%20NY%2010001

lat && lng

If you have access to coordinates of the venue or airport or wherever the event is happening, this is the recommended way to integrate as it will always be precise

/embed/gm?lat=40.7505045&lng=-73.9934387

3) Dates

Provide check-in date OR the event start date. This is needed so the map can poll live availabilities and accurate rates.

checkin && checkout

Currently supporting only this format: MM/DD/YYYY. If checkout is empty, it will default to checkin + 1 day

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

eventstart && eventend

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.

&eventstart=1555920000&eventend=1555966800

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>.

POIs and Custom Hotels List

You can add a set of POIs (points of interests) and/or a set of your own hotels in case you have a group deal, sponsorship deal, or whatnot.

Implementation for POIs and Hotels

Insert the JSON into the poi or hotels parameter. You have to make sure the JSON is valid, then minify the JSON, and finally URL encode it before pasting it into the query param. Take note of the max characters in a URL bug, since encoded JSON tends be long..

Custom POIs example

        [
          {
            "lat": latitude,
            "lng": longitude,
            "desc": "optional, description displays on pin hover",
            "img": "optional, this is the pin image url in SSL (https), a default one will be used if omitted",
            "url": "optional, the url where it should redirect when clicked. Make sure the http(s):// is included"
          },
          {
            "lat": 40.748239,
            "lng": -73.990597,
            "desc": "Resto-Bar where the party will be held",
            "img": "https://i.imgur.com/PpIW3M4.png",
            "url": "http://www.friedmansrestaurant.com/"
          }
        ]

Example: (and preview)
&poi=%5B%7B%22lat%22%3A40.748239%2C%22lng%22%3A-73.990597%2C%22desc%22%3A%22Resto-Bar%20where%20the%20party%20will%20be%20held%22%2C%22img%22%3A%22https%3A%2F%2Fi.imgur.com%2FPpIW3M4.png%22%2C%22url%22%3A%22http%3A%2F%2Fwww.friedmansrestaurant.com%2F%22%7D%5D

Custom Hotels example

        [
          {
            "lat": latitude,
            "lng": longitude,
            "price": the starting price per night in USD,
            "expiration": optional, when does the deal expire in unix timestamp,
            "url": "optional, the url where it should redirect when clicked",
            "desc": "optional, supports html, displayed on hover",
            "bookinginfo": "optional, supports html, if no url is present, describe the way to book and a modal will drop down on click"
          },
          {
            "lat": 40.752536,
            "lng": -73.996386,
            "price": 175,
            "desc": "My Airbnb",
            "bookinginfo": "call 1800-222-2222 to reserve and mention EVENT code"
          }
        ]

Example: (and preview)
&hotels=%5B%7B%22lat%22%3A40.752536%2C%22lng%22%3A-73.996386%2C%22price%22%3A175%2C%22url%22%3A%22https%3A%2F%2Fwww.airbnb.com%2Frooms%2F398850%22%2C%22desc%22%3A%22My%20Airbnb%22%2C%22bookinginfo%22%3A%22call%201800-222-2222%20to%20reserve%20and%20mention%20EVENT%20code%22%7D%5D

When a custom hotel is detected, every other pin becomes distraction free.

Extra query parameters (type - "default value")

ljs (string) - We automatically detect the user's language, but if you wish to force it, we support these languages: ("en", "fr", "es", "pt", "it", "de", "nl"). Let us know what should we add next!
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".
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".
mapstyle (string - "default") - Choose a theme for the map. Choices are: default, light, and dark. Email us if you want your own custom theme.
hideenlargemap (boolean - false) - If set to true, this will hide the enlarge map button
hideshare (boolean - false) - If set to true, this will hide the share button
hidesettings (boolean - false) - If set to true, this will hide the setting button
hidecurrency (boolean - false) - If set to true, this will hide the currency selection
hidelanguage (boolean - false) - If set to true, this will hide the language selection
hidemappanels (boolean - false) - If set to true, this will hide map panels (e.g: zoom control, etc.)
hideheatmap (boolean - false) - If set to true, this will hide the heatmap button
hidenavbar (boolean - false) - If set to true, this will hide the navbar (except for the buttons)
hidenavbuttons (boolean - false) - If set to true, this will hide the big buttons on the top right
hidefilters (boolean - false) - If set to true, this will the filter button and menu
hidebrandlogo (boolean - false) - If set to true, the logo in the footer will be hidden
hideppn (boolean - false) - If set to true, the price information in the footer will be hidden
hidefooter (boolean - false) - If set to true, the footer will be hidden
hidecheckinout (boolean - false) - If set to true, the check-in and check-out inputs will be hidden
disabledirections (boolean - false) - If set to true, this will hide the polyline generated on hover of a listing
showgmapsicon (boolean - false) - If set to true, a Google Maps icon on the footer will show for your user's convenience
showsearchbar (boolean - false) - If set to true, this will pop up a search box for users to search for other locations
fontcolor (hex string - auto) - The navbar's font color in hex (without the #)
maincolor (hex string - "#0077e7") - The main color of the widget (without the #)
buttoncolor (hex string) - The top menu button color in hex (without the #)

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

buttoncoloractive (hex string) - The top menu button active color in hex (without the #)
priceslidercolor (hex string - "#0077e7") - The price slider color in hex (without the #). If not set, will mimic navbarcolor.
loadingbarcolor (hex string) - The loading bar color in hex (without the #)
hotelscolor (hex string - "#0077e7") - Hotels pin color, in hex (without the #)

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

chpincolor (hex string - "#2ccccc") - If you have custom hotels, in hex (without the #)
hotelsfontcolor (hex string - "ffffff") - Hotels pin font color, in hex (without the #)

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

chpinfontcolor (hex string - "ffffff") - If you have custom hotels, the font color in hex (without the #)
title (string) - If set, this will change the title on the map header. To hide it, simply send "null"
subtitle (string) - If set, this will change the subtitle on the map header. To hide it, simply send "null"
venue (string) - If set, this will change the venue name on the map header and marker pin
hidemainmarkercover (boolean - false) - If set to true, and it's using an EVENT type search, it will hide the background circle behind the main marker.
markerimage (string) - If set, provide a absolute full URL to change the marker (main map pin) image
isinstantbook (boolean - false) - To show only listings that are instant bookable (for Airbnb)
isentireplace (boolean - false) - To show listings that are entire places (for Airbnb)
isprivateroom (boolean - false) - To show listings that are private rooms (for Airbnb)
issharedroom (boolean - false) - To show only listings that are shared rooms (for Airbnb)
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", "heatmap", "info", and "settings".
disablehotels (boolean - false) - Disable Stay22's current hotel provider (HotelsCombined)
disablerentals (boolean - false) - Disable Stay22's current rental provider (Airbnb)
featuredhcids (string - "") - Comma seperated list of HotelsCombined IDs to stand out from other hotels
skiphcids (string - "") - Comma seperated list of HotelsCombined IDs to hide from the map
skipabids (string - "") - Comma seperated list of Airbnb IDs to hide from the map
onlyhcids (string - "") - Comma seperated list of HotelsCombined IDs to only show on the map
onlyabids (string - "") - Comma seperated list of Airbnb IDs to only show on the map
dotlistings (boolean - false) - Compact the price pins into dots for more mapping space
disableautohover (boolean - false) - Set to true if you want to disable a recommended listing to be automatically hovered/popped-up on load.
min (number - 0) - Minimum nightly price range in USD.
max (number - 1000) - Maximum nightly price range in USD. If set to 1000 or more, it'll assume it's 1000 or more.
guests (number - 1) - Number of guests. Max to 16.
priceper (string - "nightly") - The display price. You can also display it by "total"
zoom (number - 16) - The initial zoom level. The higher the number, the zoomier it is ;)
fitmaptopoi (boolean - false) - If you happen to have POIs, you can make sure they all show on initial map load
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 Longtitude
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 Longtitude
referrer (string) - Useful for debugging. With that, we can pin-point where the widget is erroring out, or which page is out-performing others. Put the url of your site where the widget will be loaded from.

Static22 for emails campaigns and previews

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.7505045&lng=-73.9934387&hidenavbar=true

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

width (number - 800) - Set the width in px

height (number - 400) - Set the height in px
resolution (number - 2) - Set resolution for retina screens (2) or normal (1)
format (string - png) - The format in png or jpg
quality (number - 100) - Image quality, 100 being the best but also largest in terms of file size
refresh (boolean - false) - If you want to flush the cache, send set this as true

Support

Don't hesitate to email us your questions about the integration process at [email protected]

Wide scale embed for platforms

Changelog

Quick start integration guide using <script>

Manual integration guide using <iframe>

Required URL parameters

1) Affiliate ID

aid

2) Location

address

lat && lng

3) Dates

checkin && checkout

eventstart && eventend

Widget size

POIs and Custom Hotels List

Implementation for POIs and Hotels

Custom POIs example

Custom Hotels example

Extra query parameters (type - "default value")

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

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".

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".

mapstyle (string - "default") - Choose a theme for the map. Choices are: default, light, and dark. Email us if you want your own custom theme.

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

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

hidesettings (boolean - false) - If set to true, this will hide the setting button

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

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

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

hideheatmap (boolean - false) - If set to true, this will hide the heatmap button

hidenavbar (boolean - false) - If set to true, this will hide the navbar (except for the buttons)

hidenavbuttons (boolean - false) - If set to true, this will hide the big buttons on the top right

hidefilters (boolean - false) - If set to true, this will the filter button and menu

hidebrandlogo (boolean - false) - If set to true, the logo in the footer will be hidden

hideppn (boolean - false) - If set to true, the price information in the footer will be hidden

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

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

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

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

showsearchbar (boolean - false) - If set to true, this will pop up a search box for users to search for other locations

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

maincolor (hex string - "#0077e7") - The main color of the widget (without the #)

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

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

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

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

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

hotelscolor (hex string - "#0077e7") - Hotels pin color, in hex (without the #)

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

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

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

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

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

title (string) - If set, this will change the title on the map header. To hide it, simply send "null"

subtitle (string) - If set, this will change the subtitle on the map header. To hide it, simply send "null"

venue (string) - If set, this will change the venue name on the map header and marker pin

hidemainmarkercover (boolean - false) - If set to true, and it's using an EVENT type search, it will hide the background circle behind the main marker.

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

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

isentireplace (boolean - false) - To show listings that are entire places (for Airbnb)

isprivateroom (boolean - false) - To show listings that are private rooms (for Airbnb)

issharedroom (boolean - false) - To show only listings that are shared rooms (for Airbnb)

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", "heatmap", "info", and "settings".

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

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

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

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

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

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

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

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

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

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

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

guests (number - 1) - Number of guests. Max to 16.

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

zoom (number - 16) - The initial zoom level. The higher the number, the zoomier it is ;)

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

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 Longtitude