Chat Widget - Complete Styling Control

A highly customizable chat widget that allows full control over colors, fonts, and styling for seamless integration with any website design.

About Paramix Labs

This chat widget lets your users communicate with the Paramix Labs agents you have created and configured for your application. Use it to embed agent-powered conversations directly into your website or product experience.

Learn more about the platform at paramixlabs.com.

🚀 Features

• Full Color Customization - Control every color in the chat interface
• Typography Control - Custom font families, sizes, and weights
• Launcher Button Styling - Customize the chat trigger button with hover effects
• Message Bubble Customization - Different colors for user and assistant messages
• Avatar Styling - Custom colors for user and assistant avatars
• Input Field Customization - Style the message input area
• Status Indicators - Custom colors for connection status and errors
• Container Styling - Borders, shadows, and border radius
• Theme Support - Built-in light/dark themes with custom overrides

📦 Installation

npm install @paramixlabs/chat-widget

🔧 Basic Usage

import { PrmxChat } from "@paramixlabs/chat-widget";

PrmxChat.init({
  apiKey: "your-api-key-here",
});

PrmxChat.open("support-agent", "Support");

You can still load the browser script directly:

<script src="https://widget.paramixlabs.com/chat-widget.iife.js"></script>
<script>
  window.PrmxChat.init({ apiKey: "your-api-key-here" });
  window.PrmxChat.open("support-agent", "Support");
</script>

🎨 Complete Styling Configuration

The widget accepts a comprehensive style object that allows you to customize every aspect of the chat interface:

PrmxChat.init({
  launcherText: "Chat with us! 💬",
  defaultAgentId: "support-agent",
  defaultAgentName: "Support",
  apiKey: "your-api-key-here",
  theme: "light",
  style: {
    // Launcher button styling
    launcher: {
      backgroundColor: "#6366f1",
      color: "#ffffff",
      borderRadius: "30px",
      padding: "15px 25px",
      fontSize: "16px",
      fontWeight: "600",
      boxShadow: "0 4px 12px rgba(99, 102, 241, 0.4)",
      hover: {
        backgroundColor: "#4f46e5",
        transform: "scale(1.05)",
      },
    },

    // Chat container styling
    container: {
      borderColor: "#e5e7eb",
      borderRadius: "16px",
      boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
    },

    // Header styling
    header: {
      backgroundColor: "#f8fafc",
      borderColor: "#e2e8f0",
      titleFontFamily: "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif",
      titleFontSize: "1.25rem",
      titleFontWeight: "600",
      titleColor: "#1e293b",
    },

    // Message styling
    messages: {
      userAvatar: {
        backgroundColor: "#3b82f6",
        color: "#ffffff",
      },
      assistantAvatar: {
        backgroundColor: "#10b981",
        color: "#ffffff",
      },
      userBubble: {
        backgroundColor: "#dbeafe",
        color: "#1e40af",
      },
      assistantBubble: {
        backgroundColor: "#f0fdf4",
        color: "#166534",
      },
      contentFontFamily: "'Inter', 'Segoe UI', sans-serif",
      contentFontSize: "0.875rem",
      contentFontWeight: "500",
      timestampFontFamily: "'Inter', 'Segoe UI', sans-serif",
      timestampFontSize: "0.75rem",
      timestampColor: "#64748b",
      timestampOpacity: 0.8,
    },

    // Input area styling
    input: {
      borderColor: "#cbd5e1",
      backgroundColor: "#ffffff",
      placeholderColor: "#94a3b8",
      textColor: "#1e293b",
      buttonColor: "#3b82f6",
      buttonHoverColor: "#2563eb",
    },

    // Status indicators
    status: {
      connectedColor: "#10b981",
      disconnectedColor: "#ef4444",
      errorBackgroundColor: "#fef2f2",
      errorTextColor: "#dc2626",
      typingBackgroundColor: "#f0f9ff",
      typingTextColor: "#0369a1",
    },

    // Typography
    typography: {
      primaryFontFamily: "'Poppins', 'Segoe UI', sans-serif",
      secondaryFontFamily: "'Inter', 'Segoe UI', sans-serif",
      monospaceFontFamily: "'JetBrains Mono', 'Fira Code', monospace",
    },
  },
});

🌙 Dark Theme Example

PrmxChat.init({
  launcherText: "Chat 💬",
  defaultAgentId: "support-agent",
  defaultAgentName: "Support",
  apiKey: "your-api-key-here",
  theme: "dark",
  style: {
    launcher: {
      backgroundColor: "#1f2937",
      color: "#f9fafb",
      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)",
    },
    container: {
      borderColor: "#374151",
      backgroundColor: "#111827",
    },
    header: {
      backgroundColor: "#1f2937",
      borderColor: "#374151",
      titleColor: "#f9fafb",
    },
    messages: {
      userBubble: {
        backgroundColor: "#3b82f6",
        color: "#ffffff",
      },
      assistantBubble: {
        backgroundColor: "#374151",
        color: "#f9fafb",
      },
    },
    input: {
      borderColor: "#4b5563",
      backgroundColor: "#1f2937",
      textColor: "#f9fafb",
    },
  },
});

🎯 Style Properties Reference

Launcher Button (style.launcher)

• backgroundColor - Button background color
• color - Button text color
• borderRadius - Button corner radius
• padding - Button internal spacing
• fontSize - Button text size
• fontWeight - Button text weight
• boxShadow - Button shadow effect
• hover.backgroundColor - Hover background color
• hover.transform - Hover transform effect

Container (style.container)

• borderColor - Chat window border color
• borderRadius - Chat window corner radius
• boxShadow - Chat window shadow effect

Header (style.header)

• backgroundColor - Header background color
• borderColor - Header bottom border color
• titleFontFamily - Header title font family
• titleFontSize - Header title font size
• titleFontWeight - Header title font weight
• titleColor - Header title text color

Messages (style.messages)

• userAvatar.backgroundColor - User avatar background color
• userAvatar.color - User avatar icon color
• assistantAvatar.backgroundColor - Assistant avatar background color
• assistantAvatar.color - Assistant avatar icon color
• userBubble.backgroundColor - User message bubble background
• userBubble.color - User message text color
• assistantBubble.backgroundColor - Assistant message bubble background
• assistantBubble.color - Assistant message text color
• contentFontFamily - Message content font family
• contentFontSize - Message content font size
• contentFontWeight - Message content font weight
• timestampFontFamily - Timestamp font family
• timestampFontSize - Timestamp font size
• timestampColor - Timestamp text color
• timestampOpacity - Timestamp opacity (0-1)

Input (style.input)

• borderColor - Input field border color
• backgroundColor - Input area background color
• placeholderColor - Placeholder text color
• textColor - Input text color
• buttonColor - Send button color
• buttonHoverColor - Send button hover color

Status (style.status)

• connectedColor - Connected status color
• disconnectedColor - Disconnected status color
• errorBackgroundColor - Error message background
• errorTextColor - Error message text color
• typingBackgroundColor - Typing indicator background
• typingTextColor - Typing indicator text color

Typography (style.typography)

• primaryFontFamily - Primary font family (headers)
• secondaryFontFamily - Secondary font family (body text)
• monospaceFontFamily - Monospace font family (code)

🔄 Dynamic Styling

You can update the widget styling dynamically by reinitializing:

// Close existing chat
widget.close("support-agent");

// Reinitialize with new styling
PrmxChat.init({
  ...existingConfig,
  style: {
    ...existingStyle,
    launcher: {
      backgroundColor: "#ef4444", // New color
      ...existingStyle.launcher,
    },
  },
});

🎨 Color Formats

All color properties accept standard CSS color formats:

• Hex: "#6366f1"
• RGB: "rgb(99, 102, 241)"
• RGBA: "rgba(99, 102, 241, 0.8)"
• Named colors: "red", "blue", etc.
• CSS variables: "var(--primary-color)"

📱 Responsive Design

The widget automatically adapts to different screen sizes and maintains your custom styling across all devices.

🔒 Security

• API keys are passed securely through the configuration
• No sensitive data is stored in the browser
• Supports CORS for cross-origin embedding

📚 Examples

See example.html for a complete demonstration of all styling options.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.