Skip to main content

Example: Chat Integration

A step-by-step guide to adding AI chat to a new page.

Overview​

In this example, we'll add the Smash AI Chat widget to a custom "Support" page in your dashboard.

Implementation Steps​

1. Create the Support Page​

Create a new file at src/app/[lang]/(dashboard-layout)/support/page.tsx:

export default function SupportPage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">Customer Support</h1>
      <p className="mt-4">Need help? Our AI assistant is available 24/7.</p>
    </div>
  );
}

2. Import the Smash Widget​

Import the SmashChatWidget at the top of your page file:

import { SmashChatWidget } from '@/components/ai/smash-chat';

3. Add the Widget to the JSX​

Place the widget at the bottom of your component:

export default function SupportPage() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold">Customer Support</h1>
      <p className="mt-4">Need help? Our AI assistant is available 24/7.</p>
      
      <SmashChatWidget 
        title="Support Assistant"
        initialMessage="Hi! I'm your support assistant. How can I help you today?"
      />
    </div>
  );
}

4. Configure the Backend​

Ensure your chat-server is running and that the NEXT_PUBLIC_SMASH_API_URL environment variable is set correctly in your frontend.

5. Test the Integration​

Navigate to /en/support in your browser. You should see the floating chat icon. Click it to open the chat window and start a conversation with the AI.

Best Practices​

  • ✅ Do this: Use a specific title and initialMessage that matches the context of the page.
  • ✅ Do this: Ensure the widget doesn't overlap with important page content.
  • ❌ Don't do this: Add multiple chat widgets to the same page; it can be confusing for users.