Wide scale embed for platforms

Using Stay22's widget, you can be sure your users won't leave your site/app when browsing for accommodations. 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.

Embed 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 looks:

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

Click to load an example of the embeddable with the associated code (opens in a new tab)

Getting started

If you have a bunch of events on your site, or you're a ticketing reseller or platform, or sell airline or bus tickets, or whatever the case may be; we have a solution to programmatically embed our widget using one of the following methods:

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.

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

address

Not as accurate embedding method as plugging the coordinates, but still powerful and easy. Try to feed as much info as possible (address, city, country), as it is fuzzy searching Google's database. It is error prone as sometimes Google does not recognize all locations and this could cost you.

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

For that example, writing 'Madison Square Garden' directly into the address parameter won't yield the proper result, that's why it's important to put the actual complete street address.

Bad examples:

Venue name only: /embed/gm?address=madison%20square%20garden

Missing postal code: /embed/gm?address=4%20Pennsylvania%20Plaza,%20New%20York,%20NY

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

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

aid (string) - Your affiliate ID to track $$$. You can append a sub-aid to do deep tracking by seperating with a dash for e.g: "major-minor", "ticketplatform-eventID", "eventGroup-eventName"
ljs (string) - Forcing language. By default, we automatically the user's currency and language, but if you want to force it you can you always do that. Currently support english and french ("en", "fr")
currency (string - "USD") - 3 letter currency. Currency is auto-detected by default.
scroll (string - "disabled") - Zooming and dragging is disabled because of scrolling by default. You can force it to be enabled by setting it as "enabled". Otherwise, if we detect user intent, we will automatically enable scrolling.
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
hidemappanels (boolean - false) - If set to true, this will hide map panels (e.g: zoom control, satellite button, etc.)
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
hidebrandlogo (boolean - false) - If set to true, the logo in the footer will be hidden
hidecentermap (boolean - false) - If set to true, the center map button in the footer will be hidden
hideppn (boolean - false) - If set to true, the price information in the footer will be hidden
hidespinner (boolean - false) - If set to true, the loading spinner 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
showgmapsicon (boolean - false) - If set to true, a Google Maps icon on the footer will show for your user's convenience
fontcolor (hex string - auto) - The navbar's font color in hex (without the #)
navbarcolor (hex string - "d24d57") - The nav bar color in hex (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 - "d24d57") - 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 #)
If custom hotels exist, you can change all colors:

hotelscolor (hex string - "00aef0") - Hotels pin color, in hex (without the #)

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

chpincolor (hex string - "2e8786") - 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"
address (string) - If set, this will change the address of the marker pin
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
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 are: "null", "filters", "settings".
disablehotels (boolean - false) - Disable Stay22's current hotel provider (HotelsCombined)
disablerentals (boolean - false) - Disable Stay22's current rental provider (HomeAway)
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.
eventstart (number) - The unix timestamp in GMT seconds when the event starts. We will smartly detect when is the best time to check in if this is provided. Do not combine with checkin parameter.
eventend (number) - The unix timestamp in GMT seconds when the event ends. We will smartly detect when is the best time to check out if this is provided. Do not combine with checkout parameter.
checkin (string) - The checkin date for search. In this format MM/DD/YYYY. If empty and eventstart isn't defined, it defaults to tomorrow.
checkout (string) - The checkout date for search. In this format MM/DD/YYYY. If empty and eventend isn't defined, it defaults to after tomorrow
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.

Errors and debugging

If the widget ever crashes or isn't loading the way you want it, I left console.log's to guide you in your journey.

Support

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

Wide scale embed for platforms

Changelog

Embed using iframe

Getting started

lat && lng

address

Widget size

POIs and Custom Hotels List

Implementation for POIs and Hotels

Custom POIs example

Custom Hotels example

Extra query parameters

aid (string) - Your affiliate ID to track $$$. You can append a sub-aid to do deep tracking by seperating with a dash for e.g: "major-minor", "ticketplatform-eventID", "eventGroup-eventName"

ljs (string) - Forcing language. By default, we automatically the user's currency and language, but if you want to force it you can you always do that. Currently support english and french ("en", "fr")

currency (string - "USD") - 3 letter currency. Currency is auto-detected by default.

scroll (string - "disabled") - Zooming and dragging is disabled because of scrolling by default. You can force it to be enabled by setting it as "enabled". Otherwise, if we detect user intent, we will automatically enable scrolling.

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

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

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

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

hidecentermap (boolean - false) - If set to true, the center map button in the footer will be hidden

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

hidespinner (boolean - false) - If set to true, the loading spinner 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

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

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

navbarcolor (hex string - "d24d57") - The nav bar color in hex (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 - "d24d57") - 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 #)

If custom hotels exist, you can change all colors:

hotelscolor (hex string - "00aef0") - Hotels pin color, in hex (without the #)

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

chpincolor (hex string - "2e8786") - 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"

address (string) - If set, this will change the address of the marker pin

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

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 are: "null", "filters", "settings".

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

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

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.

eventstart (number) - The unix timestamp in GMT seconds when the event starts. We will smartly detect when is the best time to check in if this is provided. Do not combine with checkin parameter.

eventend (number) - The unix timestamp in GMT seconds when the event ends. We will smartly detect when is the best time to check out if this is provided. Do not combine with checkout parameter.

checkin (string) - The checkin date for search. In this format MM/DD/YYYY. If empty and eventstart isn't defined, it defaults to tomorrow.

checkout (string) - The checkout date for search. In this format MM/DD/YYYY. If empty and eventend isn't defined, it defaults to after tomorrow

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.

Errors and debugging

Support