Social Login for ClickFunnels 2.0

Add Google, Facebook, Microsoft, and Email login buttons to your ClickFunnels pages. When visitors click a social login button, they'll authenticate and automatically be logged into your ClickFunnels Customer Center via SSO.

Overview

The Social Login widget provides:

• Social OAuth buttons - Google, Facebook, Microsoft authentication
• Login with Email button - Redirects to your Customer Center sign-in page
• Automatic SSO - Users are logged into ClickFunnels after authentication
• Contact creation - Optionally add users as contacts in ClickFunnels

Flow Diagram

Visitor clicks "Sign in with Google" (or other provider)
    ↓
OAuth popup opens → Visitor authenticates
    ↓
ExtensionLogin creates contact in ClickFunnels (optional)
    ↓
Visitor is redirected to ClickFunnels SSO
    ↓
Visitor is now logged into your ClickFunnels Customer Center

Alternative Flow - Login with Email

Visitor clicks "Login with Email"
    ↓
Visitor is redirected to your Customer Center sign-in page
    ↓
Visitor logs in with their email/password
    ↓
Visitor is now logged into your ClickFunnels Customer Center

Prerequisites

Before you begin, make sure you have:

• A ClickFunnels 2.0 account with SSO enabled
• A Customer Center domain configured in ClickFunnels (required)
• OAuth apps on Google, Facebook, or Microsoft (optional - only needed for social login)

Step 1: Get ClickFunnels SSO Secret

1.1 Navigate to SSO Settings

1. Log into your ClickFunnels Customer Center: https://YOUR-WORKSPACE.myclickfunnels.com
2. Click on Site in the left sidebar
3. Go to Customer Center
4. Click on Single Sign-on

1.2 Enable SSO and Copy Secret

1. Enable SSO if not already enabled
2. Copy the SSO Secret Key - you'll need this in the next step
3. Note your Workspace Subdomain (e.g., mycompany from mycompany.myclickfunnels.com)

Important

Keep your SSO Secret secure. Never share it publicly.

1.3 Get Your Customer Center Domain

The Customer Center Domain is required for the Social Login widget. It's used for:

• SSO redirects
• The "Login with Email" button URL

To find your Customer Center Domain:

1. Go to Site → Customer Center → Domains
2. Copy your custom domain (e.g., members.yoursite.com)
3. If you don't have a custom domain, you can use the default: YOUR-WORKSPACE.myclickfunnels.com

1.4 (Optional) Get API Key for Contact Creation

If you want visitors to be automatically added as contacts in ClickFunnels:

1. Go to Settings → API
2. Create a new API token with Contacts permissions
3. Copy the API token
4. Note your Workspace ID (visible in the URL or API settings)

Step 2: Create a Social Login App

2.1 Log into ExtensionLogin Dashboard

Go to app.extensionlogin.com and log in.

2.2 Create New Social Login App

1. Navigate to Social Logins in the sidebar

2. Click Create New Social Login

3. Fill in the details:

   • Name: A friendly name (e.g., "My Course Login")
   • ClickFunnels Workspace: Your workspace subdomain (e.g., mycompany)
   • Customer Center Domain: Your Customer Center domain (e.g., members.yoursite.com) - Required
   • SSO Secret: Paste the secret from Step 1.2
   • Workspace ID: (Optional) For contact creation
   • API Key: (Optional) For contact creation

4. Select which Providers to enable:

   • Google
   • Facebook
   • Microsoft

5. Click Create

TIP

The "Login with Email" button is automatically generated using your Customer Center Domain. The URL will be: https://YOUR-CUSTOMER-CENTER-DOMAIN/contacts/sign_in

2.3 Note Your App ID

After creation, you'll see your App ID (format: sla_xxxxxxxxxxxxxxxx). You'll need this for the embed code.

Step 3: Configure OAuth Providers

For each provider you want to enable, you need to create an OAuth application and add the credentials to ExtensionLogin.

INFO

If you only want to use the "Login with Email" button, you can skip this step entirely. The email login button works without any OAuth configuration.

Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project or select an existing one
3. Enable the People API
4. Go to APIs & Services → OAuth consent screen
   • Select External user type
   • Add scopes: email, profile, openid
5. Go to APIs & Services → Credentials
   • Click Create Credentials → OAuth client ID
   • Select Web application
6. Add the following Authorized redirect URI:

   https://api.extensionlogin.com/v1/sso/YOUR_APP_ID/auth/google/callback

   Replace YOUR_APP_ID with your actual app ID
7. Copy the Client ID and Client Secret
8. In ExtensionLogin dashboard, click Configure Google and paste the credentials

Facebook OAuth Setup

1. Go to Facebook Developers
2. Create a new app (Consumer type)
3. Add Facebook Login product
4. Go to Facebook Login → Settings and configure:
   • Client OAuth Login: YES
   • Web OAuth Login: YES
   • Enforce HTTPS: YES
5. Add Valid OAuth Redirect URI:

   https://api.extensionlogin.com/v1/sso/YOUR_APP_ID/auth/facebook/callback

6. Go to Settings → Basic:
   • Add App Domain: extensionlogin.com
   • Add Privacy Policy URL
7. Copy the App ID and App Secret
8. In ExtensionLogin dashboard, click Configure Facebook and paste the credentials
9. Switch app from Development to Live mode

Microsoft OAuth Setup

1. Go to Azure Portal
2. Navigate to Azure Active Directory → App registrations
3. Click New registration:
   • Name: Your app name
   • Supported account types: Accounts in any organizational directory and personal Microsoft accounts
4. Add Redirect URI (Web):

   https://api.extensionlogin.com/v1/sso/YOUR_APP_ID/auth/microsoft/callback

5. Go to Certificates & secrets → Create a new client secret
6. Go to API permissions → Add: email, openid, profile, User.Read
7. Copy the Application (client) ID and Client Secret
8. In ExtensionLogin dashboard, click Configure Microsoft and paste the credentials

Step 4: Embed on ClickFunnels Page

4.1 Get Embed Code

1. In ExtensionLogin dashboard, go to your Social Login app
2. Click Embed Code
3. Copy the embed code

4.2 Add to ClickFunnels Page

1. Open your ClickFunnels page editor
2. Add a Custom HTML/JS element (or use the code embed feature)
3. Paste the embed code
4. Save and publish your page

Example Embed Code

<!-- ExtensionLogin Social Login Widget -->
<div id="el-social-login"></div>
<script src="https://app.extensionlogin.com/social-login.min.js?v=1.0.2"
        data-app-id="sla_your_app_id"
        data-theme="light"
        data-providers="google,facebook,microsoft"
        data-email-login-url="https://members.yoursite.com/contacts/sign_in">
</script>

Customization Options

Attribute	Values	Description
data-theme	light, dark	Button color theme
data-providers	google, facebook, microsoft	Comma-separated list of providers to show
data-button-style	standard, outline, minimal	Button appearance
data-show-labels	true, false	Show/hide "Continue with..." text
data-email-login-url	URL	"Login with Email" button URL (auto-generated)

Example with Customization

<div id="el-social-login"></div>
<script src="https://app.extensionlogin.com/social-login.min.js?v=1.0.2"
        data-app-id="sla_your_app_id"
        data-theme="dark"
        data-providers="google,microsoft"
        data-button-style="outline"
        data-show-labels="true"
        data-email-login-url="https://members.yoursite.com/contacts/sign_in">
</script>

Login with Email Button

The Social Login widget automatically includes a "Login with Email" button that redirects visitors to your ClickFunnels Customer Center sign-in page.

How It Works

1. When you create a Social Login app, you provide your Customer Center Domain
2. The system automatically generates the email login URL: https://YOUR-DOMAIN/contacts/sign_in
3. The widget displays a "Login with Email" button below the social login buttons
4. When clicked, visitors are redirected to your Customer Center sign-in page

Widget Display

The widget will display:

• Social login buttons (Google, Facebook, Microsoft) - based on configured providers
• An "or" divider
• A "Login with Email" button

┌─────────────────────────────────┐
│   [G] Continue with Google      │
├─────────────────────────────────┤
│   [f] Continue with Facebook    │
├─────────────────────────────────┤
│   [⊞] Continue with Microsoft   │
├─────────────────────────────────┤
│            ── or ──             │
├─────────────────────────────────┤
│   [✉] Login with Email          │
└─────────────────────────────────┘

Email-Only Login

If you don't want to configure OAuth providers and only want the "Login with Email" button:

1. Create a Social Login app with just the required fields:
   • Name
   • Workspace Subdomain
   • Customer Center Domain
   • SSO Secret
2. Don't enable any OAuth providers
3. The widget will only show the "Login with Email" button

Optional: ClickFunnels Contact Integration

If you configured the ClickFunnels API Key, visitors will automatically be added as contacts when they log in via OAuth.

Tag Configuration

To automatically tag new contacts:

1. In ExtensionLogin dashboard, edit your Social Login app
2. Scroll to ClickFunnels Tags
3. Enter the Tag IDs you want to apply (get these from ClickFunnels → Contacts → Tags)
4. Save

INFO

Contact creation only works for OAuth logins (Google, Facebook, Microsoft), not for "Login with Email" since that redirects directly to ClickFunnels.

Troubleshooting

"Popup Blocked" Error

Solution: Users need to allow popups for your ClickFunnels domain, or click the login button again after unblocking.

"Invalid redirect URI" Error

Cause: The OAuth redirect URI doesn't match what's configured in the provider.

Solution:

1. Make sure the redirect URI in your OAuth provider settings exactly matches:

   https://api.extensionlogin.com/v1/sso/YOUR_APP_ID/auth/PROVIDER/callback

2. Replace YOUR_APP_ID with your actual app ID
3. Replace PROVIDER with google, facebook, or microsoft

"Configuration Error"

Cause: OAuth credentials not configured or invalid.

Solution:

1. Check that you've added the Client ID and Client Secret for the provider
2. Verify the credentials are correct (no extra spaces)
3. Make sure the OAuth app is not in sandbox/development mode (Facebook)

Facebook: "App Not Active"

Solution: Switch your Facebook app from Development to Live mode in the developer console.

"Login with Email" Button Not Showing

Cause: Customer Center Domain not configured.

Solution:

1. Edit your Social Login app in the dashboard
2. Add your Customer Center Domain (e.g., members.yoursite.com)
3. Save the app
4. Get the new embed code and update your page

Widget Icons Not Displaying

Cause: Browser caching old version of the widget.

Solution:

1. Get the latest embed code from the dashboard (includes version parameter)
2. Or add ?v=1.0.2 to the script URL
3. Or hard refresh the page (Ctrl+Shift+R / Cmd+Shift+R)

SSO Not Working

Cause: SSO secret is incorrect or SSO is not enabled in ClickFunnels.

Solution:

1. Verify SSO is enabled in ClickFunnels Customer Center settings
2. Re-copy the SSO secret and update it in ExtensionLogin
3. Make sure the workspace subdomain is correct

Quick Reference

OAuth Redirect URIs

Copy these for your OAuth provider configurations:

Google:

https://api.extensionlogin.com/v1/sso/YOUR_APP_ID/auth/google/callback

Facebook:

https://api.extensionlogin.com/v1/sso/YOUR_APP_ID/auth/facebook/callback

Microsoft:

https://api.extensionlogin.com/v1/sso/YOUR_APP_ID/auth/microsoft/callback

Replace YOUR_APP_ID with your actual Social Login App ID.

Required Fields

Field	Required	Description
Name	Yes	Friendly name for your app
Workspace Subdomain	Yes	Your ClickFunnels Customer Center (e.g., mycompany)
Customer Center Domain	Yes	Your Customer Center domain (e.g., members.yoursite.com)
SSO Secret	Yes	From ClickFunnels SSO settings
Workspace ID	No	For contact creation
API Key	No	For contact creation
Tag IDs	No	For auto-tagging contacts