How to Integrate Lovable with Microsoft Teams

The first step happens entirely in Microsoft Teams, not in Lovable. You need to create an Incoming Webhook in the Teams channel where you want to receive notifications. This generates a unique URL that your Edge Function will POST to. Open Microsoft Teams and navigate to the channel where you want notifications to appear. Click the three-dot menu (...) next to the channel name in the sidebar. Select 'Manage channel' from the dropdown. In the channel settings panel, find the Connectors section and click 'Edit' or look for the 'Connectors' option. If you are in newer Teams (Teams 2.0), the path may be slightly different: click the channel name → More options → Connectors. In the Connectors dialog, search for 'Incoming Webhook' in the search box. Click the 'Incoming Webhook' connector and then click 'Configure'. Give your webhook a descriptive name — something like 'Lovable App Notifications' — so your team knows what it is. Optionally, upload a small icon (your app logo works well) that will appear next to notifications posted by this webhook. Click 'Create'. Teams will generate a unique webhook URL that looks like: https://yourcompany.webhook.office.com/webhookb2/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx@xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/IncomingWebhook/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx Copy this URL immediately. It is your private channel endpoint — anyone with this URL can post messages to your Teams channel, so treat it like a password. Click 'Done' to save the connector.

With the webhook URL copied, store it in Lovable's Cloud Secrets panel. The webhook URL is sensitive — it grants anyone who has it the ability to post messages to your Teams channel on behalf of your connector. Storing it as a secret ensures it stays server-side, inaccessible to your frontend JavaScript and absent from your Git repository. In your Lovable project, click the '+' icon at the top of the editor (next to the Preview label). In the Cloud panel that opens, click the 'Secrets' tab. Click 'Add new secret'. In the Name field, type TEAMS_WEBHOOK_URL exactly. In the Value field, paste the full Incoming Webhook URL you copied from Teams. Click Save. If you plan to send notifications to multiple Teams channels (for example, one channel for orders and another for errors), add each webhook as a separate secret: TEAMS_ORDERS_WEBHOOK_URL, TEAMS_ALERTS_WEBHOOK_URL, and so on. This naming convention makes it obvious in your Edge Function code which channel each notification goes to. As always with Lovable secrets: never paste the webhook URL directly into Lovable's chat prompt. Even though a webhook URL is not an API key in the traditional sense, it is still a credential that should not appear in code or chat history. The secret panel is the only appropriate storage location.

Now create the Edge Function that formats and sends notifications to Teams. The function will receive notification data from your frontend, construct an Adaptive Card payload, and POST it to the Teams webhook URL from Secrets. Adaptive Cards are the recommended message format for Teams. They support rich formatting: headings, fact tables, images, action buttons, and conditional visibility. The Adaptive Card format is JSON, and Teams renders it natively on all platforms (desktop, mobile, web). The code example below shows a complete Adaptive Card for a generic notification, which you can customize for your specific use case. Important: Teams Incoming Webhooks accept two payload formats. The legacy format uses 'type': 'MessageCard' — this still works but is being deprecated. The modern format uses Adaptive Card syntax wrapped in a specific Teams container. The code below uses the modern format. Some older Teams clients may fall back to a plain text summary if Adaptive Cards are not supported, which is why the payload includes a 'summary' field. The function handles CORS headers for browser calls, validates that the webhook URL is configured, and returns appropriate error messages if the Teams API rejects the request. Teams webhooks return a '1' string response on success (not a JSON object), so the success check is string-based.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8const severityColors: Record<string, string> = {
9  info: 'Good',
10  warning: 'Warning',
11  high: 'Attention',
12  critical: 'Attention',
13}
14
15serve(async (req) => {
16  if (req.method === 'OPTIONS') {
17    return new Response('ok', { headers: corsHeaders })
18  }
19
20  try {
21    const { title, message, severity = 'info', facts = [], actionUrl, actionLabel } = await req.json()
22
23    const webhookUrl = Deno.env.get('TEAMS_WEBHOOK_URL')
24    if (!webhookUrl) {
25      throw new Error('TEAMS_WEBHOOK_URL secret is not configured')
26    }
27
28    const adaptiveCard = {
29      type: 'message',
30      attachments: [
31        {
32          contentType: 'application/vnd.microsoft.card.adaptive',
33          contentUrl: null,
34          content: {
35            '$schema': 'http://adaptivecards.io/schemas/adaptive-card.json',
36            type: 'AdaptiveCard',
37            version: '1.5',
38            body: [
39              {
40                type: 'TextBlock',
41                text: title,
42                size: 'Large',
43                weight: 'Bolder',
44                color: severityColors[severity] || 'Default',
45              },
46              {
47                type: 'TextBlock',
48                text: message,
49                wrap: true,
50              },
51              ...(facts.length > 0
52                ? [{
53                    type: 'FactSet',
54                    facts: facts.map((f: { name: string; value: string }) => ({
55                      title: f.name,
56                      value: f.value,
57                    })),
58                  }]
59                : []),
60            ],
61            actions: actionUrl
62              ? [{
63                  type: 'Action.OpenUrl',
64                  title: actionLabel || 'View Details',
65                  url: actionUrl,
66                }]
67              : [],
68          },
69        },
70      ],
71    }
72
73    const response = await fetch(webhookUrl, {
74      method: 'POST',
75      headers: { 'Content-Type': 'application/json' },
76      body: JSON.stringify(adaptiveCard),
77    })
78
79    const responseText = await response.text()
80    if (!response.ok || responseText === '0') {
81      throw new Error(`Teams webhook failed: ${response.status} - ${responseText}`)
82    }
83
84    return new Response(
85      JSON.stringify({ success: true }),
86      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
87    )
88  } catch (error) {
89    return new Response(
90      JSON.stringify({ error: error.message }),
91      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
92    )
93  }
94})

With the Edge Function deployed, connect it to meaningful events in your Lovable app. Use the Supabase client's functions.invoke() to call the notification function from your React components or from other Edge Functions. The most impactful places to add Teams notifications are: after a successful payment (notify the sales team), when a user submits a support request (alert the support channel), when a scheduled task completes or fails (inform the engineering team), or when a form submission requires human review (ping the moderation team). For React component triggers, call the function in an event handler. For automated triggers based on database changes, consider adding the Teams notification call inside other Edge Functions — for example, your Stripe webhook handler can call notify-teams after processing a payment. The code example below shows how to call the notification function from a React component after a user action. The invoke() call is non-blocking — wrap it in a try-catch and do not let notification failures interrupt the user's main flow. If Teams is temporarily unavailable, your app should continue working normally.

1import { supabase } from '@/lib/supabase'
2
3const notifyTeams = async (params: {
4  title: string
5  message: string
6  severity?: 'info' | 'warning' | 'high'
7  facts?: Array<{ name: string; value: string }>
8  actionUrl?: string
9  actionLabel?: string
10}) => {
11  try {
12    const { error } = await supabase.functions.invoke('notify-teams', {
13      body: params,
14    })
15    if (error) console.error('Teams notification failed:', error)
16  } catch (err) {
17    // Silently fail — notification should not break the main flow
18    console.error('Teams notification error:', err)
19  }
20}
21
22// Example usage after a form submission:
23const handleContactSubmit = async (formData: ContactFormData) => {
24  // 1. Save to database
25  const { error } = await supabase.from('contact_submissions').insert(formData)
26  if (error) throw error
27
28  // 2. Notify Teams (non-blocking)
29  notifyTeams({
30    title: 'New Contact Form Submission',
31    message: formData.message.substring(0, 200),
32    severity: 'info',
33    facts: [
34      { name: 'From', value: formData.email },
35      { name: 'Subject', value: formData.subject },
36      { name: 'Submitted', value: new Date().toLocaleString() },
37    ],
38    actionUrl: 'https://myapp.com/admin/contacts',
39    actionLabel: 'View in Admin',
40  })
41
42  // 3. Continue with success flow
43  return { success: true }
44}