> For the complete documentation index, see [llms.txt](https://docs.mercuri.cx/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mercuri.cx/features/whatsapp-widget.md).

# WhatsApp Widget

The Mercuri WhatsApp Widget allows website visitors to initiate WhatsApp chats with your business instantly. This guide explains how to configure and install the WhatsApp Widget on your website.

<figure><img src="https://392978341-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsZtOBCP9JV8XEWJpUU4t%2Fuploads%2Fb4OcmN8PaFmoAgUV7pJn%2FScreenshot%202025-03-21%20at%207.37.23%E2%80%AFPM.png?alt=media&amp;token=a645ad86-5533-4ec5-800f-3c955b3778f0" alt=""><figcaption><p>Adding a WhatsApp Widget to your website</p></figcaption></figure>

### Access WhatsApp Widget Settings

1. **Log in** to [Mercuri](https://mercuri.cx).
2. Navigate to **Settings > WhatsApp Widget**.

***

### Configure Widget Settings

1. **Enter Your Business Name:** This will appear as the widget title.
2. **Set a Greeting Text:** Example: "Hey, text me if you need any help."
3. **Enter Your WhatsApp Number:** Ensure the correct country code is selected.
4. **Set a Message Starter Text:** Default text that pre-fills when a user starts a chat (e.g., "Hi").
5. **Upload Your Logo (Optional):** Display your brand logo in the widget.
6. **Choose Widget Alignment:** Select **Left** or **Right** alignment for the widget.
7. **Add More Responders (Optional):** Assign multiple agents to handle chats.

<figure><img src="https://392978341-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsZtOBCP9JV8XEWJpUU4t%2Fuploads%2Fb4OcmN8PaFmoAgUV7pJn%2FScreenshot%202025-03-21%20at%207.37.23%E2%80%AFPM.png?alt=media&amp;token=a645ad86-5533-4ec5-800f-3c955b3778f0" alt=""><figcaption><p>Adding an agent to a WhatsApp Widget</p></figcaption></figure>

### Adding Agents (Responders)

Agents are team members who will respond to customer inquiries through the WhatsApp widget.

{% embed url="<https://www.youtube.com/embed/GxEJMMQBp0I?autoplay=1&loop=1&mute=1>" %}

**How to Add Agents**

1. Navigate to **Settings > WhatsApp Widget > Responders**.
2. Click **+ Add More Responders** to add team members.
3. Enter the **Agent Name**.
4. Assign a **Redirect Number** (the number where messages will be forwarded).
5. Toggle **Agent Enabled** to activate or deactivate the responder.

**Managing Agents**

* **Enable or Disable Agents:** You can switch agents on/off as needed.
* **Edit Agent Details:** Modify an agent's name or redirect number.
* **Remove Agents:** Delete inactive agents from the list.

***

### Publish the Widget

1. For Wix and Shopify store ,click **Publish** to activate the widget.
2. The widget will be automatically pushed to your **Wix or Shopify** store if you are integrated with Mercuri.
3. If you are using a custom website, proceed to the next step.
4. Install the Widget on Custom Websites

   For websites that are not on Wix or Shopify, you can manually install the widget.

   1. **Copy the JavaScript Snippet** from the widget settings.
   2. **Add the Script to Your Website:**
      * Open your website’s **HTML source code**.
      * Paste the script **before the closing `</head>` tag**.
      * Save and upload changes.

***

####