Whatsapp Button

The WhatsApp Button module allows you to add a configurable block anywhere on your site, enabling quick and direct access to WhatsApp. With just one click, users can instantly start a conversation.

Key Features

• Customizable contact number: Set the WhatsApp number where conversations will be directed.
• Predefined message customization: Configure an automatic message that loads upon opening the chat, so users only need to send it.
• Icon customization: Replace the default icon with a custom image to match your site's design.
• Flexible positioning with CSS and media queries: Adjust the button’s position on different screen sizes to fit your layout needs.

Installation

1. Run the following command to install the module:
   composer require 'drupal/whatsapp_button:^1.0'
2. Go to /admin/structure/block in your site's address bar.
3. Locate and place the WhatsApp Button block in your desired region.
4. In the block settings, disable the "Display title" option and click "Save Block."

Customization

The WhatsApp Button functions like any other block. To edit it, hover over the contextual link and click "Edit."

On the block configuration page, you can modify multiple settings:

Text Information

Customize the message displayed on the WhatsApp page, add text next to the icon, and define a tooltip.

Image Settings

Replace the default icon with a custom image.

Define the image width using px (recommended), em, %, or any other CSS unit.

Set different image widths for tablets and desktops (mobile uses the default size).

Position Settings

Adjust the button’s position from the bottom and right of the screen.

Media Queries

Customize media query breakpoints to control how the button behaves across different devices.