Whatsapp Contact Extension for Adobe Commerce Saas

WhatsApp Contact for Adobe Commerce Saas

WhatsApp Contact is an out-of-process extensibility application for Adobe Commerce Cloud as a Service (SaaS).

Merchants can configure WhatsApp settings (phone number, default message, icon position, enable/disable) directly from the Commerce Admin. The storefront then fetches this configuration from Adobe I/O Runtime and displays a WhatsApp icon that allows visitors to start a conversation instantly.

No PHP modules or in-process extensions are required. The entire solution runs on Adobe App Builder (Admin UI SDK + Runtime actions).

Features

Custom Admin menu and configuration pages inside Adobe Commerce Admin
Configure phone number, default message text, icon position, enable/disable per context
Public GraphQL and REST endpoints (public-config) for storefront access without authentication
Custom icon upload with public endpoint for storefront delivery
Secured runtime actions for authenticated operations (saving configuration, reading Commerce data)
Public actions expose only non-sensitive configuration data

Adobe Commerce Saas Admin:

EDS Storefront:

Prerequisites

Before installing, ensure you have:

Access to the Adobe App Builder Developer Console
An existing App Builder project

App Installation

Step 1. Get the app from Adobe exchange and install it

Step 2. Configure the app and deploy

Step 3. Enable the extension in Adobe Commerce at Stores > Configuration > Adobe Services > Admin UI SDK > Configure Extensions

Storefront setup with Edge Delivery Services

After deploying the App Builder application, you must integrate the WhatsApp widget into your Edge Delivery Services (EDS) storefront. It works with AEM boilerplate commerce project.

Step 1. Install the storefront package in your storefront code via npm:

npm install @improntus/saas-app-storefront-whatsapp-contact

The package’s postinstall script runs automatically when the package is installed. You do not need to run any extra steps—blocks, scripts, and icons are copied into your project as part of npm install.

It will:

Copy blocks/whatsapp-contact/ (JS + CSS) into your blocks/ folder.
Copy scripts/whatsapp-config.js and scripts/initializers/whatsapp.js into your project.
Copy the whatsapp.svg and whatsapp-contact.svg icons into your icons/ folder.
Add the WhatsApp initialization call to scripts/initializers/index.js if it is not already there.

[OPTIONAL] If you need to re-run the install (e.g. you removed files, or the postinstall did not run), you can run it manually from your project root:

npx storefront-whatsapp-contact

Step 2. Run the configuration tool

npx storefront-whatsapp-contact-configure

Follow the prompts (such as Runtime URL or store code) to link the storefront with your deployed App Builder application.

If you are looking for the Whatsapp Contact version for Adobe Commece Cloud (Paas) + Luma Storefront, you can check the Adobe Commerce Marketplace to get the extension.