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:

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

"Powered by" Credit / White-Label v1.4

The chat widget renders a small "Powered by [Your Brand]" credit at the bottom by default. The brand name is pulled from Admin → Settings → General → Site Name, so customers running the platform under their own brand see their own name — never "MailTrixy".

Hide the credit per workspace

Workspace owners can hide the credit line entirely from Settings → Channels → Live Chat → Configure:

• Toggle "Show 'Powered by' credit" off.
• Click Save.
• Refresh any page that embeds the widget — the credit line is gone.

Hide the credit for an entire pricing tier

If you want the credit hidden for every customer on a specific plan (typical "White-Label add-on" pricing pattern):

• Admin → Plans → edit the plan → enable the white_label feature flag.
• All workspaces subscribed to that plan see no credit, regardless of their per-widget toggle.

Three-level fallback: the widget's "Powered by" line is hidden whenever (a) the white-label plan feature is enabled, OR (b) the per-widget toggle is off, OR (c) the platform brand name resolves to empty. The JS itself never falls back to the literal "MailTrixy" string — if no brand is configured, no credit appears.

Other brand leaks — eliminated

The widget JavaScript file at /widget/v1.js contains zero references to "MailTrixy". All console messages use a neutral [Chat] prefix so a visitor inspecting browser DevTools cannot see the underlying platform name.

Widget Language v1.4

All UI strings inside the widget — "Online now", "Type a message…", "Start Chat", placeholders, error toasts — render in the workspace's chosen language. Translate strings once in the Translations Editor; the widget picks them up automatically.

Setting the widget language

1. Open Settings → Channels → Live Chat → Configure.
2. In the Widget Language dropdown, pick the language you want visitors to see.
3. The dropdown lists every language registered in Admin → Languages (MailTrixy ships with 80+ pre-translated languages out of the box).
4. Click Save. Refresh the page where your widget is embedded — UI strings now render in the chosen language.

Default behaviour

If you leave Widget Language set to "— Use workspace default —", the widget renders in:

1. The workspace's default language (Settings → Workspace), or if not set:
2. The platform's default language (Admin → Settings → General → Default Language), or if not set:
3. English.

What gets translated

• Header: "Online now" / "We typically reply fast"
• Pre-chat form: "Start a conversation", introduction sentence, "Your name", "Your email", "Start Chat" button
• Chat input: "Type your message…" placeholder, "Connecting…" loading text
• Error toast: "Sorry, something went wrong. Please try again."
• Branding line: "Powered by" (when shown)
• Welcome & offline messages: rendered with whatever text you typed in the Welcome / Offline fields — type them in your widget language directly.

Adding or editing translations

Each widget string is a normal Laravel translation key. To add or edit translations:

1. Admin → Translations.
2. Pick your target language.
3. Search for the string you want to translate (e.g. "Type your message...").
4. Type the translation. Click Save.
5. Refresh your website — widget shows the updated text.

Adding a new language: Admin → Languages → Add Language. Then translate strings under Admin → Translations.

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.