Webflow Integration

Integrate Gately with your Webflow site to add user authentication, protected content, and member management.

Quick Setup

Add the SDK

In Webflow, go to Project Settings > Custom Code and add to the Head Code:

<script 
  src="https://cdn.usegately.com/gately.min.js" 
  data-project-id="YOUR_PROJECT_ID"
  defer
></script>

Add Custom Attributes

Use Webflow’s custom attributes to mark protected content.

Add Footer Scripts

Add interaction scripts to the Footer Code section.

HTML Structure

Create a form in Webflow with these elements:

Email input with ID login-email
Password input with ID login-password
Submit button with ID login-submit
Error message div with ID login-error

JavaScript

Add to Footer Code:

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('login-form');
  const emailInput = document.getElementById('login-email');
  const passwordInput = document.getElementById('login-password');
  const submitBtn = document.getElementById('login-submit');
  const errorDiv = document.getElementById('login-error');

  if (form) {
    form.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      submitBtn.disabled = true;
      submitBtn.textContent = 'Logging in...';
      errorDiv.style.display = 'none';

      try {
        await window.Gately.login(emailInput.value, passwordInput.value);
        window.location.href = '/dashboard';
      } catch (error) {
        errorDiv.textContent = error.message;
        errorDiv.style.display = 'block';
        submitBtn.disabled = false;
        submitBtn.textContent = 'Log In';
      }
    });
  }
});
</script>

HTML Structure

Create a form with:

Name input with ID signup-name
Email input with ID signup-email
Password input with ID signup-password
Submit button with ID signup-submit
Error message div with ID signup-error

JavaScript

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('signup-form');
  const nameInput = document.getElementById('signup-name');
  const emailInput = document.getElementById('signup-email');
  const passwordInput = document.getElementById('signup-password');
  const submitBtn = document.getElementById('signup-submit');
  const errorDiv = document.getElementById('signup-error');

  if (form) {
    form.addEventListener('submit', async function(e) {
      e.preventDefault();
      
      submitBtn.disabled = true;
      submitBtn.textContent = 'Creating account...';
      errorDiv.style.display = 'none';

      try {
        await window.Gately.signup(emailInput.value, passwordInput.value, {
          full_name: nameInput.value
        });
        window.location.href = '/dashboard';
      } catch (error) {
        errorDiv.textContent = error.message;
        errorDiv.style.display = 'block';
        submitBtn.disabled = false;
        submitBtn.textContent = 'Sign Up';
      }
    });
  }
});
</script>

Protected Content

Using Custom Attributes

In Webflow, add custom attributes to elements:

Attribute	Value	Description
`data-gately-protected`	(empty)	Requires login
`data-gately-plan`	`pro`	Requires specific plan
`data-gately-show-if`	`logged-in`	Show only if logged in
`data-gately-hide-if`	`logged-in`	Hide if logged in

JavaScript for Visibility

<script>
document.addEventListener('DOMContentLoaded', function() {
  function updateVisibility() {
    const isLoggedIn = window.Gately && window.Gately.isAuthenticated();
    const user = isLoggedIn ? window.Gately.getUser() : null;

    // Show/hide based on login status
    document.querySelectorAll('[data-gately-show-if="logged-in"]').forEach(el => {
      el.style.display = isLoggedIn ? '' : 'none';
    });

    document.querySelectorAll('[data-gately-hide-if="logged-in"]').forEach(el => {
      el.style.display = isLoggedIn ? 'none' : '';
    });

    // Protected content
    document.querySelectorAll('[data-gately-protected]').forEach(el => {
      if (!isLoggedIn) {
        el.innerHTML = '<p>Please <a href="/login">log in</a> to view this content.</p>';
      }
    });

    // Plan-based content
    document.querySelectorAll('[data-gately-plan]').forEach(el => {
      const requiredPlan = el.getAttribute('data-gately-plan');
      if (!user || user.plan_id !== requiredPlan) {
        el.innerHTML = '<p>Upgrade to ' + requiredPlan + ' to access this content.</p>';
      }
    });
  }

  // Run on load
  updateVisibility();

  // Listen for auth changes
  if (window.Gately) {
    window.Gately.onAuthStateChange(updateVisibility);
  }
});
</script>

<a href="#" id="google-login-btn" class="social-btn">
  <img src="/google-icon.svg" alt="Google" />
  Continue with Google
</a>

<script>
document.getElementById('google-login-btn').addEventListener('click', function(e) {
  e.preventDefault();
  window.Gately.loginWithGoogle({ redirectTo: '/dashboard' });
});
</script>

<a href="#" id="github-login-btn" class="social-btn">
  <img src="/github-icon.svg" alt="GitHub" />
  Continue with GitHub
</a>

<script>
document.getElementById('github-login-btn').addEventListener('click', function(e) {
  e.preventDefault();
  window.Gately.loginWithGithub({ redirectTo: '/dashboard' });
});
</script>

User Profile Display

<div id="user-profile" style="display: none;">
  <img id="user-avatar" src="" alt="Avatar" />
  <span id="user-name"></span>
  <a href="#" id="logout-btn">Log Out</a>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  function updateProfile() {
    const profileDiv = document.getElementById('user-profile');
    const user = window.Gately ? window.Gately.getUser() : null;

    if (user) {
      profileDiv.style.display = 'flex';
      document.getElementById('user-name').textContent = user.full_name || user.email;
      
      if (user.avatar_url) {
        document.getElementById('user-avatar').src = user.avatar_url;
      }
    } else {
      profileDiv.style.display = 'none';
    }
  }

  updateProfile();
  
  if (window.Gately) {
    window.Gately.onAuthStateChange(updateProfile);
  }

  document.getElementById('logout-btn').addEventListener('click', async function(e) {
    e.preventDefault();
    await window.Gately.logout();
    window.location.href = '/';
  });
});
</script>

Page Protection

Protect entire pages by adding to the page’s custom code:

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (!window.Gately || !window.Gately.isAuthenticated()) {
    window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname);
  }
});
</script>

Best Practices

Use Webflow Interactions

Combine Gately with Webflow interactions for smooth UX.

Style Error Messages

Create styled error message components in Webflow.

Loading States

Add loading animations while auth operations complete.

Mobile Responsive

Test auth flows on mobile devices.

Getting Started

Features

Platform Guides

SDK

Authentication

Users

Campaigns

Contacts

Protection

Quick Setup

HTML Structure

JavaScript

HTML Structure

JavaScript

Protected Content

Using Custom Attributes

JavaScript for Visibility

User Profile Display

Page Protection

Best Practices

​Quick Setup

​Login Form

​HTML Structure

​JavaScript

​Signup Form

​HTML Structure

​JavaScript

​Protected Content

​Using Custom Attributes

​JavaScript for Visibility

​Social Login Buttons

​Google Login

​GitHub Login

​User Profile Display

​Page Protection

​Best Practices

Quick Setup

Login Form

HTML Structure

JavaScript

Signup Form

HTML Structure

JavaScript

Protected Content

Using Custom Attributes

JavaScript for Visibility

Social Login Buttons

Google Login

GitHub Login

User Profile Display

Page Protection

Best Practices