# Live Chat Widget

## Overview

MailTrixy includes an embeddable Live Chat Widget that you can add to any website. Visitors can start a conversation directly from your site, and messages appear in your MailTrixy unified inbox in real time. Combined with AI auto-reply, the widget can provide instant responses to common questions even when your team is offline.

## Widget Configuration

Configure the widget from Settings → Channels → Live Chat.

- Widget title: The heading shown at the top of the chat window (e.g., "Chat with us").
- Welcome message: The first message visitors see when they open the widget (e.g., "Hi! How can we help you today?").
- Pre-chat form: Optionally require visitors to enter their name and email before starting a conversation. This creates a contact record in MailTrixy.
- Offline message: Displayed when all agents are offline. Can include a form for leaving a message that converts into an email conversation.
- Operating hours: Define when the widget shows as "online" vs "offline". Outside operating hours, the widget can either hide completely or show the offline message form.
- Agent avatar: Upload a photo or use a default avatar for agent replies in the widget.

## Embedding on Your Website

To add the widget to your website, paste the following script tag before the closing `</body>` tag on every page where you want the chat widget to appear:

    <script
      src="https://yourdomain.com/widget/chat.js"
      data-token="YOUR_WIDGET_TOKEN"
      async>
    </script>

Replace `yourdomain.com` with your MailTrixy installation domain and `YOUR_WIDGET_TOKEN` with the token shown in your Live Chat settings.

The script loads asynchronously (it will not slow down your page) and renders a small chat bubble in the bottom-right corner of the page.

### Platform-Specific Instructions

- WordPress: Add the script to your theme's `footer.php` file, or use a plugin like "Insert Headers and Footers" to add it site-wide.
- Shopify: Go to Online Store → Themes → Edit Code → `theme.liquid` and paste the script before `</body>`.
- Wix: Use the "Custom Code" feature under Settings → Advanced → Custom Code.
- React/Vue/Next.js: Add the script dynamically in a `useEffect` hook or `mounted` lifecycle method, or include it in your `index.html`.

## Customization Options

The widget appearance can be customized to match your brand:

Option | Description
--- | ---
Primary color | The main color of the widget header and send button. Enter a hex code (e.g., #4F46E5).
Position | Bottom-right (default) or bottom-left.
Bubble icon | Choose from preset icons (chat, message, help) or upload a custom icon.
Widget size | Compact, Standard, or Large. Affects the chat window dimensions.
Font | Inherits your website's font by default, or specify a custom font family.
Border radius | Control how rounded the widget corners are.
Z-index | Adjust if the widget is hidden behind other elements on your page.

All customizations are applied from the MailTrixy dashboard — no need to modify the embed code.

## AI Auto-Reply in Widget

The Live Chat widget fully supports AI-powered auto-replies. When a visitor sends a message:

1. The message is received by MailTrixy in real time via WebSocket.
2. If AI is enabled for the Live Chat channel, the AI generates a response using your Knowledge Base.
3. The reply is sent back to the visitor within seconds (typically 2–5 seconds depending on the AI model).
4. A typing indicator ("Agent is typing...") is shown while the AI generates the response.

This means your Live Chat can function as a fully automated support agent 24/7, handling common questions instantly. When the AI is not confident enough to reply (below your threshold), the conversation is flagged for human follow-up, and the visitor sees a message like "Let me connect you with a team member."

> Tip: For the best live chat experience, use a fast AI model (GPT-4o-mini or Gemini Flash) to minimize response time.

## Mobile Responsive

The Live Chat widget is fully responsive and works well on mobile devices:

- Mobile view: On screens smaller than 480px, the widget expands to fill the full screen when opened, providing a native app-like experience.
- Touch optimized: All buttons and input fields are sized for touch interaction.
- Keyboard handling: The widget adjusts its position when the mobile keyboard opens, keeping the input field visible.
- Performance: The widget script is lightweight (~18 KB gzipped) and does not affect mobile page load scores.

No additional configuration is needed for mobile support — it works automatically.

## Privacy & GDPR Compliance

If you collect visitor information through the pre-chat form or during conversations, you must comply with applicable privacy regulations:

- Cookie Consent: The live chat widget sets cookies to track visitor sessions. Ensure your cookie consent banner covers the live chat widget.
- Data Collection Notice: If your pre-chat form collects names, emails, or phone numbers, inform visitors how their data will be used and stored.
- Data Retention: Configure how long chat transcripts and visitor data are retained in Admin Panel → Settings → Privacy.
- Right to Deletion: Visitors can request deletion of their chat history. Use the contact management tools to process these requests.
- Consent Text: Add a consent checkbox or notice to your pre-chat form explaining data usage. This can be configured in the widget settings.

Note: MailTrixy provides the tools to help you comply with privacy regulations, but it is your responsibility to ensure your specific implementation meets the legal requirements in your jurisdiction. Consult a legal professional if you are unsure about your obligations.