How to Integrate Smooch (Zendesk Sunshine) with V0

Start by having V0 generate the customer-facing chat interface for your app. Whether you want a floating chat widget, an embedded full-page messaging view, or a support button that reveals a slide-in panel, V0 can generate the React component with all the necessary visual elements. Be specific about what the experience should look like: the chat bubble position, the panel dimensions, message bubble styles, timestamp display, typing indicators, and the overall color scheme. For a customer support chat, describe the full interaction flow: what the user sees before they start chatting (a greeting message, suggested questions), the message thread with distinct user vs. agent bubble styles, the text input with an emoji button and file attachment option, and the header showing agent name and online status. The more specific you are, the less iteration you'll need. At this stage, V0 will generate the component with hardcoded mock messages and no real API connection. This is correct — you're designing the experience before wiring up the backend. Use V0's preview and Design Mode to get the layout exactly right, then deploy to Vercel to get your live URL before proceeding to configure the Sunshine Conversations credentials.

Before writing any integration code, you need to configure your Sunshine Conversations app and generate the API credentials that authenticate your Next.js server with the Sunshine Conversations platform. Log in to your Zendesk account and navigate to Sunshine Conversations (also accessible directly at app.smooch.io if you have a legacy Smooch account). In the Sunshine Conversations dashboard, create a new App or select your existing app. Navigate to Settings → API Keys and click 'Create API Key'. Give the key a descriptive name like 'V0 Next.js Integration'. Sunshine Conversations generates two values: an App ID (also called keyId) and a Secret. Copy both values immediately and store them securely — the secret is only shown once. Also note your Sunshine Conversations App ID from the app settings — this is a separate identifier from the API key ID. You'll need three values total: the App ID (for identifying which app's conversations you're working with), the API Key ID, and the API Key Secret. The App ID is visible in the app settings URL and dashboard header. For the web widget, you'll also want to note your Integration ID (found under Integrations → Web Messenger) — this is the value you pass to the Sunshine Conversations Web SDK to initialize the widget in the browser.

Create the server-side API routes that will proxy all Sunshine Conversations API calls. You need at minimum two routes: one to send messages from your app to a customer conversation, and one to fetch conversation history. These routes run on Vercel's serverless infrastructure, keeping your API credentials server-side. The Sunshine Conversations API base URL is https://api.smooch.io/v2/apps/{appId}/. Authentication uses HTTP Basic Auth with your API Key ID as the username and API Key Secret as the password — these are passed as a Base64-encoded Authorization header. For sending a message, POST to /v2/apps/{appId}/conversations/{conversationId}/messages with the message content and author details in the request body. For fetching messages, GET /v2/apps/{appId}/conversations/{conversationId}/messages. For real-time incoming messages from customers on external channels (SMS, WhatsApp), you'll need a webhook endpoint. Create a route at /api/chat/webhook that receives POST requests from Sunshine Conversations when new messages arrive. Sunshine Conversations sends a signature header (X-Api-Key) that you should validate to confirm the webhook is genuinely from Sunshine Conversations and not a spoofed request. Store the webhook secret in an environment variable and verify it on every incoming request.

1// app/api/chat/send/route.ts
2import { NextResponse } from 'next/server';
3
4const SMOOCH_API_BASE = 'https://api.smooch.io/v2';
5
6function getAuthHeader() {
7  const keyId = process.env.SUNSHINE_API_KEY_ID!;
8  const secret = process.env.SUNSHINE_API_KEY_SECRET!;
9  return 'Basic ' + Buffer.from(`${keyId}:${secret}`).toString('base64');
10}
11
12export async function POST(request: Request) {
13  const appId = process.env.SUNSHINE_APP_ID;
14
15  if (!appId || !process.env.SUNSHINE_API_KEY_ID || !process.env.SUNSHINE_API_KEY_SECRET) {
16    return NextResponse.json({ error: 'Sunshine Conversations not configured' }, { status: 500 });
17  }
18
19  const { conversationId, text, authorId, authorName } = await request.json();
20
21  if (!conversationId || !text) {
22    return NextResponse.json({ error: 'conversationId and text are required' }, { status: 400 });
23  }
24
25  try {
26    const response = await fetch(
27      `${SMOOCH_API_BASE}/apps/${appId}/conversations/${conversationId}/messages`,
28      {
29        method: 'POST',
30        headers: {
31          Authorization: getAuthHeader(),
32          'Content-Type': 'application/json',
33        },
34        body: JSON.stringify({
35          author: {
36            type: 'business',
37            userId: authorId || 'system',
38            displayName: authorName || 'Support Team',
39          },
40          content: {
41            type: 'text',
42            text,
43          },
44        }),
45      }
46    );
47
48    if (!response.ok) {
49      const errorText = await response.text();
50      console.error('Sunshine API error:', response.status, errorText);
51      return NextResponse.json({ error: `API returned ${response.status}` }, { status: response.status });
52    }
53
54    const data = await response.json();
55    return NextResponse.json({ message: data.message });
56  } catch (error) {
57    console.error('Failed to send message:', error);
58    return NextResponse.json({ error: 'Failed to send message' }, { status: 500 });
59  }
60}
61
62// app/api/chat/messages/route.ts
63// GET conversation messages
64export async function GET_MESSAGES(request: Request) {
65  const { searchParams } = new URL(request.url);
66  const conversationId = searchParams.get('conversationId');
67  const appId = process.env.SUNSHINE_APP_ID;
68
69  if (!conversationId) {
70    return NextResponse.json({ error: 'conversationId is required' }, { status: 400 });
71  }
72
73  const response = await fetch(
74    `${SMOOCH_API_BASE}/apps/${appId}/conversations/${conversationId}/messages`,
75    {
76      headers: { Authorization: getAuthHeader() },
77      next: { revalidate: 0 }, // Always fresh for chat messages
78    }
79  );
80
81  const data = await response.json();
82  return NextResponse.json({ messages: data.messages || [] });
83}

With your API routes written, configure the environment variables your Vercel deployment needs to authenticate with Sunshine Conversations. Open the Vercel Dashboard at vercel.com, navigate to your project, and click Settings → Environment Variables. You'll add four variables: SUNSHINE_APP_ID (your Sunshine Conversations App ID from the dashboard), SUNSHINE_API_KEY_ID (the key ID from the API key you created), SUNSHINE_API_KEY_SECRET (the secret from the API key — only shown once, so use what you saved in Step 2), and optionally SUNSHINE_WEBHOOK_SECRET if you're implementing the webhook endpoint for incoming messages. For each variable, select both Production and Preview environments so both your live site and Vercel preview deployments work correctly. Never add NEXT_PUBLIC_ prefix to these variables — they contain sensitive secrets that must stay server-side only and should never be accessible in the browser. After adding all variables, trigger a redeployment by pushing a commit to GitHub or clicking Redeploy in the Vercel Dashboard. Once the deployment completes, test your API routes directly in the browser to confirm authentication works.

The final step connects everything together: embedding the Sunshine Conversations web widget in your Next.js app so customers can initiate conversations from your website, and verifying that messages flow correctly between your app, Sunshine Conversations, and your Zendesk agent workspace. For the web widget approach, add the Sunshine Conversations Web SDK script to your Next.js layout. In app/layout.tsx, use Next.js's Script component to load the Sunshine SDK from their CDN and initialize it with your Integration ID. Once initialized, the SDK creates the chat widget automatically — customers who click it start a web conversation that appears in Zendesk. For the custom chat UI approach (using your V0-generated chat component), you need to create a conversation ID for each user and persist it in localStorage or a database. When a user first opens the chat, call a route that creates a new Sunshine Conversations conversation and returns the conversation ID. Store this ID in the browser and include it in subsequent message API calls to maintain conversation continuity across page loads. Test the complete flow: open your deployed app, send a test message through the chat widget or your custom UI, verify it appears in the Sunshine Conversations dashboard and Zendesk, then reply from Zendesk and confirm the reply appears in your app. For complex omnichannel setups requiring SMS or WhatsApp channel configuration, RapidDev's team can help integrate those channel-specific APIs into your Sunshine Conversations workspace.

1// app/layout.tsx - Add Sunshine web widget
2import Script from 'next/script';
3
4// Inside your layout's <body>:
5// <Script
6//   id="sunshine-conversations"
7//   strategy="afterInteractive"
8//   dangerouslySetInnerHTML={{
9//     __html: `
10//       !function(o,p,s,e,c){
11//         var i,a,h,u=[],d=[];
12//         function t(){var t=p.createElement("script");t.async=!0,t.crossOrigin="anonymous",
13//         t.src="https://cdn.smooch.io/smooch.min.js",
14//         (a=p.getElementsByTagName("script")[0]).parentNode.insertBefore(t,a)
15//       }
16//       // Initialize Sunshine widget
17//       Smooch.init({ integrationId: '${process.env.NEXT_PUBLIC_SUNSHINE_INTEGRATION_ID}' })
18//     `
19//   }}
20// />
21
22// app/api/chat/create-conversation/route.ts
23import { NextResponse } from 'next/server';
24
25export async function POST(request: Request) {
26  const appId = process.env.SUNSHINE_APP_ID;
27  const keyId = process.env.SUNSHINE_API_KEY_ID!;
28  const secret = process.env.SUNSHINE_API_KEY_SECRET!;
29  const authHeader = 'Basic ' + Buffer.from(`${keyId}:${secret}`).toString('base64');
30
31  const { userId, displayName } = await request.json();
32
33  try {
34    // First, create or get the user
35    const userRes = await fetch(
36      `https://api.smooch.io/v2/apps/${appId}/users`,
37      {
38        method: 'POST',
39        headers: { Authorization: authHeader, 'Content-Type': 'application/json' },
40        body: JSON.stringify({ userId, profile: { displayName } }),
41      }
42    );
43
44    // Create a conversation for the user
45    const convRes = await fetch(
46      `https://api.smooch.io/v2/apps/${appId}/conversations`,
47      {
48        method: 'POST',
49        headers: { Authorization: authHeader, 'Content-Type': 'application/json' },
50        body: JSON.stringify({
51          type: 'personal',
52          participants: [{ userId, subscribeTo: ['*'] }],
53        }),
54      }
55    );
56
57    const conv = await convRes.json();
58    return NextResponse.json({ conversationId: conv.conversation?.id });
59  } catch (error) {
60    return NextResponse.json({ error: 'Failed to create conversation' }, { status: 500 });
61  }
62}