Skip to main content
Gately provides a complete suite of pre-built Framer components that you can drag and drop into your projects. No code required.

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

ComponentDescription
LoginEmail/password login form
SignupNew user registration form
LogoutLogout button
Magic LinkPasswordless login via email
Password ResetReset forgotten password
Accept InviteAccept team/project invitations

​
User Management Components

ComponentDescription
Profile SettingsUpdate user profile information
Update PasswordChange account password
UserdataDisplay user profile data dynamically
Google AvatarDisplay user’s Google profile picture

​
Content Protection Components

ComponentDescription
Content ProtectionProtect pages for authenticated users
ContentLockAdvanced content locking with plan-based access

​
Forms & Engagement Components

ComponentDescription
FormEmbed Gately forms
Live ChatCustomer support chat widget
Like ButtonHeart icon with like counter
Bookmarking ButtonSave content to favorites
Bookmark ListDisplay saved bookmarks
Mark CompleteMark tasks/items as completed

​
Payment & Billing Components

ComponentDescription
SubscribeSubscription checkout button
BillingManage billing and subscriptions

​
E-commerce Components

ComponentDescription
Add to Cart ButtonAdd products to cart
Cart IconShopping cart with item count
Cart ItemsDisplay cart contents
Cart SubtotalShow cart total price
Cart OverlaySlide-out cart panel
Checkout ButtonInitiate Stripe checkout
Inventory LabelShow stock status
Quantity SelectorProduct quantity input

​
How to Use Components

  1. Open your Framer project
  2. Click Plugins in the toolbar
  3. Search for and open Gately
  4. Browse components and click to add them to your canvas
  5. Configure component properties in the right panel
  1. Copy the component link from the table above
  2. In Framer, press Cmd/Ctrl + V to paste
  3. The component will be added to your project
  4. Configure properties as needed

​
Setup Requirements

Before using components, ensure your Framer site has the Gately SDK installed:
  1. In Framer, go to Site Settings > General > Custom Code
  2. Add to the <head> section:
<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-project-id="YOUR_PROJECT_ID"
  defer
></script>
Replace YOUR_PROJECT_ID with your actual project ID from the Gately dashboard.

​
Component Configuration

Each component has configurable properties:

​
Common Properties

PropertyDescription
projectIdYour Gately project ID
themeLight or dark theme
primaryColorBrand color for buttons
borderRadiusCorner rounding

​
Authentication Components

PropertyDescription
redirectUrlWhere to redirect after auth
showSocialLoginShow Google/GitHub buttons
showRememberMeShow “Remember me” checkbox

​
Content Protection

PropertyDescription
requiredPlanPlan required for access
fallbackUrlRedirect URL for unauthorized users
showMessageShow access denied message

​
Protected Pages

Use the Content Protection component to protect entire pages:
  1. Add the Content Protection component to your page
  2. Set the protection type (logged in, specific plan, etc.)
  3. Configure the fallback behavior
Or use ContentLock for granular content control: 
// Wrap specific content sections
<ContentLock type="plans" requiredPlan="pro">
  <PremiumContent />
</ContentLock>

​
Best Practices

Test login, signup, and logout flows before publishing your site.
Set appropriate redirect URLs for post-authentication navigation.
Customize component colors and styling to match your site design.
Consider what happens when users are logged out or on wrong plans.

​
Troubleshooting

  • 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
  • Check that cookies are enabled
  • Verify your site domain matches Gately settings
  • 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