Quick Overview

This plugin is a simple tool to show your team’s accounts in one floating widget or using buttons on pages. When an account is clicked, it will take the user to that particular account on https://web.whatsapp.com/ if the user is using a desktop, or open the WhatsApp application if she is on a mobile device.

If you have any question that are beyond the scope of this documentation, please feel free to email me via my contact page.

Installation

Installing the plugin can be done in two ways:

Either step above only install the plugin. You also need to activate the plugin in order for it to work. Go to Plugin > Installed Plugins and you'll find the WhatsApp Click to Chat listed in a row. Click the Activate link to activate the plugin.

Now that you have the plugin activated, you can start adding accounts.

Adding WhatsApp Accounts

To start adding account, go to WhatsApp > Add New Account on the sidebar.

Once you get to the form page, you'll find the form divided in sections.

Account Title

The first field is a textbox with a placeholder "Enter title here". The value of this field won't be displayed on the front-end. But, it is recommended to fill this field with a meaningful identifier because it will used for the following functionality:

Account Information

Based on visibility, only Name, Title, and Button Label will be displayed on the front-end.

If you want an account to show twice a day with a break between, you can create two accounts with the same number and information except fot the Time Availability.

Set one account with a title [Your Name] - Before Lunch and set the time availability to e.g. 08:00 to 11:00. After that, create another account with the title [Your Name] - After Lunch with the time availability 13:00 to 17:00.

Later, choose those two accounts when you're selecting accounts to show-up on the floating widget. This way the button will be displayed from 08:00 to 17:00 with a break between 11:00 to 13:00.

Page Targeting

Page Targeting only works for accounts displayed on the floating widget. It has no effect on shortcode buttons.

To include or exclude pages, type the title of the page you want. It will then list all the matched title up to 50 items under the textbox. Choose any item by clicking it.

Button Style

For consistency, the plugin provides a feature to set a default styles for buttons which will apply across the website. This section is provided just in case you need a unique style for a button.

Featured image will be used as an avatar. If you don't provide any image, the plugin will use WhatsApp logo instead.

Displaying Floating Widget

To start adding accounts to the Floating Widget navigate to WhatsApp > Floating Widget. There, you'll find some forms divided into three sections.

Selecting Accounts

The Selected Accounts section will give you a textbox to search for account titles you have created earlier. If matches were found, they will be displayed below the textbox. Click any of them to select an account. and then click the Save Selected Accounts button.

Next, refresh your front-end side. Any account set for the current page, time, and day should be displayed on the floating widget.

Display Settings

You can use this form to set the wording and styling of the floating widget. Each of the fields already has a default value set when you activated the plugin for the first time. You can change them to fit your needs.

Load-In Settings

You can set the auto-display of the box in three condition:

WooCommerce Button

Navigate to WhatsApp > WooCommerce Button to automatically display a button on your WooCommerce product page.

On the page, you will find a similar textbox you can use to search for accounts. Click any of the accounts to select it.

The selected account will be used as the default account displayed on the product page. If you wish to alter this default setting for a particular product, you can do so on the product edit page. The plugin adds a meta box called WhastApp Contact Button on the product edit page to remove the default account or to change it to another account.

A button can be placed on on of four different positions:

When you're done setting the button, refresh a product page on the front-end side. The button will be displayed if it matches with its time and day availability settings.

General Settings

Navigate to WhatsApp > Settings to set the default label and style for buttons. All of these fields except for Button Style are replaceable for each account.

Using Shortcodes

On every accounts' edit page, you will find a meta box on the right side of the page which contains the shortcode for you to copy and then paste it on the editor.

Connecting to Analytics Services

If you have Google Analytics or Facebook Pixel (or both) installed on your WordPress, then the plugin will automatically send data to those services when user clicks a WhatsApp account.

I find the following guides useful for those who haven't had analytics installed on their WordPress:

Translation

To make a translation for this plugin, you'll need a gettext catalog editor, and Poedit is one of them. Install the software and follow the steps below:

  1. In the unzipped plugin files, open the folder languages and find a wptwa.pot file. Open the file using Poedit and you'll see a notification like the following:

    Click the "Create new translation" button and choose the language you're going to translate the plugin to, then save the file. Now you should have a .mo and a .po files inside the languages folder.

  2. Change the .mo and .po file names so that they have a wptwa- prefix. The use of a prefix is required by WordPress and wptwa is the text-domain that I use for this plugin. For example, if you are translating the plugin to French, the file name should be wptwa-fr_FR.mo and wptwa-fr_FR.po.

  3. Open the renamed .po file using Poedit, start translating, and save.

    1. The current selected text. This is where you choose which text to translate.
    2. The complete text of the selected one.
    3. The textarea where you set the translation of the selected text.
  4. Go to Settings > General and you'll find the Site Language options. Choose your language and save changes.

And now the plugin should use your translation.