This module adds a configurable block to your Drupal site that provides a one-click button for users to start a WhatsApp conversation. You can customize the contact number, the pre-filled message, the button's icon, and its positioning on different screen sizes.
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
- Run the following command to install the module:
composer require 'drupal/whatsapp_button:^1.0' - Go to
/admin/structure/blockin your site's address bar. - Locate and place the WhatsApp Button block in your desired region.
- 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.