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
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
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>
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>
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.
Your affiliate ID assigned to you to track $$$, clicks and loads. You can segment the stats by prepending a dash
aid=mainaffiliateid-campaignid
Provide address in text format OR lat/lng coordinates to load the map
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
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
Provide check-in date OR the event start date. This is needed so the map can poll live availabilities and accurate rates.
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
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>.
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.
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..
[ { "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
[ { "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.
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.
Don't hesitate to email us your questions about the integration process at [email protected]