How to Integrate Bolt.new with Chanty

To receive messages from external apps, Chanty uses incoming webhooks — special URLs that accept POST requests and publish the payload as a channel message. Setting up a webhook in Chanty takes about two minutes. Log into your Chanty account at chanty.com. Navigate to your team workspace and find the Integrations section — in Chanty's interface, this is usually under Settings → Integrations or the Apps section accessible from the left sidebar. Look for 'Incoming Webhooks' or 'Webhooks' in the integrations list. If you do not see webhooks listed, Chanty may require a paid plan for this feature — check the current plan requirements on chanty.com. Create a new incoming webhook and select the destination channel where notifications should appear. You might create a dedicated channel like #app-notifications or #deployments specifically for automated messages from your Bolt app. Chanty generates a unique webhook URL that looks like `https://api.chanty.com/v1/organizations/[id]/incoming-webhooks/[token]`. Copy this URL — it contains the authentication token embedded in the path, so treat it as a secret and never commit it to source control. Test the webhook immediately using the built-in tester in Chanty's webhook settings, or run a quick curl command to verify it works. Once confirmed, add the URL to your Bolt project's .env file.

1# .env file in your Bolt project root
2# Treat this URL as a secret — it contains an auth token
3CHANTY_WEBHOOK_URL=https://api.chanty.com/v1/organizations/YOUR_ORG_ID/incoming-webhooks/YOUR_TOKEN
4
5# For Vite projects, route through a server-side function instead
6# Never expose the webhook URL to the client bundle

Rather than calling the Chanty webhook URL directly from the browser (which would expose your webhook URL in client-side code), create a Next.js API route that handles the Chanty call server-side. The frontend calls your API route, and your API route securely calls Chanty using the webhook URL from `process.env.CHANTY_WEBHOOK_URL`. Chanty's incoming webhook expects a POST request with a JSON body. The exact payload format depends on your Chanty setup, but the basic format is `{ 'text': 'Your message here' }`. Chanty supports basic text formatting including line breaks (`\n`) and plain text bold using asterisks in some configurations. Unlike Slack (which has a rich Block Kit for structured messages), Chanty's webhook message format is limited to text content. Build a reusable notification utility that your app can call from anywhere — on user signup, on payment confirmation, on error catch blocks, or from cron job endpoints. The utility should accept an event type, a human-readable message, and optional metadata. It formats these into a Chanty-friendly text string and calls the API route via fetch. For Vite projects without native API routes, the same pattern works through a Supabase edge function — create an edge function called `notify-chanty` that accepts a POST request with the message content and forwards it to the Chanty webhook URL using `Deno.env.get('CHANTY_WEBHOOK_URL')`. This approach keeps the webhook URL entirely off the client side.

1// app/api/notify/chanty/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const CHANTY_WEBHOOK_URL = process.env.CHANTY_WEBHOOK_URL;
5
6const SEVERITY_EMOJI: Record<string, string> = {
7  info: 'ℹ️',
8  warning: '⚠️',
9  critical: '🚨',
10  success: '✅',
11};
12
13export async function POST(request: NextRequest) {
14  if (!CHANTY_WEBHOOK_URL) {
15    console.error('CHANTY_WEBHOOK_URL is not configured');
16    return NextResponse.json({ error: 'Chanty not configured' }, { status: 500 });
17  }
18
19  const { event, message, severity = 'info' } = await request.json();
20
21  const emoji = SEVERITY_EMOJI[severity] || 'ℹ️';
22  const timestamp = new Date().toISOString();
23  const text = `${emoji} *${event.toUpperCase()}*\n${message}\n_${timestamp}_`;
24
25  const response = await fetch(CHANTY_WEBHOOK_URL, {
26    method: 'POST',
27    headers: { 'Content-Type': 'application/json' },
28    body: JSON.stringify({ text }),
29  });
30
31  if (!response.ok) {
32    console.error('Chanty webhook failed:', response.status, await response.text());
33    return NextResponse.json(
34      { error: `Chanty returned ${response.status}` },
35      { status: 500 }
36    );
37  }
38
39  return NextResponse.json({ success: true });
40}

With the notification API route in place, integrate Chanty notifications into the key events in your Bolt.new app. The most valuable notification triggers are: new user registrations, payment completions, critical errors, and important state changes (user cancelled subscription, submitted support ticket, etc.). For new user signups using Supabase Auth, add the notification call to your auth callback or the server action that handles post-signup processing. For payment events (Stripe), trigger Chanty notifications from the Stripe webhook handler — specifically on `checkout.session.completed` and `invoice.payment_failed`. For error monitoring, create a global error handler that catches unhandled promise rejections and sends critical error notifications. Keep notification messages informative but concise — your team will read these in Chanty's mobile app as well as desktop. Include: the event name, the key identifier (user email, order ID), the relevant amount or value, and a timestamp. Avoid including sensitive personal data like full names, addresses, or payment details in notifications — just enough context for your team to take action. For Bolt's WebContainer development environment, the notification API route calls the Chanty webhook as an outbound HTTP request — this works in the preview since outbound calls from the WebContainer are fully functional. You can test Chanty notifications while developing locally without deploying.

1// lib/notify.ts — reusable notification helper
2type Severity = 'info' | 'warning' | 'critical' | 'success';
3
4export async function notifyChanty(
5  event: string,
6  message: string,
7  severity: Severity = 'info'
8): Promise<void> {
9  try {
10    // In production (server-side), call the webhook directly
11    // In client components, call through the API route
12    const isServer = typeof window === 'undefined';
13
14    if (isServer) {
15      const webhookUrl = process.env.CHANTY_WEBHOOK_URL;
16      if (!webhookUrl) return;
17
18      const emoji = { info: 'ℹ️', warning: '⚠️', critical: '🚨', success: '✅' }[severity];
19      const text = `${emoji} *${event.toUpperCase()}*\n${message}\n_${new Date().toISOString()}_`;
20
21      await fetch(webhookUrl, {
22        method: 'POST',
23        headers: { 'Content-Type': 'application/json' },
24        body: JSON.stringify({ text }),
25      });
26    } else {
27      // Client-side: go through API route to protect webhook URL
28      await fetch('/api/notify/chanty', {
29        method: 'POST',
30        headers: { 'Content-Type': 'application/json' },
31        body: JSON.stringify({ event, message, severity }),
32      });
33    }
34  } catch (err) {
35    // Never let notification failures crash the app
36    console.error('Chanty notification failed:', err);
37  }
38}

Chanty webhook delivery works in Bolt's WebContainer preview since it is an outbound HTTP POST request — you can test notification sending during development. However, production apps should be deployed to ensure full reliability. Deploy to Netlify or Bolt Cloud by clicking the Publish button in Bolt's navigation. After deploying, set environment variables in your hosting platform. In Netlify, go to Site Configuration → Environment Variables and add `CHANTY_WEBHOOK_URL` with your webhook URL value. In Bolt Cloud, add it to the Secrets panel. Redeploy after adding environment variables to ensure they are picked up by the build. Test production notifications by triggering a test event: sign up a new user, or call the notification API route directly from your browser's DevTools console with a fetch request. Check your Chanty channel within a few seconds to confirm delivery. If notifications are not arriving, open the browser DevTools Network tab and check that the API route call returned a 200 response. Check Netlify's function logs (Functions tab in Netlify dashboard) for any error output from the API route. For production monitoring, consider logging every Chanty notification call to a Supabase table — store the event type, message, severity, timestamp, and delivery status (success/failure). This gives you a notification history and helps debug delivery issues. Chanty does not provide a delivery confirmation API, so client-side tracking is the only way to audit notification delivery.