WhatsApp
Click
to Chat

Documentation for v1.0.3

1. Quick Overview
2. Installation
3. Settings
4. Using Shortcode
5. Translation

Thank you for purchasing WhatsApp Click to Chat plugin for WordPress. This document explains the features of the plugin and how to use them. If you have any questions that are beyond the scope of this help file, please feel free to email via my email address.

Quick Overview

This plugin displays a list of WhatsApp accounts on your site which when clicked, will take the user to that particular account on https://web.whatsapp.com/.

Installation

Installing the plugin can be done in two ways:

• Using FTP Upload
  1. Unzip the wpt-whatsapp.zip file and upload the extracted folder to /wp-content/plugins/ folder on your server.
• Using WordPress Upload
  1. Log in to the WordPress Administration Panels.
  2. Go to Plugins > Add New.

     

  3. Click the Upload Plugin link and then upload the wpt-whatsapp.zip file.

     

  4. Click the Install Now button.

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 adjusting the settings.

Settings

To manage your settings, go to WhatsApp Click.

In the settings page, you will find a form divided into the following 4 sections:

1. Display Settings

The fields on this section can be used to adjust the following style:

1. Toggle Text, Toggle Text Color, and Toggle Background Color will affect the toggle part in the area number 1. Note that leaving Toggle Text empty will make the toggle round.
2. Description text will fill the area number 2. Note that the style for the toggle will also be used to style this description area.
3. Container Text Color and Container Background Color will style the area number 3.
4. Account Item Background Color on Hover will style the area number 4.
5. Container Maximum Width will set the limit on how wide the box can be. The box is responsive; so if the user's screen is narrower that the maximum width, it will use the available space.

Load-In Settings

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

• If you set the Delay Time to more than 0 second, the plugin will wait until that time before sliding-in automatically.
• If you set the Inactivity Time to more than 0 second, the plugin will wait until the user has been idled for that amount of time.
• If you set the Scroll Length to more than 0 percent, the plugin will show the box after the page has been scrolled that long down.

Note that each condition above only work when the WhatsApp box hasn't been displayed before. Meaning that if users click the toggle before it's time to auto-display the box, then the auto-display won't work at all.

Page Targeting

By using page targeting, you can set which page the WhatsApp box should or shouldn't be displayed on your site.

WhatsApp Accounts

To add an account, click the Add Account button like in the following screenshot:

Which will then populate the area with some empty fields:

Other than Page Targeting, the plugin also check for the availability of each account. If the Page Targeting is all checked but none of the account is available for a particular time and day, then the WhatsApp box will not be displayed.

Once you have done with the settings, click the Save Changes button then go to the front-end side of your site. You should see the WhatsApp toggle on the bottom right side.

Using Shortcode

You can also display a link which when clicked will open WhatsApp chat by using a [whatsapp] shortcode which accepts the following attributes:

• number to set the WhatsApp number.
• auto_text to set a pre-populated text when user open WhatsApp app on their phone or on the web.
• text_color to set the button's text color.
• background_color to set the button's background color.
• text_color_on_hover to set the text color when the button is being hovered.
• background_color_on_hover to set the background color when the button is being hovered.
• icon, which if set to no will remove the icon from the button.
• display, which if set to block will take the full with for the button.

And the text between the [whatsapp]...[/whatsapp] tags will be used as the button's text, like the follwing example:

[whatsapp number="6281572276572" background_color="#3a589e"  text_color="white" background_color_on_hover="#25D366" auto_text="Hello..." icon="no" display="block"]A full width chat button with no icon[/whatsapp]

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.

   

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.