Stay22 Map: Full Installation Guide
Table of Contents
- How do I create my iframe src base?
- How to set up the required URL parameters for the Map?
- Tracking campaign and channel performance
- How do I adjust the Map widget size?
- Tech Support
The Stay22 MAP helps you earn affiliate revenue while providing your visitors with tailored offers based on the events they're attending. Built for events, ticketing platforms, travel blogs, and travel media.
With just a location and a starting date, you’re able to instantly generate an infinite number of Stay22 maps and integrate them onto your app/website. Below, you will find all the necessary information to get started.
If you're interested in creating a single map for a specific event, you can do so via the Hub.
How to create an iframe src base:
The iframe integration is the most common implementation, as it can be easily customized. Everything is built upon a single URL. You will need this URL to start, and you can add parameters along the way.
Iframe code:
<iframe src="https://www.stay22.com/embed/gm?aid=affiliateid&lat=40.742612&lng=-73.987777" id="stay22-widget" width="100%" height="460" frameborder="0"></iframe>
|
The code above will generate this map:
How to set up the required URL parameters for the Map?
For a map to be generated fully, it requires three parameters: partner ID, location, and date. Find details below on how to integrate the required parameters.
1) partner ID
A partner ID will help you track clicks, loads, and earnings. Login to your dashboard to see your partner ID. We recommend the aid parameter to be the first parameter in the URL so we can detect errors and have more accurate reporting.
Optionally, you can segment the stats by using the campaign parameter. You can use any and as many characters you want. You will have access to read those in your dashboard stats, including the transaction reporting API.
aid && campaignaid=youraffiliateid&campaign=label_1&campaign=label_2&campaign=label_3
2) Location
Latitude and longitude coordinates or an address must be provided in text format. We recommend using the lat/lng coordinates if possible, as they will always be more precise. For the address method, please provide as much information as possible (venue name, street address, city, country, etc.), as we are using “fuzzy” location matching. Supports all localizations.
lat && lngllat=40.7505045&lng=-73.99343877
If your lat/lng is inside China, send us the type of coordinate system you are using. By default, Stay22 parses WGS. However, if your latlngs are from Google Maps (GCJ) or Baidu (BD), please specify using the &coordtype=WGS|GCJ|BD.
addressaddress=4 Pennsylvania Plaza, New York, NY 10001
3) Dates
Please provide either a check-in date or the event start date. This allows the map to pull live availability and pricing. If no date is given, it defaults to a check-in date 3 months from the time the user opens the map, for a 3-night stay, to ensure available properties are displayed.
You can send dates in any ISO 8601 format like YYYY-MM-DD. We also support MM/DD/YYYY. If checkout is empty, it will default to check-in + 1 day.
checkin && checkoutcheckin=2022-04-22&checkout=2022-04-24
Alternatively, we can smartly detect the best time to check in. If you wish to let us do so, provide the data in unix timestamp (seconds) when the event starts. If event end is not provided, we will select the next day for check-out
eventstart && eventendeventstart=1587578400&eventend=1587751200
Note: If you plan to use the eventstart parameter, we’ll automatically assume the unix timestamp’s timezone is GMT. If that isn’t the case, you can send in your timezone offset using the eseetz parameter. For example, if your timestamp’s timezone is in Tokyo’s, send it in like so: eseetz=09:00, or if it’s San Francisco: eseetz=-07:00. Do not send in a + since that can cause an error with the URL structure. You can also send in “auto” so we use the local timezone of the destination location. If omitted, we’ll assume the unix timestamp you are sending is in GMT.
Altogether, the complete URL (that you will wrap through an <iframe>) could look like this:
Popular query parameters
Below are the most popular parameters. Once you’ve set up the required parameters, you can use the following list to further customize your widget:
| Name | Type | Default Value | Description |
|---|---|---|---|
| maincolor | hex string | 293BFF | The main color of the widget in hex (without the #). This will define the branding color of the "See Accommodations" button |
| markerimage | string | If set, provide an absolute full URL to change the marker (main map pin) image | |
| venue | string | If set, this will overwrite the output address and change the map title on the search bar. Useful to use in combination with lat/lng integrations |
To accurately segment stats and understand how your content performs across different channels or initiatives, using the campaign parameter is essential. It's required for performance tracking across all our reporting tools, including the dashboard and the transaction reporting API.
We strongly recommend using Campaign IDs, as they are the only way to distinguish bookings and performance across different links on your site.
You can set your own campaign names, using any characters or structure you prefer. Think of it like tagging your content with smart labels. Whether you’re running A/B tests, working with multiple affiliates, or tracking performance across traffic sources, campaign IDs let you break it all down cleanly.
Sites using wide-scale integrations (deploying links through a custom script) benefit most when each channel or placement has its own distinct Campaign ID. This setup makes performance analysis much easier and helps you quickly identify what’s working (or isn’t).
To use it, just add the campaign parameter to your link.
The original URL
https://www.stay22.com/embed/gm?aid=affiliateid&lat=40.7505045&lng=-73.9934387&checkin=2022-04-22&checkout=2022-04-24
Would then become
https://www.stay22.com/embed/gm?aid=affiliateid&lat=40.7505045&lng=-73.9934387&checkin=2022-04-22&checkout=2022-04-24&campaign=mobile
If you want to assign multiple Campaign IDs to a single link, you’ll need to include the campaign parameter multiple times within that same URL.
https://www.stay22.com/embed/gm?aid=affiliateid&lat=40.7505045&lng=-73.9934387&checkin=2022-04-22&checkout=2022-04-24&campaign=name_of_evenbt&campaign=checkout_page
How to adjust the size of the Map widget
You can change the size of the map using the width and height attributes or CSS properties of the <iframe>. We recommend having the map at a minimum height of 450px for ideal display on desktop and tablet sizes.
How to further customize the Map widget?