Skip to main content

​
Webflow Integration

Add professional authentication and user management to your Webflow site with Gately’s powerful platform.

Custom Code Integration

Add Gately using Webflow’s custom code feature

Professional Forms

Replace Webflow forms with Gately’s authentication system

User Management

Complete user profiles and account management

​
Quick Start

Get started with Gately in Webflow in just 3 steps:
1

Get Your Embed Code

Copy your personalized embed script from the Gately dashboard.
2

Add to Webflow

Paste the script into your Webflow site’s custom code section.
3

Publish & Test

Publish your site and test the authentication flow.

​
Setup Instructions

​
Step 1: Get Your Embed Script

  1. Go to https://app.usegately.com/dashboard/settings/installation
  2. Select Webflow as your platform
  3. Copy the generated embed script

​
Step 2: Add Script to Webflow

  1. In Webflow, go to Project Settings → Custom Code
  2. Paste the script into the <head> section
  3. Publish your site - Gately will be active!
The dashboard generates a personalized script with your actual project details. The domain and settings are automatically configured based on your Webflow site.

​
What You Get

Once you add Gately to your Webflow site, you’ll have access to:

Authentication Forms

Professional login and signup forms that automatically appear when needed.
  • Sign Up Form
  • Sign In Form
  • Password Reset
  • Email Verification

User Management

Complete user interface for managing accounts and subscriptions.
  • User Profile
  • Account Settings
  • Membership Cards
  • Plan Selection

Form Collection

Collect and manage form submissions from your Webflow site.
  • Contact Forms
  • Lead Generation
  • File Uploads
  • Data Export

Analytics Dashboard

Track user behavior and site performance.
  • User Analytics
  • Conversion Tracking
  • Form Submissions
  • Performance Insights

​
How It Works

Once you add the embed script to your Webflow site, Gately automatically:
  • Detects authentication needs on your pages
  • Injects authentication forms where needed
  • Handles user sessions across your site
  • Provides user management features
  • Manages redirects and navigation
The script is lightweight and won’t affect your site’s performance.

​
Customization Options

You can customize the appearance and behavior through the Gately dashboard:

​
Visual Customization

  • Colors - Match your brand colors
  • Typography - Choose fonts and sizes
  • Layout - Adjust spacing and borders
  • Components - Select which features to show

​
Authentication Settings

  • Sign-up fields - Choose required information
  • Social logins - Enable Google, GitHub, etc.
  • Email verification - Configure verification flow
  • Password requirements - Set security rules

​
User Experience

  • Redirects - Set post-login destinations
  • Messages - Customize success/error text
  • Branding - Add your logo and styling
  • Mobile optimization - Responsive design settings

​
Best Practices

Design Guidelines

  • Use consistent spacing and typography
  • Implement proper error states
  • Add loading indicators for async actions
  • Ensure accessibility compliance
  • Test on multiple screen sizes

User Experience

  • Keep authentication flows simple
  • Provide clear error messages
  • Use familiar UI patterns
  • Test the complete user journey
  • Monitor user feedback

​
Testing Your Installation

After adding the script and publishing your site:
  1. Visit your published site (not the Webflow editor)
  2. Look for authentication elements - They’ll appear automatically
  3. Test the signup flow - Create a test account
  4. Check the dashboard - Verify users appear in your Gately dashboard
  5. Test on mobile - Ensure everything works on different devices

​
Troubleshooting

  • Check your project ID is correct
  • Verify internet connection
  • Ensure Webflow has access to external resources
  • Check theme settings in dashboard
  • Verify CSS property names
  • Test with default theme first
  • Verify domain is whitelisted in dashboard
  • Check browser console for errors
  • Test with different browsers
  • Test on actual devices
  • Check responsive breakpoints
  • Verify touch interactions work

​
Resources

​
Next Steps

Authentication

Learn about authentication options and customization

User Management

Set up user profiles and account management

Forms

Configure form collection and data management