# WhatsApp Widget

<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&#x26;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&#x26;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.

***

####