Chat Support Example

Floating AI chat widget for customer support
Streaming
Chat Widget
Customer Support

Overview

This example demonstrates how to implement BranderChatWidget for customer support with streaming. The floating chat widget appears on any page, providing instant AI-powered assistance with progressive UI loading.

Implementation (Streaming)

app/layout.tsx
import { BranderChatWidget, sseStream } from "@brander/sdk";
import { MessageCircle } from "lucide-react";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}

        {/* Floating Chat Widget */}
        <BranderChatWidget
          betaKey="bux_your_token"
          projectId="customer-support"
          onQueryStream={(params) => sseStream("/api/agent", { params })}
          position="bottom-right"
          offset={{ bottom: 24, right: 24 }}
          widgetSize={{ width: "400px", height: "650px" }}
        >
          {/* Custom trigger button */}
          <button
            style={{
              display: "flex",
              alignItems: "center",
              gap: "8px",
              padding: "14px 28px",
              backgroundColor: "#0066FF",
              color: "white",
              border: "none",
              borderRadius: "50px",
              fontSize: "16px",
              fontWeight: 600,
              cursor: "pointer",
              boxShadow: "0 4px 12px rgba(0, 102, 255, 0.3)",
              transition: "all 0.2s ease"
            }}
          >
            <MessageCircle size={20} />
            Need Help?
          </button>
        </BranderChatWidget>
      </body>
    </html>
  );
}

Trigger Button Variations

Simple Floating Action Button
<BranderChatWidget {...props}>
  <button style={{
    width: "60px",
    height: "60px",
    borderRadius: "50%",
    backgroundColor: "#1976d2",
    color: "white",
    border: "none",
    fontSize: "28px",
    cursor: "pointer",
    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }}>
    💬
  </button>
</BranderChatWidget>
Branded Chat Button
<BranderChatWidget {...props}>
  <button style={{
    display: "flex",
    alignItems: "center",
    gap: "8px",
    padding: "12px 20px",
    background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
    color: "white",
    border: "none",
    borderRadius: "12px",
    fontSize: "15px",
    fontWeight: 600,
    cursor: "pointer",
    boxShadow: "0 4px 15px rgba(102, 126, 234, 0.4)"
  }}>
    <span>🤖</span>
    <span>AI Assistant</span>
  </button>
</BranderChatWidget>

Position Examples

Bottom Right (Default)

Most common placement for chat widgets.

<BranderChatWidget
  {...props}
  onQueryStream={(params) => sseStream("/api/agent", { params })}
  position="bottom-right"
  offset={{ bottom: 24, right: 24 }}
>
  <button>Chat</button>
</BranderChatWidget>
Bottom Left

Alternative placement if right side is occupied.

<BranderChatWidget
  {...props}
  onQueryStream={(params) => sseStream("/api/agent", { params })}
  position="bottom-left"
  offset={{ bottom: 24, left: 24 }}
>
  <button>Support</button>
</BranderChatWidget>

Example Queries

Great queries for customer support use cases:

Account Management:
  • "How do I reset my password?"
  • "Update my email address"
  • "Cancel my subscription"
Product Support:
  • "How do I use [feature name]?"
  • "Troubleshoot connection issues"
  • "Export my data"
Orders & Billing:
  • "Track my order"
  • "Update billing information"
  • "Request a refund"

Advanced Configuration

With Callbacks and Custom Styling
components/CustomerSupportWidget.tsx
import { BranderChatWidget, sseStream } from "@brander/sdk";
import { useState } from "react";

export function CustomerSupportWidget() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    console.log("Chat opened");
    setIsOpen(true);
    // Track analytics
    analytics.track("chat_opened");
  };

  const handleClose = () => {
    console.log("Chat closed");
    setIsOpen(false);
    // Track analytics
    analytics.track("chat_closed");
  };

  return (
    <BranderChatWidget
      betaKey="bux_your_token"
      projectId="customer-support"
      onQueryStream={(params) => sseStream("/api/agent", { params })}
      position="bottom-right"
      offset={{ bottom: 24, right: 24 }}
      widgetSize={{ width: "450px", height: "700px" }}

      // Callbacks
      onOpen={handleOpen}
      onClose={handleClose}

      // Backdrop
      showBackdrop={true}
      backdropOpacity={0.3}
      closeOnBackdropClick={true}

      // Styling
      zIndex={9999}
      animationDuration={250}
      widgetClassName="custom-support-widget"
    >
      <button className="support-trigger">
        {isOpen ? "✕ Close" : "💬 Chat"}
      </button>
    </BranderChatWidget>
  );
}

Best Practices

  • Use Streaming: Always use onQueryStream for responsive UX
  • Clear Trigger Button: Make it obvious that users can get help
  • Consistent Branding: Match button colors to your brand identity
  • Helpful Examples: Provide example queries relevant to your users
  • Analytics: Track open/close events to measure engagement
  • Mobile Optimization: Test on mobile devices for optimal UX