Documentation: WhatsApp Button for WordPress
System Requirements
Plugin Installation
- Log in to your CMS WordPress site control panel.
- On the left side of the administrative menu, click on "Plugins".
- On the page that opens, at the top click on "Add new".
- This will open a page with the addition of plugins to the site from the official WordPress catalog. You need to click on the "Upload Plugin" button.
- After clicking on the page, a block with the download of the plugin archive will appear. Click on the "Choose file" button, select the archive with the plugin obtained by purchasing from IWS.BY and click on the "Install Now" button.
- Once the plugin is installed, the page will refresh and you will be prompted to activate the plugin. Click the "Activate plugin" button.
- After successful activation, you will be shown a window notifying you that the plugin has been successfully activated.
Plugin settings
To access the plugin settings, navigate through the admin panel menu to Plugins → IWS.BY WhatsApp Button.
The plugin settings page will open. The settings page is divided into tabs. The sections in this documentation correspond to the tab names.
License Key
Enter the license key you received after placing your order on IWS.BY. Without a valid license key, the plugin will not receive updates and may not function properly.
Main Settings
Activate the WhatsApp button?
When set to "Yes," a floating WhatsApp button will be displayed on your website using the configuration options below.
Button Type
This option sets the WhatsApp button type. "Button" – a simple floating button will appear on the website; clicking it opens a chat with the specified WhatsApp number. "Manager" – clicking the button opens a popup with manager information and a button that opens a chat with the specified WhatsApp number.
Phone Number
Enter the full phone number without the plus sign (+), special characters, or spaces. Example of a valid phone number: 375441111111.
Link opening attribute
This option determines how the link opens when a visitor clicks the WhatsApp button. The link can open in the same browser tab or in a new tab.
Button Size
This field sets the size of the WhatsApp button on your website. The value applies to both the width and height of the button. Specify a numeric value in pixels.
Button Color
This option sets the background color of the WhatsApp button. Enter a HEX color code.
Icon Color
This option sets the color of the WhatsApp icon on the button. Enter a HEX color code.
Button location
This option determines which side of the screen the WhatsApp button will appear on for website visitors. The button is displayed at the bottom of the screen, aligned to the side selected in this option.
Right indent
Specify the distance from the right edge of the screen to the WhatsApp button. Enter a numeric value in pixels. This value is applied only when "Right side" is selected in the Button Position option.
Left indent
Specify the distance from the left edge of the screen to the WhatsApp button. Enter a numeric value in pixels. This value is applied only when "Left side" is selected in the Button Position option.
Bottom indent
Specify the distance from the bottom edge of the screen to the WhatsApp button. Enter a numeric value in pixels.
Layer level (Z-INDEX)
This field sets the stacking order of the WhatsApp button layer. This corresponds to the CSS z-index property.
Border Settings
Enable Border?
When set to "Yes," a border will be added to the WhatsApp button using the settings below.
Border Width
This field sets the width of the WhatsApp button border. Enter a numeric value in pixels. This corresponds to the CSS border-width property.
Border Style
This option sets the style of the WhatsApp button border. Available styles include solid, double, dotted, and dashed. This corresponds to the CSS border-style property.
Border Color
This option sets the color of the WhatsApp button border. Enter a HEX color code. This corresponds to the CSS border-color property.
Animation Settings
Enable Animation?
When set to "Yes," the selected animation will be applied to the WhatsApp button.
Animation Type
This option sets the type of animation applied to the WhatsApp button. Four animation types are available: pulse, bounce, shake, and icon spin.
Duration
This field sets the duration of the animation. It applies to all animation types. Specify a numeric value in seconds. The default is 2 seconds.
Pulse Length
This field sets the maximum pulse distance. It applies to the "Pulse" animation type. Specify a numeric value in pixels. The default is 15 pixels.
Jump Height
This field sets the maximum jump height from the center. It applies to the "Bounce" animation type. Specify a numeric value in pixels. The default is 9 pixels. After specifying the maximum point, the plugin automatically calculates the intermediate jump heights.
Width of movement
This field sets the maximum movement width of the button from the center. It applies to the "Shake" animation type. Specify a numeric value in pixels. The default is 9 pixels. After specifying the maximum point, the plugin automatically calculates the intermediate movement widths.
Manager Settings
The manager settings in this documentation are divided into two blocks. The first block configures the basic settings, and the second block configures the custom design of the popup window.
For the settings from this tab to take effect in the plugin, the "Manager" value must be selected for the "Button Type" option in the "Main Settings" tab.
Basic Manager Settings
Window Design
This option sets the color design of the popup window with the manager's information. The module includes two ready-made design options: Light and Dark. If these designs do not suit your website, you can select "Custom" design and adjust it to match your website's style.
Image of the manager
This option sets the manager's image in the popup window. It is recommended to use a square image. Images smaller than 150 pixels in width and height are not recommended. WordPress will automatically optimize and resize larger images. The main requirement is that the image must be square.
Manager Name
Enter the manager's name in this field. You can enter a first and last name, or any other text data.
Manager Department
Enter the manager's department in this field. You can enter any other text data if needed. The data from this field is displayed below the manager's name.
Message from Manager
Enter the welcome message from the manager in this field. It is recommended to use a short text message to maintain a convenient popup window design.
Button name
This field sets the text label of the button in the popup window. Clicking this button will open a chat with the specified number in the module settings via the WhatsApp messenger.
Custom Popup Design Settings
To apply custom design settings to the popup window, the "Custom" value must be selected in the "Window Design" field on the page above.
Header Background Color
This option sets the background color of the top part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Name Color
This option sets the text color of the manager's name in the top part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Department Color
This option sets the text color of the manager's department in the top part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Close Icon Color
This option sets the color of the close icon in the top part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Close icon color when hovering
This option sets the color of the close icon in the top part of the popup window when hovered over with the mouse cursor. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Content Background Color
This option sets the background color of the central part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Message Background Color
This option sets the background color of the manager's message in the central part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Message color
This option sets the text color of the manager's message in the central part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Footer Background Color
This option sets the background color of the bottom part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Button Background Color
This option sets the background color of the button in the bottom part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Button background color when hovering
This option sets the background color of the button in the bottom part of the popup window when hovered over with the mouse cursor. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Text color on button
This option sets the text color of the button in the bottom part of the popup window. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Text color on button when hovering
This option sets the text color of the button in the bottom part of the popup window when hovered over with the mouse cursor. Enter a HEX color code. It is selected via the WordPress color palette that opens when clicking on this field.
Analytics Settings
This section is designed to track events and goals triggered by clicking the plugin's WhatsApp buttons. Events are sent to Google Analytics if needed. Goals are sent to Yandex Metrica if needed. If you require integration with other analytics services, please email us, and we will try to implement it.
The settings in this section only work if you have the Google Analytics or Yandex Metrica integration codes installed.
Enable Analytics?
When set to "Yes," analytics capabilities will be applied to the WhatsApp button.
Google Analytics
Enable Google Analytics?
When set to "Yes," the Google Analytics settings below will be applied to the WhatsApp button.
The fields below are applied depending on the button type. If the button type is "Button," an event is sent when the floating button is clicked. If the button type is "Manager," multiple events are sent: the first when the floating button is clicked, and the second when the button in the popup window is clicked to open the chat.
Instructions for creating a new event are available at the following link: https://support.google.com/analytics/answer/10085872?hl=en
"Button" Mode
In this mode, a single event is sent when the floating button is clicked.
Parameter
Enter the parameter name you used when creating the event in Google Analytics.
Value
Enter the parameter value you used when creating the event in Google Analytics.
"Manager" Mode
In this mode, two events are sent. The first is when the floating button is clicked. The second is when the button in the popup window is clicked.
Parameter (Step 1)
Enter the parameter name for the first step you used when creating the event in Google Analytics. Step 1 is clicking the floating button.
Value (Step 1)
Enter the parameter value for the first step you used when creating the event in Google Analytics. Step 1 is clicking the floating button.
Parameter (Step 2)
Enter the parameter name for the second step you used when creating the event in Google Analytics. Step 2 is clicking the button in the popup window that opens the WhatsApp chat.
Value (Step 2)
Enter the parameter value for the second step you used when creating the event in Google Analytics. Step 2 is clicking the button in the popup window that opens the WhatsApp chat.
Yandex Metrica
Enable Yandex Metrica?
When set to "Yes," the Yandex Metrica settings below will be applied to the WhatsApp button.
Yandex Metrics ID
Enter the numeric ID of your resource in Yandex Metrica. To learn how to find your resource ID in Yandex Metrica, please refer to this link: https://yandex.com/support/metrica/general/tag-id.html.
The fields below are applied depending on the button type. If the button type is "Button," an event is sent when the floating button is clicked. If the button type is "Manager," multiple events are sent: the first when the floating button is clicked, and the second when the button in the popup window is clicked to open the chat.
Instructions for creating a new goal are available at the following link: https://yandex.com/support/metrica/general/goal-js-event.html. The plugin supports the "JavaScript event" goal type.
"Button" Mode
In this mode, a single event is sent when the floating button is clicked.
Target ID
Enter the goal identifier you used when creating the goal in Yandex Metrica.
"Manager" Mode
In this mode, two events are sent. The first is when the floating button is clicked. The second is when the button in the popup window is clicked.
Target ID (step 1)
Enter the goal identifier for the first step you used when creating the goal in Yandex Metrica. Step 1 is clicking the floating button.
Target ID (step 2)
Enter the goal identifier for the second step you used when creating the goal in Yandex Metrica. Step 2 is clicking the button in the popup window that opens the WhatsApp chat.
Plugin update error
If you have an error when updating a plugin in the WordPress control panel, then this section of the instructions is necessary for you. Usually the error when updating looks like this:
This error appears in several cases, they are all related to the plugin's license key.
1) You do not have the license key filled in in the plugin settings.
Go to the plugin settings and check if the field "License key" is filled in. Without a license key update is not possible to download. There are times when you add a license key, but CMS WordPress did not save it correctly, for this plugin settings after entering the license key, click "Save".
2) Your plugin version cannot be updated automatically.
There are versions of plugins that cannot update automatically. To do this, go to the IWS.BY website at the link https://iws.by/en/my-account/downloads/. In the list of available downloads, find your plugin and download by clicking on the button on the right. Go to the administrative part of your site, to the plugin section, and download the new version using the WordPress plugin installer. Due to security updates to the update server, some plugin versions need to be updated manually. To check the list of such plugins for your version of the plugin, go to the following link: List of versions of WordPress plugins that can be updated manually.
3) Your license key has expired.
To check the expiration date of your license key, follow this link https://iws.by/en/my-account/view-license-keys/. In the list of license keys, find your plug-in key and in the column "Valid until" check its relevance. If the license key has expired, it is not possible to get updates. To solve this issue: make a new order and get the current license key.
3) The license key is not valid on your current site.
Our update system is designed so that the first time you access the update server, the license key is assigned to the requesting site. If you try to use a license key on more than one site, updates will only be available for one site. If you need updates for multiple sites, make a purchase of multiple license keys on the site. Sites without license keys will not be able to receive updates.
Attention! If you have changed the address of the site and can not download updates, write to us at support@iws.by with the new address of the site, we will update the data on our update server and within 24 hours you will be able to receive updates.
Support
IWS.BY support service for questions regarding our products is available via email: support@iws.by.
All available support options are available on the Support page: Go to.