Guides & tutorials
Guides & tutorials
Social login is a solid solution to onboard users with just one click. Several researches have proved that users are annoyed by most signup and login flows, given the increasing number of accounts they have to keep, as well as the length of most online forms.
In this context, social login is a fast and secure solution to log users in and reduce friction to the fullest. Today we're showing you how to build a standard social login form for your PrestaShop site. Follow these steps and get your social login for PrestaShop without coding.
First, remember to get the Arengu module from Arengu's GitHub. Then, in your PrestaShop account, go to Improve > Modules and upload the Arengu addon.
To build a form, select one of the predefined templates or select Blank Form if you prefer to build it from a white canvas. Keep in mind every template is editable, so you can completely personalize the form and align it with your goals. In this case, we will select the Login Form and add some extra details.
When you use the Login Form template, you will get two fields and one CTA: email, password and the submit button. In this case, you just need to add the social login button with your preferred social providers.
Configure the social login button by adding the Client ID (that you can find under settings in your social provider account) and the Scopes. Keep in mind setting the Scopes is optional — when not configured, you will get basic data by default.
In the Forms editor, click on Flows on the vertical menu at the right side of your screen. There you will see an overview of your form and the flows that are connected to it in each stage.
To start editing your flow, click on the right side of the flow and it will open in a new tab so you can edit it.
Templates come with predetermined fields, but also with predetermined logic. In this case, we will change the login flow to adapt it to the social login. This is how your flow should look like:
Now, keep in mind you can completely personalize the logic of your flows, and this is just an example. You can combine this flow with additional validation or integration flows and adapt your onboarding to your business rules.
These are the actions we will add to this flow:
Add the base URL of your PrestaShop site, paste your secret API key, and then add the reference {{input.body.social.profile.email}} under the field email. All the data obtained from the social login will be gathered under the fieldID of the social login button (in this case, we used social) and under the property profile.
These native actions return an URL with an authentication token so users can be automatically signed in. Keep in mind you can also send this URL via email to the user if you want.
To start using your form, go to the Forms editor and click on the Embed tab. Here you will find all the sharing options. Simply copy these two lines of code and paste them in your PrestaShop site.
If you wish to edit any detail, keep in mind you won't have to deploy the changes. Simply modify everything you need and the form will be automatically modified, in every site where it is embedded.
Do you want to create your signup form for PrestaShop now? Register for free and start building your own personalized social login forms and embed them in PrestaShop.