Floating Widget
Last updated
Last updated
The WhatsApp Chat WordPress plugin allows you to create and set up the floating widget in a central menu without leaving the page.
So you have added multiple WhatsApp agent phone numbers in the previous tutorial, let's select one or more of them to display on the WhatsApp widget.
From your WordPress admin dashboard, go to WhatsApp > Floating Widget > open Selected Accounts tab.
Search and click on the agent from the dropdown list
Drag and drop to reorder your WhatsApp contacts
The WhatsApp Chat WordPress widget comes in two shapes:
Floating button: a minimized click-to-chat WhatsApp icon
Expanded widget: a welcome modal where your customers choose one WhatsApp contact to start the conversation
Customize the floating button
Go to WhatsApp > Floating Widget > open Design tab.
If you'd like to alter the default settings, here are the options:
Widget Position: left or right of bottom corner
Show Widget Label: enable the tooltip next to the floating button
Widget Label Text: a small greetings that might go like "Need help? Chat with us"
Widget Label Width: the width of the small greetings box in pixel
Widget Distance: the bottom and left/right margin
Customize the expanded widget
Although the built-in settings are ready to use, you can personalize the widget appearances with these options:
Widget Text: it shows Start a Conversation by default, you can localize this title or edit it to fit your business purpose
Description: edit the sub-heading below the title to convey a warm welcome
Response Time Text: show your customer responsiveness on a daily basis
GDPR Notice: display a GDPR statement, privacy policy link, and cookie consent checkbox to make sure your WhatsApp widget are GDPR compliant
Live preview the floating widget and click Save Changes to finish the button design and widget customization.
All the custom text fields are HTML supported so it's very easy to format text and add links.
Go to WhatsApp > Floating Widget > open Display Settings tab.
Here you can choose to show or hide the WhatsApp floating widget on desktop and mobile devices.
To show the WhatsApp floating widget on specific pages, choose Show on these pages and tick on those pages.
To show the WhatsApp floating widget on all pages, choose Show on all pages and except nothing. If you want to hide it on Checkout page, tick on Checkout, and that's it.
In this tab, you also have the option to localize the offine notice for your WhatsApp agents on the day they'll be working but not yet available.
It's call Time Symbols, in which h stands for hours and m stands for minutes. So you can change it to match your locale such as 時 and 分 respectively.
Here's how the unavailable notice might look like on the WhatsApp agent list. Please refer to the screenshot below where it shows I will be back in 1h:26m. The WhatsApp icon is gray out and unclickable until Kevin, the Technical Support agent, appears online.
