Framer Integration Build beautiful authentication flows and user management directly in Framer with Gately’s powerful components and APIs.

No-code authentication

Visual authentication flows without coding

Customizable components

Match your brand with flexible styling

User management

Complete user profiles and plans

​
Quick Start

Get started with Gately in Framer in just 3 simple steps:
1

Get Your Embed Code

Copy your personalized embed script from the Gately dashboard.
2

Add to Framer

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

Publish & Test

Publish your site and test the authentication flow.

​
What You Get

Once you add Gately to your Framer 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 Framer 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

​
Setup Instructions

​
Step 1: Get Your Embed Script

  1. Go to https://app.usegately.com/dashboard/settings/installation
  2. Select Framer as your platform
  3. Copy the generated embed script
The script will automatically include your project ID and domain settings.

​
Step 2: Add Script to Framer

  1. In Framer, go to 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 slug are automatically configured based on your Framer site settings.

​
How It Works

Once you add the embed script to your Framer 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 Framer 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

​
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