
In this tutorial, we are going to guide you on how to protect your Webflow page to only be accessible by logged in users.
You can do so by adding a simple code on the head section of your Webflow custom code. This can be applied to any other website builders with custom code functionality.
Here's what you'll need:
- Cotter login form
- Private pages: pages you require users to login to access
Step 1: Add Cotter to your pages
When you have your private pages ready, you can simply copy and paste the following code block to the <head>
section of your custom code:
<script src="https://unpkg.com/[email protected]/dist/cotter.loader.js"
type="text/javascript"
data-cotter-api-key-id="<your-api-key-id>">
</script>
You should have something like this on Webflow:

Please note that you will have a different value in data-cotter-api-key-id
.
Step 2: Configure your site on Cotter's dashboard
Head to Cotter's developer dashboard then go to Projects > Protected Pages. Then set it to however you'd like. You might have different slugs. Here's an example configuration:

A brief explanation on the configuration above:
- This configuration sets everything that starts with
/blog
and/profile
(such ascotterapp.webflow.io/blog
andcotterapp.webflow.io/protected
) to be protected. It means visitors that are not logged in will be redirected to/login-page
. - Please note that this protection does not mean that your data in
/blog
or/private
path will be protected, so it is not recommended to store sensitive content within these paths.
That's it 🎉
You have successfully added a layer of protection on your content! You can save your changes and see that your /blog
and /profile
pages are protected by Cotter.