Magento 2 WhatsApp Login extension enables Login via WhatsApp feature for customers to easily log in your Magento 2 store and thus improving their user experience.
Table of Content
- Extension Installation Guide
- Configuration
- API Settings
- Country Flag Settings
- WhatsApp Login in Frontend
- WhatsApp Number in Customer Account Information in Backend
- For Magento Marketplace Customers
- Create a folder structure in Magento root as app/code/Meetanshi/WhatsappLogin
- Download and extract the zip folder and upload our extension files to the app/code/Meetanshi/WhatsappLogin via FTP.
- Login to your SSH and run below commands step by step:
- composer require twilio/sdk
- php bin/magento setup:upgrade
- For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
- For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
- php bin/magento cache:flush
- Login to your SSH and run below commands step by step:
- For Meetanshi Customers
- Extract the zip folder and upload our extension to the root of your Magento 2 directory via FTP.
- Login to your SSH and run below commands step by step:
- composer require twilio/sdk
- php bin/magento setup:upgrade
- For Magento version 2.0.x to 2.1.x - php bin/magento setup:static-content:deploy
- For Magento version 2.2.x & above - php bin/magento setup:static-content:deploy –f
- php bin/magento cache:flush
- Configuration
To configure the extension, login to Magento 2 backend, move to Stores à Configuration à Meetanshi à WhatsApp Login, where you can find various settings to configure the extension.
- WhatsApp Login: Enable or disable the WhatsApp Login extension from here.
- Sign-in Request Text: Enter the message to show when a user requests login via WhatsApp.
- Redirect URL After Login: Enter the URL slug of the page to which you want to redirect users after successful login via WhatsApp. For example, if your domain is https://xyz.com and you want to redirect users to https://xyz.com/contact-us/, only add contact-us/ in the field value.
- API Settings
The extension facilitates the login via WhatsApp through Twilio API. You need to follow the below steps to get the Twilio account ID, auth token and phone number from the Twilio.
-
- First of all, Sign Up for the Twilio account. Add the details and click to get started.
-
- After the Email verification, enter your mobile number and click to “Verify”.
-
- Once you click “Verify”, you will get an OTP on the added mobile number. Enter the OTP and verify the mobile number. Now move to Settings à General where you can see API details both for live and testing. Copy the Account SID and Auth Token to use them in Magento backend configuration for Twilio account.
-
- Now, click three dots from the left sidebar, go to Programmable SMS and click Build under the Learn and Build option. From here, you can get Twilio phone number to use for sending the SMSs. Click on the “Get a number” button.
-
- You will get a number to choose. Click “Choose This Number”.
- Once you click the button, you will get a Twilio phone number. Copy this number and set it in the Magento backend configuration for Twilio account.
- Now go to https://www.twilio.com/console/sms/whatsapp/senders/, click on your Twilio phone number, add the webhook URL for incoming messages as https://yourstore.com/wlogin/index/index, add other necessary details below and click “Update WhatsApp Sender”.
- Country Flag Settings
You can enable country flag on the customer sign up page for sign-up using WhatsApp number functionality. This helps users not to enter the country code while adding their WhatsApp enabled mobile numbers.
- Enable: Enable country flag for WhatsApp number on customer sign up and update account information page.
- Allowed Countries: Select countries for which you want to show flag and allow users to add mobile numbers.
- Default Country: Set default country to show the default selected flag.
- WhatsApp Login in Frontend
After configuring the extension, you can see WhatsApp Login button enabled in the frontend on customer sign-in page. Users can click on the button to login via WhatsApp.
- On requesting WhatsApp login, users can see sign-in request text. They can click “Continue to Chat” or click to “Download” the WhatsApp app.
- Continue to chat will again ask the users to either download the WhatsApp or continue using WhatsApp web.
- On sending the sign-in request message on WhatsApp, users will get a sign-in link to login via WhatsApp.
-
- Customer Sign-up using WhatsApp
If the customer is account is unavailable with the WhatsApp number the users used to sign-in, they need to sign-up using WhatsApp. The users need to add personal details and along with the selecting country flag and WhatsApp enabled mobile number.
- Customer Sign-up using WhatsApp
-
-
- After successful sign-up using WhatsApp number, the users get redirected to the My Account.
-
-
- Customer Sign-in using WhatsApp
If the customer is account is already enabled for WhatsApp login, on click of the sign-in link sent on WhatsApp, the user gets login to his account automatically. If the admin has set redirect URL after login, he gets redirected to the redirect URL after login successfully.
- Customer Sign-in using WhatsApp
- WhatsApp Number Update from My Account Section
If the customers require to change or update their WhatsApp number, they can go to “Account Information” tab under their My Account section, under the WhatsApp Number field, select the country flag to auto select the country code, add their new WhatsApp number and click to save it.
- WhatsApp Number in Customer Account Information in Backend
Immediately after the customer is registered using the WhatsApp number, new customer is auto created and seen enlisted in the Customers > All Customers tab. The admin can see customer’s WhatsApp number on customer edit.