Stay22

How to integrate Stay22 with Webflow

Stay22 integrates with Webflow through iframe embeds and custom code. This works for travel publishers monetizing content, event organizers providing accommodation options, and hospitality businesses showcasing properties. If you need to sync data between the two platforms, you can build using Webflow’s and Stay22’s APIs.

Embed the Stay22 MAP widget

Webflow's Code Embed element adds Stay22's MAP widget to any page. The widget displays an interactive map with accommodation pins that readers can click to view details and book stays. It works for travel content sites, event pages, and destination marketing.

Add an Embed element to your site, either globally in site settings or per-page in individual page settings.

• For global implementation across your site, add the embed code through Site Settings → Custom Code → Head or Footer sections.
• For page-specific placement, use Page Settings → Custom Code or drag a Code Embed element directly onto your canvas in the Webflow.

Then paste the iframe code into the element. Here’s what that code looks like in 2025:

<iframe src="https://www.stay22.com/embed/gm?aid=YOUR_AID&lat=40.742612&lng=-73.987777&date=2024-01-15,2024-01-17"
width="100%"
height="460"
frameborder="0">
</iframe>



Customization options:

• Location targeting with lat/lng parameters for coordinate-based placement
• Date configuration through the date parameter for pre-filled check-in and check-out dates
• Brand customization using maincolor and markerimage parameters to match your site design
• Display modes with the viewmode parameter to switch between map, list, or hybrid views
• UI controls through hidefilters, hideguestpicker, and hideratings parameters to simplify the interface
• Localization with ljs and currency parameters for international audiences

The widget loads asynchronously to avoid impacting page load times. Webflow's Code Embed element supports reusable components, so you can create one configured embed and reuse it across multiple pages with consistent settings.

Build with Webflow and Stay22 APIs

Stay22 uses a token-based data access system rather than traditional REST endpoints. According to Stay22's integration guide, you generate API tokens through the Stay22 Hub dashboard in the Data Reporting API section. The Hub dashboard URL is provided after account registration.

Note: This approach requires middleware to bridge Stay22's data access with the Webflow CMS. Webflow provides REST API endpoints for managing sites, CMS collections, and forms. It also requires server infrastructure to handle token management and API requests.

Authentication requirements:

• Stay22 tokens generate through the Hub dashboard and display only once upon creation
• Webflow uses OAuth 2.0 authentication with Bearer tokens
• Both platforms require secure token storage and management

Sync booking data to Webflow CMS

Use the Webflow CMS API to store accommodation data or booking information in your site's content collections. This works for displaying availability, managing property listings, or tracking affiliate performance.

Key Webflow API endpoints:

• GET /collections retrieves available CMS collections
• POST /collections/{collection_id}/items creates new CMS items for accommodations or bookings
• PUT /collections/{collection_id}/items/{item_id} updates existing collection items
• GET /collections/{collection_id}/items retrieves collection items with filtering capabilities

Build a middleware service that authenticates with Stay22 using dashboard-generated tokens, retrieves data, then uses Webflow's CMS endpoints to create or update content. This enables automated content updates without manual CMS management.

Consider rate limits and implement proper error handling for both platforms' APIs. Test the integration in a development environment before production deployment.

What you can build

Integrating Stay22 with Webflow adds accommodation booking functionality directly within your content pages, event listings, and destination guides while generating affiliate revenue streams.

• Travel content monetization: Embed location-specific accommodation maps within CMS-driven destination guides, letting readers book stays without leaving your site while you earn commissions on completed bookings.
• Event accommodation pages: Add interactive maps showing available lodging near event venues on conference or festival websites, helping attendees find and book accommodations through your registration flow.
• Multi-property showcase: Display real-time availability across multiple properties or destinations within a single interface, ideal for vacation rental operators or destination marketing organizations managing multiple listings.
• Automated affiliate content: Use Webflow CMS collections to manage destination pages that automatically display relevant accommodation options based on location data, creating scalable affiliate revenue without manual updates.