In this post, I want to walk through a simple and practical way to add members-only access to a ReservationKey booking page using a lightweight password prompt.
This approach is ideal for associations, clubs, private retreats, or member organizations that want to restrict online reservations to a known audience—without needing full user accounts, logins, or backend authentication.
The concept is straightforward:
This is not meant to be bank-level security—but it is very effective at preventing casual or accidental access, which is exactly what many associations need.
For the demo, I created a mockup on the property’s website and added a simple button labeled “Members Reservation Portal.”
You could place this link anywhere on your site—navigation, a members page, a footer, or even behind additional content.
When clicked, this button opens the ReservationKey booking page.
Once the booking page loads, a password overlay appears immediately.
If someone enters the wrong password, they immediately see a message indicating the password is incorrect. This reinforces that the page is restricted.
Once the correct password is entered, the overlay disappears and the booking page is revealed.
This approach is intentionally lightweight.
It is not designed to stop a determined attacker—someone could technically view the page source and discover the password. However, in practice:
The goal is to deter casual misuse, not to implement enterprise-grade authentication.
Once inside the booking page, everything works exactly like a normal ReservationKey reservation.
Guests can:
If you need additional information from members—such as a membership number or association ID—this is a perfect use case for custom fields.
For example:
These fields appear directly on the reservation record and can be viewed later by staff.
In the demo setup:
However, ReservationKey is flexible:
All of this is optional and configurable per property.
From the admin side, reservations appear normally on the ReservationKey calendar.
You can view:
Everything stays centralized in one place.
The password protection itself is handled entirely with JavaScript.
Inside ReservationKey:
This script runs as soon as the page loads and creates the password overlay.
If you want to add this to your page, here is sample code to get started with. Just change the logo URL and password as needed. Here the password is in plain text:
<script>(function(f){document.readyState==="loading"?document.addEventListener("DOMContentLoaded",f):f()})(function(){
var PASSWORD = "sundance2026"; // <-- CHANGE PASSWORD HERE
var STORAGE_KEY = "rk_member_access_granted";
try{if(sessionStorage.getItem(STORAGE_KEY)==="1")return}catch(e){}
var o=document.createElement("div");
o.style.cssText="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;display:flex;font-family:Arial,sans-serif";
var l=document.createElement("div"),r=document.createElement("div");
l.style.cssText=r.style.cssText="width:50%;height:100%;background:#e6f1fb;transition:transform 1.25s cubic-bezier(.77,0,.18,1)";
o.appendChild(l);o.appendChild(r);
var b=document.createElement("div");
b.style.cssText="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:34px;max-width:340px;width:100%;text-align:center;z-index:1;border-radius:8px";
var img=document.createElement("img");
img.src="https://s3.amazonaws.com/rkv2/89388/8938819202644409PM__sundancemeadowslogo.PNG";
img.style.cssText="max-width:200px;margin-bottom:18px";
b.appendChild(img);
var t=document.createElement("div");
t.innerText="Members Only Access";
t.style.cssText="font-size:17px;margin-bottom:14px;color:#222";
b.appendChild(t);
var n=document.createElement("input");
n.type="password";
n.placeholder="Enter access code";
n.style.cssText="width:100%;padding:12px;font-size:14px;box-sizing:border-box;border-radius:6px;border:1px solid #ccc";
b.appendChild(n);
var e=document.createElement("div");
e.innerText="Invalid access code";
e.style.cssText="color:#c0392b;font-size:13px;margin-top:10px;display:none";
b.appendChild(e);
var btn=document.createElement("button");
btn.innerText="Continue";
btn.style.cssText="margin-top:18px;padding:12px 26px;font-size:14px;font-weight:600;border-radius:999px;border:none;cursor:pointer;color:#fff;background:#2f6fb3;transition:background .15s ease";
btn.onmouseenter=function(){btn.style.background="#245b99"};
btn.onmouseleave=function(){btn.style.background="#2f6fb3"};
b.appendChild(btn);
o.appendChild(b);
document.body.appendChild(o);
function shake(){
b.style.transform="translate(-50%,-50%) translateX(-6px)";
setTimeout(function(){b.style.transform="translate(-50%,-50%) translateX(6px)"},80);
setTimeout(function(){b.style.transform="translate(-50%,-50%)"},160);
}
function ok(){
try{sessionStorage.setItem(STORAGE_KEY,"1")}catch(e){}
l.style.transform="translateX(-100%)";
r.style.transform="translateX(100%)";
setTimeout(function(){o.remove()},1250);
}
function v(){
n.value===PASSWORD ? ok() : (e.style.display="block",shake(),n.focus());
}
btn.onclick=v;
n.onkeydown=function(e){if(e.key==="Enter")v()};
n.focus();
});
</script>
The password can be:
Both options are simple to manage.
Depending on your preference, the experience can be customized further:
ReservationKey supports both search-based and calendar-based booking flows, and either can be used behind the password gate.
This members-only password approach is a practical, low-friction solution for organizations that want controlled access without added complexity.
It’s:
If you’d like a deeper demo, help implementing this on your own site, or want to explore additional customization options, feel free to reach out.
Thanks for reading, and thanks for using ReservationKey.
Founded in 2007, ReservationKey was created to offer a simple, yet powerful and affordable solution for managing reservations and displaying availability online. Our goal is to deliver top-quality software that fulfills our users' needs - simple, efficient, and budget-friendly.