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.

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.

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.

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,
            "url": "https://www.airbnb.com/rooms/398850",
            "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 $$$
  • 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 disable the enlarge map button
  • hideshare (boolean - false) - If set to true, this will disable 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
  • 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 the footer 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 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 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"
  • currency (string - "USD") - 3 letter currency
  • 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]