WhatsApp Integration for Magento 2

What you get

Magento 2 WhatsApp Integration

Adds WhatsApp contact points to a Magento 2 storefront: a floating chat button on every page, an inquiry button on product pages that pre-fills the product name and URL, and an assistance banner on category pages. Each element opens a wa.me link to the phone number you configure, with a pre-filled message. Nothing is sent from the server; the customer's own WhatsApp app or WhatsApp Web handles the conversation.

It suits stores that take product questions and orders over WhatsApp and want the button placed consistently without editing theme files. Works with the Hyva and Luma themes.

Product page: kishansavaliya.com/magento-2-whatsapp.html

Features

• Floating button on all pages except checkout with a configurable phone number, pre-filled message, hover text (shown on hover and keyboard focus, opening toward the page) and position (bottom right, bottom left, top right, top left). It uses z-index 30, hides while a drawer, dialog, modal, open search or mobile menu is shown (on phones and tablets while a form field has focus, and on phones while the filter panel is open), fades out while it would cover the layered navigation toggle, filter controls, toolbar sorter or pager (or any element with data-panth-float-avoid), and moves up above bottom notification bars through --panth-bottom-bar-offset. Floating elements share one bottom stack per side: back-to-top sits at the bottom, the WhatsApp button above it, the EU withdrawal tab (phones and tablets) above that. Each element adds --panth-bottom-bar-offset (bottom notification bars), the slot variables --panth-float-slot-btt-<side> and --panth-float-slot-wa-<side> of the elements below it, and --panth-float-edge (24px, 16px below 768px).
• Product page button with its own text and message template; {product_name} and {product_url} are replaced with the product being viewed. Four styles: solid, outline and text only render as a labelled secondary button (WhatsApp green only in the icon); icon only renders a round icon button.
• Category page banner with its own text and message; the current category name is appended to the message.
• Each of the three elements has its own enable switch and can be configured per default, website or store view.
• Optional extra CSS classes for all elements.
• Colours and sizes are defined in etc/theme-config.json and exposed as CSS variables through Panth Core, so a theme can override them without touching the templates.
• No database tables, no cron jobs, no console commands and no calls to the WhatsApp Business API.

Usage

• Floating button: rendered from the default layout handle in the before.body.end container (so it comes after the page content in keyboard tab order) whenever "Enable WhatsApp Float Button" is Yes. Clicking it opens https://wa.me/<number>?text=<message>.
• Product page button (block whatsapp.product.button): added to the content container after product.info.main on catalog_product_view, so on Luma it is shown below the product information and gallery, directly above the product tabs and outside the buy box. On Hyva themes the hyva_catalog_product_view handle moves it into product.info.additional, at the end of the product information card below the buy box. It shows for every product type, with or without options, and renders only when the product page switch is Yes.
• Category banner: added at the end of the content container on catalog_category_view, below the product list and its pagination; renders only when the category switch is Yes.

Colours and sizes (button background and text colour, floating button size, icon size, side offset, bottom offset) come from etc/theme-config.json. Panth Core turns that file into CSS variables on every page, and a theme can override those variables in its own CSS. See the user guide for the variable names.

Templates can be overridden in a theme under Panth_WhatsApp/templates/: whatsapp-float.phtml, product/button.phtml and category/banner.phtml.

Documentation

• USER_GUIDE.md: installation, configuration of each element, colour customisation through theme-config.json and troubleshooting.

Changelog

See CHANGELOG.md.

Compatibility

The Composer package requires magento/framework ^103.0, magento/module-backend ^102.0, magento/module-catalog ^104.0, magento/module-config ^101.2 and magento/module-store ^101.1.

Requirements

• Magento 2.4.4 or later
• PHP 8.1 to 8.4
• mage2kishan/module-core (installed automatically by Composer; provides the shared "Panth Extensions" admin tab and the CSS variable output used for colours and sizes)
• A phone number registered with WhatsApp (a WhatsApp Business account is not required)

Installation

composer require mage2kishan/module-whatsapp
bin/magento module:enable Panth_Core Panth_WhatsApp
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

setup:di:compile is only needed in production mode. The templates carry their own styles, so no static content deployment is required.

Check the result with:

bin/magento module:status Panth_WhatsApp

All three elements are switched off by default, so nothing appears on the storefront until you enable them in the configuration.

Configuration

Go to Stores > Configuration > Panth Extensions > WhatsApp Integration.

Float Button Settings:

Product Page Settings:

Category Page Settings:

Advanced Styling:

The phone number is shared by all three elements. Configuration paths start with panth_whatsapp/general/, panth_whatsapp/product/, panth_whatsapp/category/ and panth_whatsapp/advanced/.

Uninstallation

bin/magento module:disable Panth_WhatsApp
composer remove mage2kishan/module-whatsapp
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento cache:flush

The module creates no database tables. Its configuration values remain in core_config_data until removed.

License

Commercial software license. See LICENSE.txt in this repository.

Developer Notes

• Module name: Panth_WhatsApp
• Composer package: mage2kishan/module-whatsapp
• PHP namespace: Panth\WhatsApp
• View models: Panth\WhatsApp\ViewModel\FloatButton, Panth\WhatsApp\ViewModel\Product, Panth\WhatsApp\ViewModel\Category (each exposes getWhatsAppUrl())
• Config helper: Panth\WhatsApp\Helper\Data
• ACL resource for the configuration section: Panth_WhatsApp::config