Learn how to build a clickable CMS room map in Webflow using dynamic popups, data attributes, and JavaScript. Perfect for hotels, real estate, and interactive layouts.
<script>
document.addEventListener("DOMContentLoaded", () => {
// Handle opening
document.querySelectorAll("[data-open-popup]").forEach(btn => {
btn.addEventListener("click", () => {
const id = btn.getAttribute("data-open-popup");
const popup = document.querySelector(`[data-popup="${id}"]`);
if (popup) {
popup.style.display = "flex";
}
});
});
// Handle closing (optional)
document.querySelectorAll(".popup").forEach(popup => {
popup.addEventListener("click", e => {
if (e.target === popup) {
popup.style.display = "none";
}
});
});
});
</script>
Webflow makes it easy to design beautiful layouts, but creating an interactive, clickable room map powered by the CMS requires a smart combination of structure, attributes, and lightweight JavaScript.
In this tutorial, you’ll learn how to build a clickable CMS room map in Webflow where users can click rooms or hotspots on an image and open dynamic popups connected to CMS content.
This approach is perfect for hotels, real estate, venues, exhibitions, campuses, or any project that needs an interactive visual layout tied to structured data.
A clickable CMS room map is an interactive image (such as a floor plan or site map) where each clickable area opens detailed information pulled from the Webflow CMS.
Instead of hard-coding content, each room or hotspot:
This allows designers and clients to manage room data without touching the layout or code.
Using the CMS for interactive maps gives you:
This method is far more flexible than static image links or manually duplicated popups.
The setup relies on three key parts:
When a user clicks a room:
No page reloads, no complex frameworks, and no third-party libraries.
Create a CMS Collection for your rooms or spaces. Typical fields include:
Each CMS item will correspond to one clickable area on your map.
Place clickable elements (divs, buttons, or links) on top of your image using absolute positioning.
Each trigger needs a unique identifier, for example:
data-open-popup="room-101"data-open-popup="suite-a"This identifier is what connects the visual map to the CMS content.
For each CMS item:
data-popup="room-101")All popups can be styled once and reused across the site.
A lightweight script listens for clicks on the map triggers and shows the correct popup.
This approach:
Because the logic is attribute-based, it’s scalable and CMS-friendly.
This pattern works especially well for:
Anywhere users need to explore spaces visually, this approach improves clarity and engagement.
This method is SEO-safe because:
Search engines can still crawl your CMS content, even though it’s revealed interactively.
A clickable CMS room map is a powerful way to combine visual storytelling with structured content in Webflow. By using simple data attributes and a small amount of JavaScript, you can create interactive experiences that remain easy to manage and scale over time.
This pattern is especially valuable for hospitality, real estate, and venue-based projects where clarity and usability matter.
