Framer Plugin
New! Install the native Gately Framer Plugin for the easiest integration experience.
Getting Started
1
Install the Gately Plugin
Open the Gately Framer plugin from your Gately dashboard or search for “Gately” in Framer’s plugin marketplace.
2
Add Components
Browse available components in the plugin and drag any component directly onto your Framer canvas.
3
Configure
Select the component and configure its properties in the right panel.
Available Components
Gately provides 25+ ready-to-use Framer components. Open the Gately plugin in Framer to browse and add them to your pages.Authentication Components
User Management Components
Content Protection Components
Engagement Components
Payment & Billing Components
E-commerce Components
How to Use Components
Method 1: Gately Plugin (Recommended)
- Open your Framer project
- Click Plugins in the toolbar
- Search for and open Gately
- Browse components and click to add them to your canvas
- Configure component properties in the right panel
Method 2: Copy Component Link
- Copy the component link from the table above
- In Framer, press
Cmd/Ctrl + Vto paste - The component will be added to your project
- Configure properties as needed
Setup Requirements
Before using components, ensure your Framer site has the Gately SDK installed:- In Framer, go to Site Settings > General > Custom Code
- Add to the
<head>section:
Replace
YOUR_PROJECT_ID with your actual project ID from the Gately dashboard.Component Configuration
Each component has configurable properties:Common Properties
Authentication Components
Content Protection
Protected Pages
Use the Content Protection component to protect entire pages:- Add the Content Protection component to your page
- Set the protection type (logged in, specific plan, etc.)
- Configure the fallback behavior
Best Practices
Always Test Authentication Flow
Always Test Authentication Flow
Test login, signup, and logout flows before publishing your site.
Configure Redirect URLs
Configure Redirect URLs
Set appropriate redirect URLs for post-authentication navigation.
Match Your Brand
Match Your Brand
Customize component colors and styling to match your site design.
Handle Edge Cases
Handle Edge Cases
Consider what happens when users are logged out or on wrong plans.
Troubleshooting
Components not working
Components not working
- Verify the SDK script is in your site’s
<head>section - Check that your project ID is correct
- Ensure your domain is added in Gately dashboard
Authentication not persisting
Authentication not persisting
- Check that cookies are enabled
- Verify your site domain matches Gately settings
Styling issues
Styling issues
- Use component properties to customize appearance
- Check for CSS conflicts with your Framer styles
Need Help?
Join our Community
Get help from the Gately community on Slack
Contact Support
Reach out to our support team