# Solutiontech Customer Chat 💬

[![WordPress.org Plugin](https://img.shields.io/badge/WordPress-5.8%2B-blue.svg)](https://wordpress.org)
[![PHP Version](https://img.shields.io/badge/PHP-7.4%2B-777BB4.svg)](https://php.net)
[![License: GPL v2](https://img.shields.io/badge/License-GPL%20v2-green.svg)](https://www.gnu.org/licenses/gpl-2.0.html)
[![WooCommerce Compatible](https://img.shields.io/badge/WooCommerce-Ready-96588a.svg)](https://woocommerce.com)

**Solutiontech Customer Chat** es una integración de chat moderna y ligera para WordPress y WooCommerce. Construida con altos estándares de rendimiento, privacidad y conversión para conectar visitantes con tu equipo de ventas y soporte sin intermediarios ni dependencias externas.

---

## ✨ Features

- **📱 Floating Chat Button:** Fully responsive, customizable position (bottom-right / bottom-left), custom offsets, and entrance animations (*pulse* or *bounce*).
- **🔴 Notification Badge ("1"):** High-converting unread message counter badge with customizable delay to drive click-through rates.
- **🔔 Web Audio Notification Chime:** Gentle synthesized bubble sound when badge or chat opens (0 external audio files needed).
- **⏱️ Smart Behavior Triggers:** Auto-open chat popup based on time delay, page scroll percentage, or desktop exit-intent.
- **🕒 Business Hours & Availability:** Configure customer service hours and working days with automatic online/offline status and custom notices.
- **📲 Offline Desktop QR Code Scanner:** Allows desktop visitors to scan an offline client-side SVG QR code with their mobile camera to chat immediately on their phone (zero external APIs).
- **💬 Interactive Chat Popup Window:** Simulated chat box with custom avatar, welcome greetings, and direct call-to-action button.
- **🔒 Privacy & GDPR Compliance:** Optional consent checkbox requiring visitors to agree before initiating a chat.
- **👥 Multi-Agent & Department Support:** Enable multi-agent mode to let visitors choose between different representatives (Sales, Support, Billing) with individual avatars and phone numbers.
- **🛍️ WooCommerce Direct Sales Integration:**
  - "Order via WhatsApp" button on Single Product pages with pre-filled product title, SKU, price, and URL.
  - "Inquire via WhatsApp" on the Cart page sending the current cart breakdown.
- **🏷️ Dynamic Smart Placeholders:** Pre-fill messages with dynamic variables:
  - `{site_name}`
  - `{page_title}`
  - `{page_url}`
  - `{product_name}`
  - `{product_sku}`
  - `{product_price}`
  - `{product_url}`
- **📊 Conversion Tracking:**
  - Automatic Google Analytics 4 (GA4) event: `whatsapp_click`.
  - Automatic Meta Pixel (Facebook) event: `WhatsAppClick`.
  - Custom JavaScript event `solutiontech_whatsapp_click` dispatched on `window` for Google Tag Manager (GTM).
- **🔲 Shortcode Support:** Insert a click-to-chat button anywhere in your content using `[solutiontech_whatsapp]`.
- **⚡ Ultralight & Fast:** Zero external trackers or third-party APIs. Pure client-side vanilla JavaScript and SVG rendering.
- **🔒 WordPress Standards Compliant:** Built using WordPress Settings API, nonces, strict sanitization, output escaping, and translatable strings.

---

## 🚀 Installation

### From WordPress Admin
1. Descarga el archivo ZIP del plugin (`solutiontech-customer-chat.zip`) y súbelo desde **Plugins > Añadir nuevo > Subir plugin**.
2. Activa **Solutiontech Customer Chat**.
3. Ve a **Customer Chat** en el menú de WordPress para configurar tus números y apariencia.

### Manual Installation
```bash
cd wp-content/plugins/
git clone https://github.com/Dusanap1991/Solutiontech_Whatsapp.git solutiontech-customer-chat
```

---

## ⚙️ Configuration & Options

The plugin provides a tabbed administration dashboard:

| Tab | Description |
|---|---|
| **General & Single Agent** | Enable/disable widget, configure primary phone number, agent name, status text, and popup intro. |
| **Multi-Agent** | Toggle multi-agent mode, add/remove team members, assign titles, custom numbers, and avatars. |
| **Design & Display** | Set position (bottom-right / bottom-left), button style, primary & header HEX colors, animation, and device visibility. |
| **WooCommerce** | Configure single product order button, placement hook, cart button, and message templates. |
| **Triggers & Badge** | Configure notification badge, bubble pop sound, auto-open delay, scroll trigger, exit intent, and offline desktop QR code. |
| **Business Hours** | Set working days, opening/closing hours, and choose to hide or show offline notices. |
| **Privacy & GDPR** | Enable mandatory privacy consent checkbox with custom legal agreement text. |
| **Analytics & Tracking** | Enable/disable automatic GA4 and Meta Pixel click tracking. |
| **Shortcodes Guide** | Complete list of shortcode parameters and usage examples. |

---

## 🔣 Shortcode Usage

You can embed a chat button anywhere using the `[solutiontech_whatsapp]` shortcode:

```text
[solutiontech_whatsapp]
```

### Supported Attributes

| Attribute | Default | Example | Description |
|---|---|---|---|
| `phone` | Default phone | `phone="5491123456789"` | Specific international phone number (no + or spaces). |
| `text` | `"Chat on WhatsApp"` | `text="Contact Sales"` | Button label text. |
| `message` | Default message | `message="Hello, I have a question about {page_title}."` | Pre-filled message with smart tags. |
| `color` | `#25D366` | `color="#128C7E"` | Background color in HEX. |
| `class` | `""` | `class="my-custom-btn"` | Custom CSS classes. |

---

## 🛠️ Developer Hooks & Events

### Custom JavaScript Event (GTM / Custom Analytics)
Every time a visitor clicks on any chat trigger (widget, popup agent, WooCommerce button, or shortcode), a custom DOM event is dispatched:

```javascript
window.addEventListener('solutiontech_whatsapp_click', function (e) {
    console.log('Chat clicked:', e.detail.agent, e.detail.source, e.detail.phone);
});
```