Guide for Magento 2 WhatsApp Login

Magento 2 WhatsApp Login extension allows users to register and log in to their Magento 2 store accounts with their Whatsapp numbers.

The guest users can register as a customer using their registered WhatsApp number and create an account within the Magento 2 website.

The customers will also be able to change their WhatsApp number as required under their account panel.

Check the below mentioned video for an overview about the the extension and its working:

• The admin can enable/disable the module from the admin panel.
• Customer can register their account with their Whatsapp number.
• Already registered customers can log in to their accounts with the same Whatsapp number.
• Customer can change their Whatsapp number.
• If customers register with their mobile number then the default email and password will generate.
• Customers can change their Email ID and password after registering with a WhatsApp number.

#1 Download Module

Firstly, you need to log in to Webkul Store, go to My Account>My Purchased Products section, verify and then download and extract the contents of this zip folder on the system.

#2 Upload Folder

Once the module zip is extracted, follow path src>app and then copy the app folder into the Adobe Commerce Cloud root directory on the server as shown below:

#3 Run Commands

After uploading the module folder, you need to run the following commands in the Magento 2 root directory:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy

php bin/magento indexer:reindex

php bin/magento cache:flush

For translating the module language, navigate through src/app/code/Webkul/WhatsAppLogin/i18n and edit the en_US.csv file. Thereafter, rename the CSV as “en_SA.csv” and translate all right side content after the comma in the Arabic language. After editing the CSV, save it.

Now, upload it to the path src/app/code/Webkul/WhatsAppLogin/i18n where the installation of Magento 2 is on the server. The module gets translated into the Arabic Language. It supports both RTL and LTR languages.

The user can edit the CSV like the image below.

The user has to first create a Facebook Meta account and log in to the Meta dashboard and click to Create App as shown in the screenshot.

Now, the admin needs to select the Other option and click on the Next button.

Then click on the Business option to proceed further and click on the Next button.

Here the admin need to enter an app name and click on Create app button.

The admin needs to click on the Set up button for WhatsApp.

Now admin needs to click on WhatsApp> API Setup. And copy the access token and Phone number. ID.

After verifying your number through WhatsApp, Admin needs to click on App Dashboard from the header and select WhatsApp Manager.

A new page will open then go to Overview>Message templates.

Click on Create Template button to create a new template.

Now select the category, enter the template name and select the language then click to continue.

After that select the Header that is optional, enter the Body and Footer then click to submit button.

Here admin needs to confirm the language.

Now the template will be added to the Message template list.

The admin will navigate through Stores>Configuration>WhatsApp Login to make a general configuration.

Here, the admin will –

• Enable the module functionality by choosing a YES option else disable the same by choosing a No.
• Enter the Access token received via the Facebook Meta account.
• Enter the phone number ID received from the Facebook Meta account.
• Enter the template name that was created at the Facebook Meta Account.

Lastly, the admin will save the configuration by tapping the Save Config button at the top right-hand corner.

You can also check the Magento 2 Firebase OTP login extension, which allows you to verify the customers before signing in or Signing up using Firebase OTP within your Magento 2 store.

On the Magento 2 storefront, the user if not already registered will tap the Create an Account link in the header of the website, and that brings up the Create an Account section.

Here, the users will see the option to register on the Magento 2 store using WhatsApp. Tapping the Register with WhatsApp button brings up the pop-up to enter the details for the registration process.

Here, the user will choose his country code and enter the phone number on which WhatsApp is registered. After that, the user needs to tap on the send OTP button.

Note: The phone number that the user enters should be registered on WhatsApp to receive the OTP for validation.

The OTP will be received on the user’s WhatsApp number. The user needs to enter the OTP and tap on the Verify OTP and Proceed button after that. If the OTP is not received the user can tap on the Resend OTP link.

Now the user registers on the Magento 2 store as a customer. The email id registers using the mobile number and the initial password will be the phone number with the country code.

After registering, the user can edit his email address, password, and user name by editing the respective information under the account information section. Here, the user can also change his WhatsApp number as required.

Note: The default first name would be WhatsApp and the last name of the customer as Customer.

If the customer now wants to change his WhatsApp number, enter the new WhatsApp number and get an OPT to register the same with your account.

On the login page, the users will see the Signin With WhatsApp button.

Tapping on the Sign In With WhatsApp brings up the below section. Here, enter your registered WhatsApp number using which you had registered previously.

Then tap the send OTP button to receive the OPT for authentication.

Enter the received OTP and tap Verify OTP and Proceed button to log in to your Magento 2 customer account panel.

If the user is not Signed in and tries to checkout, then the user will find the option to sign in to his account using WhatsApp at the checkout page.

Tapping on Sign in With WhatsApp brings up the pop-up as shown below in the snapshot. Tap Send OTP to receive the OTP to login in if you already have created the account using your WhatsApp number.

Now, enter the OTP and verify to proceed further to place the order.

Thereafter the customer can see the checkout page to proceed further.

Also, if the user is not registered within the store using the WhatsApp number, then the user can register at the checkout time as well. After that, the user can proceed further to place the order.

After adding the products to the cart, the customer can navigate to checkout.

The customer will tap the Proceed to Checkout button to go to the checkout page. On the checkout page, the customer will check his shipping address and select the shipping method and tap the next button.

After tapping the next button, the customer will tap the place order button. This brings up a pop-up where the customer needs to enter the OTP received on his WhatsApp number.

After entering the OTP tap Verify OTP and Proceed.

After verifying the OTP you can see the details like shown In the image below.

Lastly, the order will get placed after WhatsApp OTP verification & Validation.

The admin can navigate to the customer’s section in the default Magento 2 backend. Navigate through Customers->All Customers.

Apart from that, if the admin edits a customer and goes to his Account Information section, there as well the admin can see the customer’s WhatsApp number.

When the admin changes the WhatsApp number of the customer, then the customer will receive a notification on their already registered WhatsApp number.

After navigating to the customers section, for the respective customer navigate to the Account information section in the admin backend.

Here, after changing the WhatsApp number and saving the same the customer will receive a notification regarding the same.

That is all about the Magento 2 WhatsApp Login extension. If you have any queries regarding the plugin, please contact us at Webkul Support System.

If you’re looking to create a custom e-commerce website, it’s a great idea to hire Magento developers who can help you build a powerful and scalable online store.

You can also check our complete Magento 2 extensions.