Widescale

Widescale is the pattern for automatic link and map deployment at scale. Instead of manually creating each Allez link or Map embed, you point at the data already on your page and let it build itself.

This is how partners with thousands of listings - event sites, travel directories, city guides - integrate without maintaining individual URLs.

See it in action

The playground below traces how a single event card's data becomes a working affiliate link. Edit the dates or campaign to watch the URL rebuild itself.

Enter your Affiliate ID to see the demo

Don't have one? Just hit Go. We'll use demo_affiliate_id as a placeholder.

How it works

Your page already has the data: a venue name, coordinates, event dates. Widescale just means reading those values and building Allez URLs from them programmatically.

JavaScript: build links from DOM elements

<div class="event-card" data-lat="45.4960" data-lng="-73.5693">
  <h3>Concert at Bell Centre</h3>
  <p class="date" data-checkin="2026-08-15" data-checkout="2026-08-17">Aug 15, 2026</p>
  <a class="hotel-link" href="#">Find Hotels</a>
</div>

const AID = '<AID>';

document.querySelectorAll('.event-card').forEach(card => {
  const lat = card.dataset.lat;
  const lng = card.dataset.lng;
  const checkin = card.querySelector('.date')?.dataset.checkin;
  const checkout = card.querySelector('.date')?.dataset.checkout;

  const params = new URLSearchParams({ aid: AID });
  if (lat && lng) {
    params.set('lat', lat);
    params.set('lng', lng);
  }
  if (checkin) params.set('checkin', checkin);
  if (checkout) params.set('checkout', checkout);
  params.set('campaign', 'events_page');

  const link = card.querySelector('.hotel-link');
  if (link) {
    link.href = `https://www.stay22.com/allez/roam?${params}`;
    link.target = '_blank';
    link.rel = 'noopener';
  }
});

React / Next.js

function EventCard({ event }) {
  const allezUrl = new URL('https://www.stay22.com/allez/roam');
  allezUrl.searchParams.set('aid', process.env.NEXT_PUBLIC_STAY22_AID);
  allezUrl.searchParams.set('lat', event.venue.lat);
  allezUrl.searchParams.set('lng', event.venue.lng);
  allezUrl.searchParams.set('checkin', event.startDate);
  allezUrl.searchParams.set('checkout', event.endDate);
  allezUrl.searchParams.set('campaign', `event_${event.id}`);

  return (
    <div>
      <h3>{event.name}</h3>
      <a href={allezUrl.toString()} target="_blank" rel="noopener">
        Find Hotels Nearby
      </a>
    </div>
  );
}

Python (server-side)

from urllib.parse import urlencode

def build_allez_links(events, aid):
    links = []
    for event in events:
        params = {
            "aid": aid,
            "lat": event["lat"],
            "lng": event["lng"],
            "checkin": event["start_date"],
            "checkout": event["end_date"],
            "campaign": f"event_{event['id']}",
        }
        links.append(f"https://www.stay22.com/allez/roam?{urlencode(params)}")
    return links

Widescale for Maps

The same pattern works for Maps embeds. Instead of building Allez links, construct iframe src URLs:

document.querySelectorAll('.event-card').forEach(card => {
  const lat = card.dataset.lat;
  const lng = card.dataset.lng;
  const slot = card.querySelector('.map-slot');

  if (lat && lng && slot) {
    const params = new URLSearchParams({
      aid: '<AID>',
      lat,
      lng,
      campaign: 'events_map',
    });
    const iframe = document.createElement('iframe');
    iframe.src = `https://www.stay22.com/embed/gm?${params}`;
    iframe.style.cssText = 'width:100%;height:380px;border:none;';
    iframe.loading = 'lazy';
    slot.appendChild(iframe);
  }
});

Best practices

Use coordinates (lat/lng) when you have them - more precise, skips geocoding
Set a campaign per page or section - makes it easy to track which pages generate bookings
Use /allez/roam - let the AI pick the best provider instead of hard-coding one
Include dates when you have them - pre-filled dates dramatically improve conversion
URL-encode values - especially addresses with special characters