Quick Start Guide: Setting Up Social Login for Elementor

Imagine making it super easy for your visitors to log in using their favorite social media accounts. Whether it’s Google, X (formerly Twitter), LinkedIn, or GitHub, Happy Social Login makes it possible. In this quick start guide, I’ll walk you through the common settings for integrating social logins on your Elementor site. Once we’ve covered the basics, you’ll find links to the provider-specific setup instructions for getting API keys from services like Google or X.

Why Add Social Login to Your Elementor Site?

Social login helps streamline the user experience by allowing visitors to log in using accounts they already have. This reduces friction, leading to:

• Faster sign-ups and logins.
• Lower bounce rates since users don’t have to go through lengthy sign-up processes.
• Higher engagement because users can log in effortlessly and are more likely to return.
• More leads as visitors don’t abandon the registration process due to time-consuming verifications.

Step 1: Install Happy Social Login Plugin

First things first, let’s install the Happy Social Login plugin.

1. Go to your WordPress Dashboard.
2. Click on Plugins > Add New.
3. In the search bar, type Happy Social Login.
4. Install and activate the plugin.

Once activated, you’ll find the Happy Social Login menu in your dashboard.

Step 2: Enable Providers (Social Media Accounts)

Now that the plugin is installed, it’s time to enable the social login providers. These are the accounts your users can log in with, like Google, LinkedIn, or X.

1. Go to Happy Social Login > Providers in your WordPress dashboard.
2. You’ll see a list of providers like Google, X, LinkedIn, GitHub, and more.
3. Enable the providers you want to offer on your site.

Each provider requires API keys to connect your website to their login system. Once a provider is enabled, you’ll see a settings form to enter the Client ID and Client Secret. Let’s move on to how to get these keys for your chosen providers.

Step 3: Set Up Provider API Keys

For each social login provider, you’ll need to create an app and get API keys. Here are the links to detailed guides for each platform:

• Google Login Setup
• X (formerly Twitter) Login Setup

Follow the respective guide to create your app, get your API keys, and return to the Happy Social Login settings to paste the Client ID and Client Secret.

Step 4: Set the Redirect URI

While setting up your app for each provider, you’ll need to provide a Redirect URI. This is the URL where users will be sent back to your site after they log in. The format will look something like this:

https://yoursite.com/sso/{provider-name}

Make sure to replace yoursite.com with your domain and {provider-name} with the provider you’re setting up (e.g., google, linkedin, etc.).

Step 5: Enable Elementor Integration

Once the providers are configured, it’s time to add the social login buttons to your Elementor page.

1. Go to Happy Social Login > Integrations.
2. Enable the Elementor integration.
3. Now, you’ll be able to see a Social Login Widget in the Elementor editor.

Step 6: Create Your Login Page

To create a login page using Elementor:

1. Add a new page in WordPress (e.g., yoursite.com/login).
2. Edit it with Elementor to launch the page builder.
3. Search for the Social Login widget in the Elementor panel.
4. Drag and drop it onto the page.
5. Customize the appearance and select which social media accounts you want to display.

Step 7: Test Your Social Login

Once your login page is set up, it’s time to test it.

1. Log out of WordPress or open an incognito window.
2. Visit your login page (e.g., yoursite.com/login).
3. Click the login button for one of the social media providers you enabled.
4. After entering your credentials, you’ll be redirected back to your site, and a new user will be created in your WordPress Users table.