🚀 Getting Started

Login Flow allows you to add authentication and access control to your Webflow website in just a few minutes. No coding knowledge required!

What you'll need:

  • A Webflow website (published)
  • Access to your Webflow project settings
  • A Login Flow account (Basic, Business, or Enterprise)

💡 Pro tip: The entire setup takes less than 5 minutes from start to finish!

📦 Installation

Follow these simple steps to install Login Flow on your Webflow site.

1

Create an Account

Sign up for Login Flow and choose the plan that fits your needs (Basic, Business, or Enterprise).

2

Add Your Site

In your Login Flow dashboard, navigate to the "Sites" section and click "Add Site". Enter your Webflow site URL.

https://yourwebsite.webflow.io
3

Copy the Script

After adding your site, Login Flow will generate a unique script for you. Click "Copy Code" to copy it to your clipboard.

<script src="https://cdn.loginflow.com/script.js" data-site-id="your-site-id"></script>
4

Add to Webflow

Now, go to your Webflow project and paste the script:

  1. Open your Webflow project
  2. Go to Project Settings (⚙️ icon in the left sidebar)
  3. Click on the "Custom Code" tab
  4. Paste the script in the "Head Code" section
  5. Click "Save Changes"
  6. Publish your site
5

Verify Connection

Back in your Login Flow dashboard, click "Check Connection" to verify that the script was installed correctly. You should see a green checkmark ✓ if everything is working!

Adding Your Site

You can manage multiple Webflow sites from a single Login Flow account.

Site URL Format

Your site URL should be one of these formats:

  • • yoursite.webflow.io
  • • www.yourdomain.com
  • • yourdomain.com

⚠️ Important: Make sure your site is published before adding it to Login Flow. The script needs to be live to work correctly.

Protecting Pages

Once your site is connected, you can start protecting specific pages.

How to Protect a Page

  1. Go to your site in the Login Flow dashboard
  2. Click "+ Protect pages"
  3. Enter the page path you want to protect (e.g., /members-only)
  4. Click "Add Rule"
  5. The page is now protected! Only logged-in users can access it.

Page Path Examples

/dashboard

Protects: yoursite.com/dashboard

/account/settings

Protects: yoursite.com/account/settings

💡 Important: You need to use the exact page path as configured in Webflow. For example, /members/dashboard to protect the specific members dashboard page.

🔑 Setting Up Your Login Page

To enable Login Flow authentication, you need to configure your Webflow login form with specific attributes.

⚠️ Important: Your login page in Webflow must be named "Login" and have the route path set to /login. This is required for Login Flow to work correctly.

Required Form Elements

Your login form must include the following elements with specific custom attributes:

1. Email Input Field

Add this custom attribute to your email input:

Name:login-flow-email
Value:email

2. Password Input Field

Add this custom attribute to your password input:

Name:login-flow-password
Value:password

3. Login Button

Add this ID to your login submit button:

ID:btn-login

4. Logout Button

Add this ID to your logout button (on protected pages):

ID:btn-logout

The logout button will automatically redirect users to your login page.

How to Add Custom Attributes in Webflow

  1. Select the element in your Webflow designer
  2. Open the Element Settings panel (press D or click the gear icon)
  3. Scroll down to "Custom Attributes"
  4. Click "+ Add Custom Attribute"
  5. Enter the Name and Value exactly as shown above
  6. Repeat for each required element

⚠️ Important: These attributes are case-sensitive and must match exactly. Make sure there are no extra spaces or typos.

Managing Users

Control who can access your protected pages by managing your users.

Adding Users

  1. Navigate to the "Users" section in your dashboard
  2. Click "+ Add User"
  3. Enter the user's name, email, and password
  4. Assign them to the appropriate site
  5. Click "Create User"

User Status

Active

User can log in and access protected pages

Blocked

User cannot log in or access any protected content

User Actions

Activate: Enable a blocked user to access protected pages

Block: Temporarily prevent a user from accessing protected pages

Delete: Permanently remove a user from your system

User Limits by Plan

  • Basic: Up to 500 users
  • Business: Up to 1,000 users
  • Enterprise: Up to 5,000 users

Testing Connection

Always verify that your Login Flow script is working correctly.

How to Test

  1. Go to your site in the Login Flow dashboard
  2. Click "Check Connection"
  3. Wait for the system to verify the script
  4. You'll see either a green ✓ (connected) or red ✗ (not connected)
✓
Connected

Your script is installed correctly and Login Flow is working on your site!

✗
Not Connected

The script is not detected. Check the troubleshooting section below.

🔧 Troubleshooting

Common issues and how to fix them.

❌ Connection Check Fails

Problem: The "Check Connection" button shows a red ✗

Solutions:

  • Make sure you published your Webflow site after adding the script
  • Verify the script is in the "Head Code" section, not "Footer Code"
  • Check that you copied the complete script (no missing characters)
  • Wait 2-3 minutes after publishing, then try again
  • Clear your browser cache and try again

⚠️ Protected Pages Not Working

Problem: Users can still access protected pages without logging in

Solutions:

  • Verify the connection is working (green ✓)
  • Check that you entered the correct page path (case-sensitive)
  • Make sure the page path starts with / (e.g., /members not members)
  • Republish your Webflow site after adding protection rules
  • Try accessing the page in incognito/private mode

🔐 Users Can't Log In

Problem: Valid users are getting login errors

Solutions:

  • Check that the user status is "Active" not "Blocked"
  • Verify the user is assigned to the correct site
  • Make sure the user is entering the correct email and password
  • Try resetting the user's password from the dashboard
  • Check your plan's user limit (you may have reached the maximum)

🐌 Slow Loading Times

Problem: Protected pages take too long to load

Solutions:

  • Our script is optimized and loads asynchronously
  • Check your Webflow site's overall performance
  • Reduce the number of custom scripts on your site
  • Consider upgrading your Webflow hosting plan
  • Contact our support if the issue persists

❓ Frequently Asked Questions

Can I protect multiple sites with one account?

Yes! All plans support multiple sites. You can add and manage as many Webflow sites as you need from a single Login Flow dashboard.

What happens if I exceed my user limit?

When you reach your plan's user limit, you won't be able to add new users until you either delete existing users or upgrade to a higher plan. Existing users will continue to work normally.

Can users reset their own passwords?

Yes! Login Flow includes a built-in password reset feature. Users can request a password reset link via email, which they can use to set a new password.

Does Login Flow work with custom domains?

Absolutely! Login Flow works with both Webflow subdomains (yoursite.webflow.io) and custom domains (www.yoursite.com). Just add your domain to the dashboard after setting it up in Webflow.

Is my data secure?

Yes! We use industry-standard encryption for all passwords and sensitive data. All communications between your site and Login Flow are encrypted with SSL/TLS. We never store passwords in plain text.

Can I customize the login page design?

Business and Enterprise plans include custom branding options where you can customize colors, logos, and styling to match your brand. Basic plan uses our default login interface.

What if I need help?

We're here to help! Contact us at:

  • • Email: support@loginflow.com
  • • Basic plan: Email support (24-48h response)
  • • Business plan: Priority support (12-24h response)
  • • Enterprise plan: 24/7 dedicated support

Can I downgrade or cancel anytime?

Yes! You can upgrade, downgrade, or cancel your subscription at any time from your account settings. If you downgrade, you'll keep your current features until the end of your billing period.

Still need help?

Our support team is ready to assist you with any questions or issues.

Contact Support