Chat Widget

Add an AI-powered chat widget to your application. The chat widget provides instant AI assistance to your users, powered by your knowledge base and system prompt.

Overview

The chat widget is a separate feature from the SDK tracking and user flows. You can:

Use just the SDK (user flows, session recording, event tracking)
Use just the chat widget
Use both together (recommended)

Quick Start

React / Next.js

import { ProduckProvider, ProduckChat } from '@prodact.ai/sdk/react';
 
function App() {
  return (
    <ProduckProvider
      config={{
        sdkKey: 'your-sdk-key',
        apiUrl: 'https://api.prodact.ai/api/v1',
      }}
    >
      <YourApp />
      
      {/* Add the chat widget */}
      <ProduckChat 
        position="bottom-right"
        theme="auto"
        title="Support"
      />
    </ProduckProvider>
  );
}

Vue.js

import { createProduck } from '@prodact.ai/sdk';
 
const produck = createProduck({
  sdkKey: 'your-sdk-key',
  apiUrl: 'https://api.prodact.ai/api/v1',
});
 
await produck.init();
 
// Show chat widget
produck.showChat({
  position: 'bottom-right',
  theme: 'auto',
});

Vanilla JavaScript

<script src="https://api.prodact.ai/api/v1/sdk/sdk.js"></script>
<script>
  Produck.init({
    sdkKey: 'your-sdk-key',
    apiUrl: 'https://api.prodact.ai/api/v1',
    position: 'bottom-right',
    theme: 'auto',
    title: 'Support',
  });
</script>

ProduckChat Props

Prop	Type	Default	Description
`position`	`'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Widget position
`theme`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Color theme
`title`	`string`	`'Chat'`	Widget header title
`primaryColor`	`string`	`'#6366f1'`	Brand color
`welcomeMessage`	`string`	-	Initial greeting message
`placeholder`	`string`	`'Type a message...'`	Input placeholder
`showBranding`	`boolean`	`true`	Show "Powered by Prodact"
`initialOpen`	`boolean`	`false`	Start with widget open
`hideWhenClosed`	`boolean`	`false`	Hide button when closed

Customization Examples

Custom Branding

<ProduckChat 
  position="bottom-right"
  theme="light"
  title="Acme Support"
  primaryColor="#ff6b35"
  welcomeMessage="Hi! 👋 How can we help you today?"
  placeholder="Ask us anything..."
/>

Dark Theme

<ProduckChat 
  position="bottom-left"
  theme="dark"
  title="Need Help?"
/>

Auto Theme (Follows System)

<ProduckChat 
  theme="auto"  // Matches user's system preference
/>

Programmatic Control

Control the chat widget from your code using the useProduck hook:

import { useProduck } from '@prodact.ai/sdk/react';
 
function SupportButton() {
  const { openChat, closeChat, toggleChat } = useProduck();
 
  return (
    <button onClick={openChat}>
      Open Support Chat
    </button>
  );
}

Available Methods

Method	Description
`openChat()`	Open the chat widget
`closeChat()`	Close the chat widget
`toggleChat()`	Toggle open/closed state
`sendMessage(text)`	Send a message programmatically
`clearChat()`	Clear chat history

Without the Widget (Headless Mode)

Use chat functionality without the default UI:

import { useProduckMessages, useProduck } from '@prodact.ai/sdk/react';
 
function CustomChat() {
  const { messages, sendMessage, isLoading } = useProduckMessages();
  const [input, setInput] = useState('');
 
  const handleSend = () => {
    sendMessage(input);
    setInput('');
  };
 
  return (
    <div className="my-custom-chat">
      {messages.map((msg, i) => (
        <div key={i} className={msg.role}>
          {msg.content}
        </div>
      ))}
      
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)}
        placeholder="Type a message..."
      />
      <button onClick={handleSend} disabled={isLoading}>
        Send
      </button>
    </div>
  );
}

Integration with Operations

The chat can trigger Operations in your application:

import { useProduckAction } from '@prodact.ai/sdk/react';
 
function App() {
  // Register action handlers
  useProduckAction('navigate', ({ path }) => {
    router.push(path);
  });
 
  useProduckAction('open-modal', ({ modal }) => {
    setActiveModal(modal);
  });
 
  return (
    <ProduckProvider config={{ sdkKey: 'your-key' }}>
      <YourApp />
      <ProduckChat />
    </ProduckProvider>
  );
}

When the AI decides an action is needed, it will automatically call your registered handlers.

Mobile Responsiveness

The chat widget automatically adapts to mobile screens:

Full-screen mode on small devices
Touch-optimized interactions
Keyboard handling for input

Accessibility

The chat widget includes:

ARIA labels for screen readers
Keyboard navigation (Tab, Enter, Escape)
Focus management
High contrast support

Troubleshooting

Widget Not Appearing

Check that ProduckProvider wraps your app
Verify your SDK key is correct
Check browser console for errors

Chat Not Responding

Verify apiUrl is set correctly
Check network tab for failed requests
Ensure your knowledge base has content

Styling Conflicts

If your CSS conflicts with the widget:

/* Increase specificity for widget styles */
.produck-chat-widget {
  /* Your overrides */
}

Next Steps

DOM Context React Integration