Social login has become a popular login system, since it reduces friction for the user, eliminates passwords, and can boost conversion rates. Signing in via social media accounts (such as Facebook, Google, LinkedIn, and so forth) has many benefits for your forms, your metrics and your users.
Social login presents multiple advantages, and that is why this is one of our latest features. Here's how you can implement it with Arengu!
How to add social login with Arengu
1. Create a form
Open Arengu and just click on Create form. You can use any of the use case templates if they meet your needs, or start from scratch for a completely personalized form.
2. Add the social login field
Drag the social login field to the form and drop it where you prefer. Just afterwards, you will be displayed with a settings menu. Here, you can select the social media provider and arrange its settings. It is mandatory to add Client ID and select the permissions the users have to grant.
3. Setup on Facebook
To get the keys, you just have to go to your developer account on the social media provider you chose. For instance, if you have chosen to add a social login with Facebook, go to https://developers.facebook.com/apps. Click on Add a new app, and then go to Settings. On this tab, you will find your App ID. Just copy paste it on the settings fields on Arengu, and your social login will be ready to work properly. Keep in mind the App ID is a public key and visible in your website, so you don't have to worry about sharing it with third-parties.
On App Domains, you'll have to have to include all the sites where your social login is implemented.
In order for your social login to work properly, the option Web OAuth Login has to be enabled. This option is enabled by default.
Lastly, if you don't wish to use your personal Facebook account to set up your social login, you can use test users offered by Facebook.
4. Personalize the rest of the form
Arengu allows you to personalize your forms to the fullest. Even if a social login allows users to register or log in to your site, you can also add additional steps and logic to the form.
Just click on Add new step on the Forms sections to keep on adding fields to your forms.
When you're done creating your form, you can also add logic to it. Go to Flows and add any actions you need to complement your registration form.
You can use the native actions or build one of your own with an HTTP request. After building the flow that goes behind your registration form, go to Forms > Flows and connect the flows you built to the stages of the form. This way, right after a user signs up with a social provider, different actions can be executed according to the logic you've built yourself.
5. Embed your form wherever you need
When your smart form with social login is ready to fly, you can embed it into your website with just two lines of code. Good news — you can use Arengu's forms regardless of the stack you use!
How does social login work?
Social login is a sign-in or sign-up process that takes pre-existing information, located in a certain social network, to access a website or an app. This method allows users to access your web or app with their social media credentials, without having to create a different account.
To do so, the social login process follows these steps:
- To create a social login, first you need a registration form. In your form, you can add fields for a registration via email and some extra social login buttons (such as Facebook, Google, LinkedIn, GitHub, Twitter, and many more).
- After clicking on the social login call to action, the user will be prompted with a permission dialog. This dialog may be displayed as a new tab on the browser (the user is redirected to a new page and accepts the terms there) or as a pop-up on the same browser tab (the user stays on the same page and accepts the terms without leaving the page).
The permission dialog is crucial so the user can accept the terms and conditions and actively accept to share their social data with the new registration site.
It is also significant to choose where to place the permissions dialog. Adding it in a new tab adds some extra redirections that may add friction for the user, as well as technical complexities for the development of the form.
- Once the user accepts to share all the necessary data, an access token will be generated and sent to the selected social media platform.
- Here, the access token will be accepted or rejected. Afterwards, the token will be sent (carrying all pertinent information) from the social media to the browser where the user was initially navigating. When approved, the user will be automatically authenticated.
- Once the user has been authenticated, they will be redirected to a determined URL.
7 benefits of adding social login with Arengu
Social login has tons of benefits. You just have to think in your own experience as a user to realize it is a rather smooth process in a world loaded with registration forms. Social signup and login implementation will help you boost your conversion rates, but there's even more! Take a look at the benefits of having a social login button and learn what perks you can benefit from by using Arengu.
1. Better conversion rates: Less friction boosts your numbers
Social login or social signup allows registration with just one click. One-click signup or one-click login speed up any registration process, which leads to better conversion rates. Social login is one of the main best practices when it comes to click rate optimization (CRO). If you are trying to improve your rates, you definitely should go for social login implementation in your forms.
Let's take a look at some social login statistics:
According to CXL, 77 % of users believe social login is a good registration solution, and 86% of users are annoyed by having to create additional accounts.
2. Data verification: Get real users
With social login implementation, you can be sure you're getting real users, instead of bots or spam accounts. Email verification is implied in a social login process, therefore you will be automatically adding an extra layer of security.
Data verification is crucial to any lead acquisition site, e-commerce, and practically any digital business you can think of. Verifying your users' identity helps you clean up your metrics (get rid of invalid leads, for instance) and adds an extra layer of security to the whole process (getting rid of spam accounts or bots, for example).
3. Data enrichment: Get useful information for your business
With a social login system, you can benefit from the social media itself. Either if you choose Facebook, Google or LinkedIn social login, you can enrich your user's profile with the information incoming from the chosen network.
Logging in with a social network will complement your user's information with their pre-existing information coming from their social network. This will add interesting data to your database, such as interests, age, gender, date of birth, location, etc. Depending on what kind of business you run, you can choose which data is required.
4. Flows customization: Create made-to-measure registration forms
With Arengu, you can completely personalize the logic behind every step of the form. Not only can you easily add a social signup or login to your registration forms, but you can also customize the rest of the registration process.
You can add any extra step to your forms to get a completely personalized form (with its flows).
5. Dynamic redirects: Automatically redirect users after social login
One of the trickiest aspects of social login (from a technical point of view) is the redirection from the social form to a certain page. While most of the social login implementation systems imply a manual selection for your redirects, with Arengu this has become an automatic process.
Forget about choosing manually every single page for the access token authorization. This manual process is time consuming and opens the possibility of human mistakes, resulting in a lot of friction and frustration for the user. With Arengu, you can create user-specific redirects after they log in. Add dynamic redirects to your social login system and save valuable developing time.
6. Implement social login without code
Arengu is a low-code tool that allows you to build any kind of form and its logic without coding skills. If you're looking to save development resources, Arengu can help you build your forms, including social sign up or social login, with no code.
To do so, you just have to use the drag-and-drop editor. On the fields sections, you will find the social login buttons, that you can easily drag and drop on your form, having a preview of how your form looks.
After placing your social login buttons, you just have to properly fill in the settings sections: you will need the app ID, and the scope parameter. You will find both keys on the social media provider settings. As for the scope parameter, this will allow you to select what permissions will have to be granted in order to access certain data.
7. Add your social buttons anywhere: Social login in PHP, Angular, React Native, WordPress...
Arengu is the perfect tool if you don't have coding skills. Yet, if you are a developer, you will be glad to know Arengu's social login (and any other form feature) can be embedded into any website, regardless of the programming language or framework you're using. Even if you want to add social signup and login in a WordPress page, you can do so by using Arengu.
If you're searching for a social login in PHP, Angular, React Native, JS, HTML, CSS or even for WordPress, you can easily create it by using Arengu. Just create your form with the social login button and settings on it. After it is created, you can just embed it wherever you need it, with two lines of code.
If you want to see it for yourself, don't hesitate and try Arengu for free!