This module adds a customizable WhatsApp contact button to your Drupal site, either as a floating bubble or a block. You can configure the phone number, message, alignment, and color, with options to override settings on a per-block basis.
Description
Whatsapp Bubble provides a lightweight way to add a WhatsApp contact entry point to your Drupal site. It supports:
- A floating WhatsApp bubble auto-injected on non-admin pages.
- A “Whatsapp Bubble” block that renders the same bubble via block placement.
- A “Whatsapp Button” block variant with a label (e.g., “Escríbenos a”).
- Per-block phone number overrides so different sections can link to different numbers.
Both the floating bubble and blocks use the same theme and library so they look consistent and are easy to style.
Installation
1) Enable the module: Extend → Whatsapp Bubble.
2) Clear caches if needed: drush cr.
Configuration (Global)
Path: /admin/config/services/whatsapp-bubble
Settings:
- Enable floating bubble: When enabled, the module injects the WhatsApp bubble at the bottom of all non-admin pages. Useful when you are not using the block, or to temporarily hide the bubble.
- Alignment: Horizontal alignment for the bubble (left, center, right).
- Vertical alignment: Vertical alignment (top, middle, bottom).
- Phone Number: Destination WhatsApp number (E.164 format recommended).
- Message: Default message prefilled in the WhatsApp chat.
- Inverse color: Swap colors (green background with white icon).
Blocks
Whatsapp Bubble block:
- Renders the same floating bubble via block placement.
- If the global floating bubble is enabled, the block configuration form shows a warning and links to the global settings. Disable the global bubble to avoid rendering two bubbles on the same page.
-
Supports per-block phone override.
Whatsapp Button block:
- Button-style variant with a small text label displayed above “WhatsApp”.
- Supports per-block phone override.
- Small text label is configurable on the block form.
Per-block phone override
Both blocks can override the global phone number:
1) Edit the block.
2) Check “Override phone number for this block”.
3) Enter the desired number. If left empty or override is disabled, the global number is used.
Theming & Assets
- Templates: templates/wab.html.twig (bubble), templates/wab-button.html.twig (button).
- Library: whatsapp_bubble/main provides the CSS for both renderings.
- Common CSS classes: “whatsapp-bubble”, plus alignment classes (“left”/“center”/“right”, “top”/“middle”/“bottom”) and “inverse” when the inverse color option is enabled.
Caching
- Render arrays include cache tag: config:whatsapp_bubble.config. Configuration changes automatically invalidate the output.
Notes
- Global bubble does not render on admin routes.
- To avoid duplicates, either disable the global bubble or do not place the Whatsapp Bubble block.