Floating Widget

The WhatsApp Chat WordPress plugin allows you to create and set up the floating widget in a central menu without leaving the page.

Adding WhatsApp chat widget to WordPress

1. Select WhatsApp accounts

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

2. Design the button and widget

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.

3. Display WhatsApp widget

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.

Customize time remaining symbols

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.