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

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 generate your map on the fly using one of the two 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

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

Extra query parameters (type - "default value")

aid (string) - Your affiliate ID assigned to you to track $$$, clicks and loads. 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) - We automatically detect the user's language, but if you wish to force it, we support these languages: ("en", "fr")
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
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
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 currently are: "null", "filters", "heatmap".
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.

Email Embed

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?lat=40.7505045&lng=-73.9934387&hidenavbar=true

Image is refreshed every 4 hours. If you want to force clear cache, send in refresh=true to the request params.

Errors and debugging

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

Support

Don't hesitate to email us 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

Extra query parameters (type - "default value")

aid (string) - Your affiliate ID assigned to you to track $$$, clicks and loads. 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) - We automatically detect the user's language, but if you wish to force it, we support these languages: ("en", "fr")

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

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

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

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.

Email Embed

Errors and debugging

Support