Password Protect your Site
Secure your website with a password in a super easy way.
.Add a Site Password
Enter your website name and a password of your choice.
Embed the Snippet
Copy the code snippet provided and paste it into your website.
Website Secured
Your website or page is now protected with a password.
How to Use
Sitewide Pasword
To set up a sitewide password, go to Site settings and paste the code snippet that you get when you add a site here section, in the custom code "End of Head Tag" section.
Page Specific Password
Figma Sites does not yet support custom Head and Body code for individual pages. To use Simple Site Pass on specific pages you can use this Figma Make Component, paste it on the page you want to protect, ideally with position set to fixed, 100% width and height. Enter the Site ID you got after adding a website here and you are done.
Sitewide Pasword
Free Tier
Framer requires a paid plan to add custom code. You will have to rely on the page specific solution described below.
Paid Tier
If you have purchased any type of Framer paid plan you can now add the code snippet generated after adding a website in the your sites section of this site. Scroll to custom code in site settings and paste the code snippet in the "Head Tag" section.
Page Specific Password
Free Tier
Copy and paste this code in any page you want to protect:
https://framer.com/m/Simple-Site-Pass-vbzM.js@S6IhVCN30rCtTcFEo9vMThis will paste a component on your Framer Canvas. Set it to position fixed, 100% width and height, and enter your Site ID from the Simple Site Pass dashboard.
Paid tier
If you have purchased any type of Framer paid plan you can now add the code snippet generated after adding a website in the your sites section of this site. Go to the custom code section of your page settings and paste the code snippet in the "Head Tag" section.
Sitewide Password
Install the package and wrap your children in SimpleSitePass inside your layout.js (or layout.jsx) file. This ensures the entire site is protected without adding the component on every page. Get your Site ID from your dashboard.
npm i simplesitepass-nextExample (Next.js App Router)
"use client";
import SimpleSitePass from "simplesitepass-next";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<SimpleSitePass siteId="YOUR_SITE_ID" loadingComponent={<p>Loading…</p>}>
{children}
</SimpleSitePass>
</body>
</html>
);
}Page Specific Password
If you only need to protect a specific page, wrap that page’s content in SimpleSitePass. This is useful if you want some pages public and others private. You can also use it in a layout.js to protect only a section of your app (for example, all routes under /dashboard).
Example – Inside a Page
"use client";
import SimpleSitePass from "simplesitepass-next";
export default function Page() {
return (
<SimpleSitePass siteId="YOUR_SITE_ID" loadingComponent={<p>Loading…</p>}>
<h1>Private Page</h1>
</SimpleSitePass>
);
}Example – Inside a Layout
"use client";
import SimpleSitePass from "simplesitepass-next";
export default function DashboardLayout({ children }) {
return (
<SimpleSitePass siteId="YOUR_SITE_ID" loadingComponent={<p>Loading…</p>}>
{children}
</SimpleSitePass>
);
}Tip: Place SimpleSitePass as high as possible in your layout to prevent any flash of unprotected content. Tokens are stored in a cookie for fast re-entry.
Sitewide Pasword
To set a sitewide password simply paste the snippet provided in your dashboard after you add a site, at the end of the head tag across all pages, or via general settings if applicable.
Page Specific Password
Setting a page specific password is equally easy, paste the snippet from your dashboard into the page you want to protect, ideally at the end of the head tag. If that is not possible, you can still paste it in the body tag.
Demos
Password: PasswordUXDocx
© 2025 Black Device SRL, Romania. All rights reserved.