{"id":2000,"date":"2024-06-04T07:30:11","date_gmt":"2024-06-04T07:30:11","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-chat-to-magento-2\/"},"modified":"2025-06-27T11:08:43","modified_gmt":"2025-06-27T05:38:43","slug":"how-to-add-whatsapp-chat-to-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-chat-to-magento-2\/","title":{"rendered":"How to Add WhatsApp Chat to Magento 2? &#8211; Manual Method Explained"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Magento 2 WhatsApp Chat button improves the customer support experience of your store. It helps customers quickly reach out to the store admin for any inquiries or queries.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, you\u2019ll learn how to add a WhatsApp Chat button to your store.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a WhatsApp Chat Button?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The WhatsApp Chat button is a link that takes the customers to chat with you instantly via WhatsApp along with a pre-defined message. On clicking the button, the users are redirected to the chat screen on WhatsApp web or mobile app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Generally, the chat button is added to the bottom-right or left of online websites. For example, here\u2019s what a WhatsApp Chat button looks like on a Magento 2 store:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/01\/Magento-2-WhatsApp-Chat-example.png\" alt=\"Magento 2 WhatsApp Chat Example\" class=\"wp-image-46101\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">It\u2019s a quick and convenient way to offer quick customer support to website visitors. It also helps you establish trust amongst new visitors to your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add Magento 2 WhatsApp Chat?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are two ways you can add WhatsApp chat on Magento 2 website:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Create a Custom widget \u2013&nbsp;<\/strong>In Magento admin, create a new block for the WhatsApp chat button and then render it on the website using the widget. It\u2019s a low-code method that requires a bit of technical knowledge.<\/li>\n\n\n\n<li><strong>Use a third-party module \u2013&nbsp;<\/strong>Install a Magento 2 WhatsApp extension and configure it to display the chat button.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Most of the WhatsApp Chat extensions available in the market offer a basic button like the one shown above. You can easily implement such a button using the manual method provided below without using any extension.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In your Magento 2 store admin, go to&nbsp;<strong>Content &gt; Elements &gt; Blocks<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/01\/1-go-to-content-blocks-2.png\" alt=\"Go to Content Blocks in Magento 2\" class=\"wp-image-46106\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the blocks grid, click the \u201c<strong>Add New Block<\/strong>\u201d button on the top-right.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/01\/2-add-a-new-block-in-magento-2.png\" alt=\"Add a new block for Magento 2 WhatsApp Chat\" class=\"wp-image-46102\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the New Block screen, enter a name and set identifier for the block. For example, here we\u2019ve set \u201cWhatsApp Chat Button\u201d as name and \u201cwhatsapp-chat\u201d as the identifier.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Keep \u201cAll Store Views\u201d selected for the applicable store views.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Now, click the \u201c<strong>Edit with Page Builder<\/strong>\u201d button and add the below provided code for the WhatsApp Chat button to the block. Don\u2019t forget to modify the WhatsApp icon URL, phone number and custom message in the code as per your needs<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;style>\n  .meetanshi-whatsapp-button-container {\n    position: fixed;\n    bottom: 1.25em;\n    right: 1.25em;\n    margin: 0;\n    z-index: 999999;\n    cursor: pointer;\n  }\n \n  .whatsapp-button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0.625em;\n    background-color: #25d366;\n    border-radius: 2.5em;\n    text-decoration: none;\n    font-weight: bold;\n    color: #FFFFFF;\n  }\n \n  .whatsapp-button img {\n    height: 2em;\n    width: auto;\n    margin-right: 0.3125em;\n  }\n \n  .close-button {\n    position: absolute;\n    top: -0.625em;\n    right: -0.625em;\n    display: block;\n    background-color: red;\n    color: white;\n    width: 1.25em;\n    height: 1.25em;\n    border-radius: 50%;\n    text-align: center;\n    line-height: 1.25em;\n    font-weight: bold;\n    cursor: pointer;\n  }\n&lt;\/style>\n \n&lt;div class=\"meetanshi-whatsapp-button-container\">\n  &lt;a class=\"whatsapp-button\" href=\"https:\/\/api.whatsapp.com\/send?phone=917202997997&amp;text=Hello%20Meetanshi,%20I%20need%20your%20help!\">\n    &lt;img src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2023\/08\/whatsapp-logo-example.png\" alt=\"WhatsApp Logo\" \/> WhatsApp us!\n  &lt;\/a>\n  &lt;div class=\"close-button\">\u00d7&lt;\/div>\n&lt;span style=\"display: none;\">Powered by &lt;a href=\"https:\/\/meetanshi.com\/blog\/how-to-add-whatsapp-chat-to-magento-2\/\">Meetanshi Magento 2 WhatsApp Chat Solution&lt;\/a>&lt;\/span>\n&lt;\/div>\n \n&lt;script>\n  function hideWhatsAppButton() {\n    document.querySelector('.meetanshi-whatsapp-button-container').style.display = 'none';\n  }\n \n  \/\/ Wait for the DOM to load\n  document.addEventListener('DOMContentLoaded', function() {\n    \/\/ Add click event listener to the close button\n    document.querySelector('.close-button').addEventListener('click', hideWhatsAppButton);\n  });\n&lt;\/script><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Click the \u201c<strong>Save<\/strong>\u201d button to save the WhatsApp Chat button block.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2024\/06\/3-add-whatsapp-chat-code-to-block-964x702-1.png\" alt=\"add whatsapp chat code to block 964x702 1\" class=\"wp-image-49789\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, go to&nbsp;<strong>Content &gt; Elements &gt; Widgets&nbsp;<\/strong>and click the \u201c<strong>Add Widget<\/strong>\u201d button to create a new widget to add WhatsApp chat button on the frontend.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/01\/4-add-a-new-widget.png\" alt=\"Create a new widget in Magento 2\" class=\"wp-image-46104\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the widget settings, select the widget type as \u201c<strong>CMS Static Block<\/strong>\u201d and your store design theme.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Click \u201c<strong>Continue<\/strong>.\u201d<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/01\/5-widget-settings-for-magento-2.png\" alt=\"Widget settings for WhatsApp Chat in Magento 2\" class=\"wp-image-46107\" style=\"width:702px;height:auto\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Now, enter a title for the widget, for example \u201c<strong>WhatsApp Chat<\/strong>\u201d and select the applicable store views to display the WhatsApp button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the&nbsp;<strong>Layout Updates<\/strong>, you can configure where you want to show the button on the store. For example, to add it to the entire store, select display on \u201c<strong>All Pages<\/strong>\u201d and the \u201c<strong>Page Footer<\/strong>\u201d container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/01\/6-magento-2-whatsapp-chat-widget-properties.png\" alt=\"Magento 2 WhatsApp Chat Widget Propertiess\" class=\"wp-image-46108\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click \u201c<strong>Save<\/strong>\u201d to save the widget.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That\u2019s it. The Magento 2 WhatsApp Chat button will appear on all pages in the store front end. You can customize the look and feel of the chat button by modifying the CSS code in the block.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span>Magento 2 WhatsApp Contact<\/span>\r\n<p>Allow your customers to contact you instantly on WhatsApp.<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/magento-2-whatsapp-contact.html\" target=\"_blank\" class=\"btn-primary\">Add Contact Now<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/magento-2-whatsapp-contact.png\" alt=\"Magento 2 WhatsApp Contact\">\r\n<\/div>\r\n<\/div><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Build a Customer Support System Using WhatsApp in Magento 2<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can implement a complete support system by adding WhatsApp Chat live agents. In addition to basic chat button, the&nbsp;<a href=\"https:\/\/meetanshi.com\/magento-2-whatsapp-contact.html\">Magento 2 WhatsApp Contact<\/a>&nbsp;extension allows you to create support agents in your store and create chat links for them.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, you can create chat agents for multiple departments in the store and create WhatsApp widget for the users. The WhatsApp widget Magento 2 is completely customizable \u2013 you can modify the texts, colors, and change its position on the frontend.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2022\/01\/8-magento-2-whatsapp-contact-extension.png\" alt=\"Magento 2 WhatsApp Contact Extension by Meetanshi\" class=\"wp-image-46105\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also assign QR codes to live agents to allow customers to directly connect with live agents by simply scanning them.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Magento 2 WhatsApp Chat button improves the customer support experience of your store. It helps customers quickly reach out to the store admin for&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-2000","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=2000"}],"version-history":[{"count":3,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2000\/revisions"}],"predecessor-version":[{"id":17246,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/2000\/revisions\/17246"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=2000"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=2000"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=2000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}