Magento 2 Take Orders on WhatsApp and Notification

• The admin can enable or disable the buy on the WhatsApp button.
• The admin can label the WhatsApp icon with the required custom text.
• Moreover, the admin can choose to hide add to cart button from the front end.
• The Admin can enable or disable notifications to the customers for various order events.
• The Admin can notify the customers by delivering a custom personalized text message for the orders
• This module works for all types of products and guest users can purchase them as well.
• The customer can purchase their order directly from their WhatsApp account after initiating the process from the storefront.
• Further, the buyer is notified of the orders that are placed followed by order events like invoice generation, shipment and cancellation.
• The guest users can enter their details like his/her email address using WhatsApp.
• The customer can opt to pay using an offline mode of payment only.
• Customers can also select the mode of shipping and payment options from the given alternatives.
• Customers can download the invoice of the order from WhatsApp.
• This module works with Twilio and Meta Account.
• It is compatible with Magento 2 Abandoned Cart extension.
• Well integrated with the stripe payment, where the customer can pay with stripe.
• The customers can enable/disable the whatsApp notification.
• The customer can also cancel WhatsApp order process.
• Users can receive the placed order notification and also check for the status of multi-shipping address orders.

Note: If someone configures or enabled with both Twilio and meta business account then in that case module functionality will work on the basis of meta business account setting.

Installation

Firstly, customers will get a zip folder and they have to extract the contents of this zip folder on their system. The extracted folder has an src folder, inside the src folder you have the app folder.

Further, the admin need to transfer this app folder into the Magento2 root directory on the server as shown below.

After the successful Magento 2 WhatsApp installation you have to run these commands in the Magento 2 root directory:

# Run Commands

composer require twilio/sdk

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

Right after that flush the cache from the Magento admin panel by navigating through->System->Cache management as shown below.

Configuration of Multi-Lingual

The admin will navigate through it. Store > Configuration > General ->Locale Options. Then, select the locale as English. (the language into which the admin wants to translate his store content)

Language Translation 

If you need to do the module translation, please navigate the following path in your system. app/code/Webkul/OrderByWhatsappBot/i18n. Open the file named en_US.CSV for editing as shown in the below screenshot.

Once you have opened the file for editing, replace the words after the comma(,) on the right with your translated words.

After editing the CSV file, save it and then upload it to the same path app/code/Webkul/OrderByWhatsappBot/i18n. The module will now get translated into your desired language. It supports both the LTR and RTL languages.

The store owners need to register themselves on Twilio to set up their accounts by undergoing the following steps.

Log In

If you already have a Twilio account, to log in enter your email id and further click over the Next button.

Sign Up

To initiate your Twilio account. Enter your Name, Email and then set your password next click on the start your free trial button.

 

As a result, verification email is sent to your registered email id as shown below.

Verify your email by clicking on the Confirm your Email link enclosed within the mail.

Further, you need to enter your Phone number and click on the verify button.

Then enter the verification code, that you have received on the number provided by you. And then click on the submit button.

A pop-up will appear on your screen click on Confirm button to activate your sandbox account as shown below.

To initiate working (i.e build your WhatsApp bot) in the test environment the user needs to configure his/her sandbox inbound URL.

To be able to send and receive messages from the Sandbox to the Application. The store admin needs to go to the following web page.

• Send a message to the Twilio number with the verification code to join.

You will receive a confirmation text on your device as shown below.

•  Send a One-Way  Message.

• Two-Way Messaging.

Now after replying to the notification as shown above the user will have a 24-hour conversation window.

• Configure your sandbox.

Let’s say the admin site URL is https://storefrontend.com/ 

Then In the below field WHEN A MESSAGE COMES IN the admin needs to paste the link https://storefrontend.com/whatsapp/bot  and click on Save. Now webhooks to this URL when a message comes in.

Note: In order to move into production using the Twilio API for WhatsApp, you need a WhatsApp Business Profile in conclusion, WhatsApp has to formally approve your account.

Just go to your Twilio project under the TRIAL dropdown menu as shown below.

On the Dashboard section under your Project Name, you can view your ACCOUNT SID and AUTH TOKEN credentials.

First, you have to log in to Meta. After that, you have to create an app in Meta by clicking My Apps

You have to create the app by clicking on Create app

After, clicking on the Create App, a page will appear as mentioned below. Select Business option from the list and click on Next.

When you click on the Next button, a new screen will appear mentioned as below.

• Add an app name: Enter the name of the app.
• App contact email: Enter the email ID for contacting purposes.
• Business Accounts: You have to connect your business account. After selecting from the drop-down list.

After entering all the details, you have to enter the password in the pop-up window that appeared on the screen.

After that, you have to select Whatsapp from the list and click on the Setup option.

Now, you have to choose the option Getting Started on the left button of the screen.

Let’s say the admin site URL is https://storefrontend.com/

To set the redirect URL in the Facebook meta business account to verify the call back URL use this – https://storefrontend.com/whatsapp/web  and click on Save.

• Temporary Access Token: The access token will be auto-generated.
• Text Number: This will be your WhatsApp number.
• Phone Number ID: Autogenerated by the Meta.
• Whatsapp Business Account Id: Autogenerated by the Meta.

After all the configuration, now you have to click on the Webhook option above Whatsapp. You have to subscribe the message option from the list.

By this, you enable to receive or send messages.

How to Go Live with Meta Account

After all the configuration and app setup you have to live the meta account Settings>Basics

• App ID: This will be auto generated by Meta.
• App Secret: This will be auto generated by Meta.
• Display Name: Enter the name you have to display to the customer.
• Namespace: To be entered by the client.
• App Domains: To be entered by the client.
• Contact Email: To be entered by the client.
• Privacy Policy URL: To be entered by the client.
• Terms of Service URL: To be entered by the client.

After entering all the detail click on Save Changes.

After the successful installation of the module, the admin can now configure it from the back end. For this, the admin will navigate to Stores > Settings > Configurations > WhatsApp bot.

WhatsApp Business Setting

• Enable: There is a dropdown with the option Yes/No.
• Whatsapp Business No: The number you filled in at the time of creating the meta app.
• Phone Number: The number will be entered at the time of the app creation.
• Whatsapp Token: Token will be entered at the time of app creation.
• Verify Token: Will be entered at the time of app creation.

Twilio Setting

Twilio WhatsApp Number: The admin needs to enter his Twilio WhatsApp number here.

The Twilio service uses two credentials to determine which project an API request is coming from, which are named.

• Twilio Account SID: This acts as a username.
• Twilio Auth Token: This acts as a password.

Debug: For sandbox mode, we will set it as Yes and for development, we will set it as No.

Enable: The admin can enable or disable the feature from here for the product view page.

Button Text/Title: You can enter a custom suitable text for the button label that will be visible on the product view page. 

Hide Add to Cart Button: You can also hide the add to cart button from the product view page or can also select No from the dropdown to reflect the add to cart button on the product view page as shown below.

Similarly, if the admin chooses to enable the Hide Add to cart button or set as Yes.

Enable: The admin can enable or disable this field and accordingly the feature will be visible on the product list page or category page.

Button Text/Title: You can enter a custom suitable text for the button label that will be visible on the product list page. 

Hide Add to Cart Button: Using this field you can hide the add to cart button or show it from the product list page as shown in the below images.

If the Hide Add to cart button is enabled or set as Yes.    

Moreover alternatively, if the Hide Add to cart button is Disabled or set as No.

Enable: The admin can enable or disable this field as a result, the feature will be visible on the cart page.

Button Text/Title: The admin can enter a custom suitable text for the button label that will be visible on the cart page. 

Hide Proceed to Checkout Button: Using this field you can hide or show the proceed to checkout button from the cart page as shown in the below images.

Firstly, add a product to the shopping cart and click on the view and Edit cart button as shown below.  

If, the hide proceed to checkout button is enabled or set as Yes.

Moreover alternatively, if the hide proceeds to checkout button disabled or set as No.

Require WhatsApp Number Attribute (Frontend): If enabled the WhatsApp Number will be a required value on the customer add address and the checkout page.

Attribute Label(Frontend): The admin needs to enter a required text value for the above input field.

Enable Order placed Notification: Once enabled the customer who has placed an order from Magento online store will get order status related notifications on their WhatsApp number entered previously, if disabled they would get the message on the number using which the order is being placed.

This option is only applicable to web store customers.

Order Placed Notification Message: The admin can enter a custom message that will be delivered on the WhatsApp number of the customer whenever an order is placed.

Enable Invoice Notification: Once enabled the customer will get a notification for the invoice generated.

Order Invoiced Notification Message: The admin can enter a custom message that will be delivered on the WhatsApp number of the customer whenever an order invoice is generated with its order and invoice ids.

Enable Shipment Notification: Once enabled the customer will get a notification when their order is shipped. The admin can enable or disable the notification for the shipment.

Shipment Notification Message: The admin can enter a custom message that will be delivered on the WhatsApp number of the customer whenever an order is shipped with its order ID and tracking number.

Enable Order Cancelled Notification: Once enabled the customer will get a notification whenever their order has been cancelled. The admin can enable or disable the notification for the cancellation.

Order Cancelled Notification Message: The admin can enter a custom message that will be delivered on the WhatsApp number of the customer whenever an order is cancelled with its order ID.

The store’s customers can make a purchase even without signing in to the store too, even a guest user can simply click on the Purchase on the WhatsApp button from the front. 

Thereafter the guest user will be asked to add his/her details as shown below.

Additionally, guest users will fill in all mandatory properties to proceed with the checkout process. So that they purchase the product from WhatsApp.

Then click on the Checkout on WhatsApp button next as a result the buyer will be redirected to his/her WhatsApp account.

The user needs to enter his/her email address after which a default message is sent to the user as shown further the buyer can –

• Choose the shipping method as per his/her requirement.
• Select the required payment method from the given options.
• Currently, the module supports the offline mode of payments only as shown.
• The user customer will receive instant notification for the placed order with its order ID.
• Also, on the provided email by the customer, an order confirmation along with details of the purchase and tracking info is sent. 

Now the admin can go to Sales > Orders and click on the View tab under Action. and check the complete order details.

Now, simply click on the Invoice tab above the order & account information section.

Thereby the admin can generate a New Invoice by clicking on the Submit Invoice button as shown below.

Hence, after the successful payment confirmation as shown below.

• The customer receives a notification with its order and invoice Id for the same.
• The admin can generate shipment by clicking on Ship.
• Customers can download the invoice of the order from WhatsApp.

Once the order has been shipped

• The customer will receive a notification as shown below.

Note -There is no shipping alternative provided for the virtual and downloadable products since they aren’t required to be shipped.

 

Also, the admin can manually select one or more orders from the order list and opt to cancel the order as shown below.

For any order cancellation (made by the admin end) the customer will receive a notification as shown below.

If under any circumstances the customer makes an invalid request over Whatsapp he will be sent a default message as shown below.

Customer can request to cancel the order while placing the order over the whatsapp .

Customer can cancel the order while choosing the shipping method over the whatsapp.

The customer will receive a notification to either choose shipping method or cancel to stop order process.

If the customer send the cancel the order will be get cancelled and will recieve a custom message with order cancellation.

The customer can also request for the order cancellation while making payment.

The customer will receive a notification while making payment to choose payment method or cancel to stop order process.

If the customer send cancel over the whatsapp , they will get a notification with a cancellation custom message as you can see the snapshot below.

Magento 2 WhatsApp ChatBot & Order Notifications compatible with Magento 2 Abandoned Cart extension. It creates a smooth and comprehensive approach for recovering lost sales and providing outstanding customer support.

Integrating this WhatsApp ChatBot & Order Notifications with the Abandoned Cart Email Reminder, you gain a multi-channel approach for recovering abandoned carts efficiently.

The system combines the power of personalized email reminders with WhatsApp notifications, providing targeted messaging to entice customers to complete their purchases.

Follow the below-mentioned steps to enable this:

The admin has to navigate towards Store>>Configuration>>Webkul>>Abandoned Cart, there you will see the Settings and Cron Schedule.

Enter the details mentioned then need to add the below-mentioned details of the Email Configuration.

Next, the admin needs to enable the WhatsApp notification settings, after that add the message you want to send to your customer for the first, second and third followup.

Once you are done entering all the details click on the Save option, and the settings will going to be saved. When the customer receives the notification through WhatsApp it will reflect on the customer end as mentioned in the below snapshot:

Magento 2 WhatsApp ChatBot & Order Notifications is also compatible with the Magento 2 Stripe Extension.

Integrating WhatsApp ChatBot & Order Notifications with Magento 2 Stripe Extension offers a seamless checkout experience to the customers.

Also you can accept the payments from customers worldwide.

Following are the steps to enable the stripe payment for WhatsApp bot.

The admin has to navigate towards Store>>Configuration>>sales>>payment method, there you will see the Stripe Payment option as you can see the below image.

Here the admin can enable or disable the Stripe Payment for WhatsApp Bot.

In case the stripe payment is enable for the WhatsApp Bot module , the customer will receive a notification over WhatsApp to select the desired payment method while placing the order.

After saving the configuration, now the admin has to generate the webhooks by clicking on Generate Webhooks.

If the customers choose the stripe payment method , then they will get QR code to scan or a payment URL to make payment over WhatsApp.

Once the customer scan the QR code or open the URL they will redirected to the stripe checkout website and where the customer will fill debit or credit card details to make payment.

Once made the payment customers will receive the payment confirmation with order ID, Invoice ID, Shipment ID over the whatsApp.

Customer can manage the status of WhatsApp Notification by navigating My Account->>WhatsApp Notification.

Customer can either choose Enable or Disable and can choose neither Enable or Disable for WhatsApp Notification.

If the WhatsApp Notification is disabled for the logged in customer, then he/she will receive a notification to enable the WhatsApp Notification over the WhatsApp to place orders.

Logged in customers must need to enable the WhatsApp Notification to place the orders.

That’s all for the Magento 2 WhatsApp Shopping Bot & Order Notifications extension.

Also, if you want a ChatGPT bot which is a virtual assistant that provides answers for the products within your Magento 2 store then you can check the Magento 2 ChatGPT Bot extension.

However, if you still have any questions regarding the module please create a support ticket by clicking here or send an email to support@webkul.com