Customer Support

LaunchKit includes built-in customer support features to help you provide excellent service to your users.

Crisp Chat Integration

Setup

Create a Crisp Account at crisp.chat
Create a new website and copy the website ID from the Integrations menu, in the HTML option (called CRISP_WEBSITE_ID)
Configure in your app by adding the Crisp website ID to your config.ts:

export const config = {
  // ... other config
  crisp: {
    id: 'your-crisp-website-id', // Get this from Crisp dashboard
  },
};

Add the Crisp component to your layout:

// components/CrispChat.tsx
'use client';

import { useEffect } from 'react';
import { config } from '@/config';

export default function CrispChat() {
  useEffect(() => {
    if (config.crisp?.id) {
      window.$crisp = [];
      window.CRISP_WEBSITE_ID = config.crisp.id;

      const script = document.createElement('script');
      script.src = 'https://client.crisp.chat/l.js';
      script.async = true;
      document.head.appendChild(script);
    }
  }, []);

  return null;
}

Include in your main layout:

// app/layout.tsx
import CrispChat from '@/components/CrispChat';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <CrispChat />
      </body>
    </html>
  );
}

Support Button Component

Create a reusable support button that opens the chat or email client:

// components/ButtonSupport.tsx
'use client';

import { config } from '@/config';

interface ButtonSupportProps {
  className?: string;
  children?: React.ReactNode;
}

export default function ButtonSupport({
  className = 'btn btn-primary',
  children = 'Get Help',
}: ButtonSupportProps) {
  const handleSupport = () => {
    if (config.crisp?.id && window.$crisp) {
      // Open Crisp chat
      window.$crisp.push(['do', 'chat:open']);
    } else {
      // Fallback to email
      const subject = encodeURIComponent('Support Request');
      const body = encodeURIComponent('Hi, I need help with...');
      window.location.href = `mailto:${config.email.support}?subject=${subject}&body=${body}`;
    }
  };

  return (
    <button onClick={handleSupport} className={className}>
      {children}
    </button>
  );
}

Support Features

1. User Context

Automatically provide user context to support:

// components/CrispChat.tsx (enhanced)
'use client';

import { useEffect } from 'react';
import { useUser } from '@/hooks/useUser';
import { config } from '@/config';

export default function CrispChat() {
  const { user } = useUser();

  useEffect(() => {
    if (config.crisp?.id) {
      window.$crisp = [];
      window.CRISP_WEBSITE_ID = config.crisp.id;

      // Set user data when available
      if (user) {
        window.$crisp.push(['set', 'user:email', user.email]);
        window.$crisp.push([
          'set',
          'user:nickname',
          user.full_name || user.email,
        ]);
        window.$crisp.push([
          'set',
          'session:data',
          [
            ['user_id', user.id],
            ['plan', user.subscription?.plan || 'free'],
            ['signup_date', user.created_at],
          ],
        ]);
      }

      const script = document.createElement('script');
      script.src = 'https://client.crisp.chat/l.js';
      script.async = true;
      document.head.appendChild(script);
    }
  }, [user]);

  return null;
}

3. Help Documentation

Create a help center:

// app/help/page.tsx
import Link from 'next/link';

const helpTopics = [
  {
    title: 'Getting Started',
    description: 'Learn the basics of using LaunchKit',
    href: '/help/getting-started',
  },
  {
    title: 'Account Management',
    description: 'Manage your account settings and billing',
    href: '/help/account',
  },
  {
    title: 'Troubleshooting',
    description: 'Common issues and solutions',
    href: '/help/troubleshooting',
  },
];

export default function HelpPage() {
  return (
    <div className="max-w-4xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-8">Help Center</h1>

      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {helpTopics.map((topic) => (
          <Link
            key={topic.href}
            href={topic.href}
            className="block p-6 border rounded-lg hover:shadow-md transition-shadow"
          >
            <h3 className="font-semibold mb-2">{topic.title}</h3>
            <p className="text-gray-600 text-sm">{topic.description}</p>
          </Link>
        ))}
      </div>

      <div className="mt-12 text-center">
        <p className="text-gray-600 mb-4">
          Can't find what you're looking for?
        </p>
        <ButtonSupport>Contact Support</ButtonSupport>
      </div>
    </div>
  );
}

Configuration

Update your config.ts to include support settings:

export const config = {
  // ... other config
  email: {
    support: '[email protected]',
    noreply: '[email protected]',
  },
  crisp: {
    id: process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID,
  },
};