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.

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:

The message is received by MailTrixy in real time via WebSocket.
If AI is enabled for the Live Chat channel, the AI generates a response using your Knowledge Base.
The reply is sent back to the visitor within seconds (typically 2–5 seconds depending on the AI model).
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.