How to Integrate Lovable with Chanty

In the Chanty desktop or web app, click on your team name at the top-left to open team settings. Navigate to 'Settings' → 'API' or 'Integrations' → 'API'. If your plan supports API access (check Chanty's current pricing — API access may require a paid plan), you will find an option to create an API key. Click 'Generate Token' or 'Create API Key' and copy the resulting Bearer token. You also need the conversation ID of the channel you want to post messages to. Chanty's conversation IDs are not displayed in the standard UI — you need to either use the API to list conversations (GET /api/v1/teams/{teamId}/conversations with your token) or check the URL when a conversation is open in the web app. The team ID is similarly retrievable via GET /api/v1/me which returns the authenticated user's team information. Alternatively, Chanty may provide webhook-based inbound messaging (POST a message to a channel via a webhook URL) which is simpler than the full REST API for notification-only use cases. Check your Chanty settings for webhook support, which would not require the full API token approach.

Open the Cloud tab in your Lovable editor by clicking the '+' panel selector at the top right, then select Cloud. Scroll to the Secrets section and add the credentials. Create CHANTY_API_TOKEN and paste your Bearer token. Create CHANTY_TEAM_ID and paste your Chanty team ID. Create CHANTY_CONVERSATION_ID and paste the conversation ID of your primary notification channel (you can add more conversation IDs with different names for different notification types — e.g., CHANTY_ALERTS_CONVERSATION_ID and CHANTY_SALES_CONVERSATION_ID). These credentials grant access to post messages and create tasks on behalf of the API token's owner in your Chanty team. Lovable's infrastructure encrypts all secrets at rest using SOC 2 Type II certified security. Never paste your API token into a Lovable chat prompt or directly into code — Lovable's security scanner blocks approximately 1,200 hardcoded credentials per day, and the Secrets panel is the correct storage location.

Create an Edge Function called chanty that handles both message sending and task creation. The function should accept an action field in the request body to select the operation. For sending messages, the endpoint is POST /api/v1/messages with the Chanty REST API base URL. The request body requires conversationId and text. For creating tasks, the endpoint is POST /api/v1/tasks with fields for subject (task title), conversationId (tasks are associated with conversations in Chanty), and optionally assigneeId (Chanty team member ID), dueDate, and taskPriority. The Chanty API base URL is https://api.chanty.com or the team-specific subdomain format — verify this in the Chanty API documentation for your account. Authentication is Bearer token in the Authorization header. Ask Lovable to generate the function supporting both message and task operations. After deployment, test it from Cloud → Logs and verify messages appear in Chanty.

1// supabase/functions/chanty/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
11
12  try {
13    const token = Deno.env.get('CHANTY_API_TOKEN')!;
14    const defaultConversationId = Deno.env.get('CHANTY_CONVERSATION_ID')!;
15    const { action, text, subject, conversationId, assigneeId, dueDate, priority } = await req.json();
16
17    const targetConversation = conversationId ?? defaultConversationId;
18    const baseUrl = 'https://api.chanty.com/api/v1';
19    const headers = {
20      'Authorization': `Bearer ${token}`,
21      'Content-Type': 'application/json',
22    };
23
24    if (action === 'message') {
25      const res = await fetch(`${baseUrl}/messages`, {
26        method: 'POST',
27        headers,
28        body: JSON.stringify({ conversationId: targetConversation, text }),
29      });
30      if (!res.ok) throw new Error(`Chanty message error: ${await res.text()}`);
31      const data = await res.json();
32      return new Response(
33        JSON.stringify({ messageId: data.id }),
34        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
35      );
36    }
37
38    if (action === 'task') {
39      const taskBody: Record<string, unknown> = {
40        subject,
41        conversationId: targetConversation,
42      };
43      if (assigneeId) taskBody.assigneeId = assigneeId;
44      if (dueDate) taskBody.dueDate = dueDate;
45      if (priority) taskBody.taskPriority = priority;
46
47      const res = await fetch(`${baseUrl}/tasks`, {
48        method: 'POST',
49        headers,
50        body: JSON.stringify(taskBody),
51      });
52      if (!res.ok) throw new Error(`Chanty task error: ${await res.text()}`);
53      const data = await res.json();
54      return new Response(
55        JSON.stringify({ taskId: data.id }),
56        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
57      );
58    }
59
60    throw new Error('Invalid action — use message or task');
61  } catch (error) {
62    return new Response(
63      JSON.stringify({ error: error.message }),
64      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
65    );
66  }
67});

With the Edge Function deployed, ask Lovable to wire it into your application at the appropriate trigger points. The Edge Function can be called reactively (when a user action occurs) or proactively (as part of a background process). For notification use cases, add the Edge Function call inside existing event handlers — after a new row is inserted into Supabase, after a form is submitted, or when an error occurs. For task creation, add a 'Create Chanty Task' button to relevant pages or trigger it automatically based on conditions (e.g., create a task when a support ticket has been open for more than 24 hours). The supabase.functions.invoke('chanty', { body: { action: 'message', text: 'New user registered: John Smith' } }) pattern works from any React component. Handle the response to show a success indicator or fall back gracefully if the Chanty call fails — your app's core functionality should not break if the notification fails to send. Consider adding try-catch around Chanty calls and logging failures to Cloud → Logs rather than showing errors to end users.