Skip to content

WhatsApp Button

A Vaadin Flow add-on that provides a button to start a WhatsApp conversation with a single click.

Overview

Use the WhatsApp Button add-on to let users start a WhatsApp conversation directly from your application. It wraps the @flowingcode/fc-whatsapp-button web component and provides a configurable button with a label, phone number, dial code, and prefilled message text. It supports both a direct redirect (recommended for non-mobile devices) and an in-app dialog, and can be made responsive.

Features

  • Custom button label.
  • Prefilled message text.
  • Dial code and phone number.
  • Optional invite code.
  • Icon in leading or trailing position (trailing by default).
  • Direct redirect mode (recommended for non-mobile devices).
  • Show a dialog on click.
  • Responsive layout.

Supported versions

Add-on version Vaadin version
2.x 24–25

Refer to the Vaadin Directory page for exact version compatibility.

Installation

From the Vaadin Directory

Available in the Vaadin Directory.

Maven dependency

<dependency>
    <groupId>org.vaadin.addons.flowingcode</groupId>
    <artifactId>whatsapp-button-addon</artifactId>
    <version>X.Y.Z</version>
</dependency>

Replace X.Y.Z with the latest released version. Add the Vaadin add-ons repository to your pom.xml:

<repository>
    <id>vaadin-addons</id>
    <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

For snapshot builds, see maven.flowingcode.com/snapshots.

JavaDoc is published at javadoc.flowingcode.com.

Usage

Create a WhatsappButton and configure the label, phone, and prefilled message:

WhatsappButton whatsappButton = new WhatsappButton();
whatsappButton.setLabel("Contact Us");
whatsappButton.setDialCode("342");
whatsappButton.setPhone("123456789");
whatsappButton.setLeadingIcon(true);
whatsappButton.setText("Hi, how can I help you?");
add(whatsappButton);

For non-mobile devices, enable the direct redirect:

whatsappButton.setRedirect(true);

Special configuration when using Spring

When running on Spring, allow-list the com.flowingcode package so Vaadin Flow can discover the add-on's components. See Common configuration for details.

API reference

Headline types exposed by the add-on:

  • WhatsappButton — the button component; extends Component (@Tag("fc-whatsapp-button")). Key methods: getPhone() / setPhone(String), getDialCode() / setDialCode(String), getLabel() / setLabel(String), getText() / setText(String) (the prefilled message), getInviteCode() / setInviteCode(String), isLeadingIcon() / setLeadingIcon(boolean), isRedirect() / setRedirect(boolean), isResponsive() / setResponsive(boolean), isShowDialog() / setShowDialog(boolean).

For the full API surface, browse the published JavaDoc.

Demo

A live demo is available at addonsv25.flowingcode.com/whatsappbutton. To run the demo locally:

git clone https://github.com/FlowingCode/WhatsappButton.git
cd WhatsappButton
mvn clean install jetty:run

Then open http://localhost:8080/.

Source code

WhatsappButton on GitHub — distributed under Apache License 2.0.