# 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

![](/files/-MghzhyEVKHs1YuY5sOc)

### 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

![](/files/-Mgi2srel05GTaSRZnj5)

**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

![](/files/-MgiBe1o_Wt5ooUgmZKv)

Live preview the floating widget and click **Save Changes** to finish the button design and widget customization.

{% hint style="success" %}
All the custom text fields are HTML supported so it's very easy to format text and add links.
{% endhint %}

### 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.

![](/files/-MgiJ9uibArb5rPZqOpT)

#### 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.

{% hint style="info" %}
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.
{% endhint %}

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.

![](/files/-MgiLMgKfsh9eJDAtqGL)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ninjateam.gitbook.io/whatsapp-for-wordpress/how-it-works/floating-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.