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.

Project link

https://www.drupal.org/project/whatsapp_button

Comments

cadence96 created an issue. See original summary.

vishal.kadam’s picture

Thank you for applying!

Please read Review process for security advisory coverage: What to expect for more details and Security advisory coverage application checklist to understand what reviewers look for. Tips for ensuring a smooth review gives some hints for a smoother review.

The important notes are the following.

  • If you have not done it yet, you should run phpcs --standard=Drupal,DrupalPractice on the project, which alone fixes most of what reviewers would report.
  • For the time this application is open, only your commits are allowed.
  • The purpose of this application is giving you a new drupal.org role that allows you to opt projects into security advisory coverage, either projects you already created, or projects you will create. The project status won't be changed by this application and no other user will be able to opt projects into security advisory policy.
  • We only accept an application per user. If you change your mind about the project to use for this application, or it is necessary to use a different project for the application, please update the issue summary with the link to the correct project and the issue title with the project name and the branch to review.

To the reviewers

Please read How to review security advisory coverage applications, Application workflow, What to cover in an application review, and Tools to use for reviews.

The important notes are the following.

  • It is preferable to wait for a Code Review Administrator before commenting on newly created applications. Code Review Administrators will do some preliminary checks that are necessary before any change on the project files is suggested.
  • Reviewers should show the output of a CLI tool only once per application.
  • It may be best to have the applicant fix things before further review.

For new reviewers, I would also suggest to first read In which way the issue queue for coverage applications is different from other project queues.

vishal.kadam’s picture

Title: [1.0.x] Whatsapp Button [D8], [D9], [D10], [D11] » [1.0.x] Whatsapp Button
Assigned: cadence96 » Unassigned
Issue summary: View changes
vishal.kadam’s picture

Status: Needs review » Needs work

1. Fix phpcs issues.

phpcs --standard=Drupal,DrupalPractice --extensions=php,module,inc,install,test,profile,theme,css,info,txt,md,yml whatsapp_button/

FILE: whatsapp_button/src/Plugin/Block/WhatsappButtonBlock.php
--------------------------------------------------------------------------------
FOUND 11 ERRORS AFFECTING 11 LINES
--------------------------------------------------------------------------------
 426 | ERROR | The array declaration extends to column 86 (the limit is 80). The array content should be split up over multiple lines
 427 | ERROR | The array declaration extends to column 86 (the limit is 80). The array content should be split up over multiple lines
 428 | ERROR | The array declaration extends to column 120 (the limit is 80). The array content should be split up over multiple lines
 429 | ERROR | The array declaration extends to column 112 (the limit is 80). The array content should be split up over multiple lines
 449 | ERROR | The array declaration extends to column 88 (the limit is 80). The array content should be split up over multiple lines
 456 | ERROR | The array declaration extends to column 90 (the limit is 80). The array content should be split up over multiple lines
 470 | ERROR | The array declaration extends to column 92 (the limit is 80). The array content should be split up over multiple lines
 473 | ERROR | The array declaration extends to column 91 (the limit is 80). The array content should be split up over multiple lines
 480 | ERROR | The array declaration extends to column 94 (the limit is 80). The array content should be split up over multiple lines
 483 | ERROR | The array declaration extends to column 93 (the limit is 80). The array content should be split up over multiple lines
 499 | ERROR | The array declaration extends to column 84 (the limit is 80). The array content should be split up over multiple lines
--------------------------------------------------------------------------------

2. FILE: README.txt

README file should follow the content and formatting described in README.md template.

3. FILE: whatsapp_button.info.yml

package: Custom

This line is used by custom modules created for specific sites. It is not a package name used for projects hosted on drupal.org.

4. FILE: whatsapp_button.module

/**
 * @file
 * Primary module hooks for Whatsapp Button module.
 *
 * @DCG
 * This file is no longer required in Drupal 8.
 * @see https://www.drupal.org/node/2217931
 */

Drupal does not have primary and secondary hooks. Instead of that, it is preferable to use the usual description: “Hook implementations for the [module name] module”, where [module name] is the name of the module given in its .info.yml file.

/**
 * Implements hook_preprocess_HOOK().
 */
function whatsapp_button_preprocess_block(&$variables) {

The description for this hook should also say for which hook it is implemented.

5. FILE: templates/whatsapp-button-template.html.twig

Twig code needs to be correctly indented. Drupal uses two spaces for indentation, not four spaces or tabs.

6. FILE: src/Plugin/Block/WhatsappButtonBlock.php

  /**
   * Constructor with dependency injection.
   */
  public function __construct(

The documentation comment for constructors is not mandatory anymore. If it is given, the description should be “Constructs a new [class name] object”, where [class name] includes the class namespace.

avpaderno’s picture

As a side note, please check Git has been set to use the same email associated to your drupal.org account, or the commits you do will not be associated to your account.

cadence96’s picture

Status: Needs work » Needs review

I have implemented the requested changes:

  • Adjusted the array formatting to comply with the 80-character limit.
  • Updated the whatsapp_button.info.yml package from "Custom" to "Social Media."
  • Revised the docblock in whatsapp_button.module to follow Drupal standards.
  • Removed the outdated whatsapp_button_preprocess_block function.
  • Added an initial README.md file with basic module documentation.

The updated code has been committed under tag 1.0.3.

Additionally, I have verified that Git is set to use the same email associated with my Drupal.org account.

Please review and let me know if any further adjustments are needed.

vishal.kadam’s picture

Status: Needs review » Needs work

FILE: templates/whatsapp-button-template.html.twig

Twig code needs to be correctly indented. Drupal uses two spaces for indentation, not four spaces or tabs.

cadence96’s picture

Status: Needs work » Needs review

Corrected indentation in twig file.

Created tag v.1.0.4.

vishal.kadam’s picture

These applications do not require that new releases are created after reviews.

vishal.kadam’s picture

Status: Needs review » Reviewed & tested by the community

Rest looks fine to me.

Let’s wait for a Code Review Administrator to take a look and if everything goes fine, you will get the role.

avpaderno’s picture

core: 8.x
core_version_requirement: ^8 || ^9 || ^10 || ^11

core can only be used together core_version_requirement: ^8 || ^9. Drupal core will throw an error, when it used together core_version_requirement: ^8 || ^9 || ^10 || ^11.

avpaderno’s picture

Thank you for your contribution and for your patience with the review process!

I am going to update your account so you can opt into security advisory coverage any project you create, including the projects you already created.

These are some recommended readings to help you with maintainership:

You can find more contributors chatting on Slack or IRC in #drupal-contribute. So, come hang out and stay involved!
Anyone is welcome to participate in the review process. Please consider reviewing other projects that are pending review. I encourage you to learn more about that process and join the group of reviewers.

I thank the dedicated reviewers as well.

avpaderno’s picture

Status: Reviewed & tested by the community » Fixed
avpaderno’s picture

Assigned: Unassigned » avpaderno

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.