Microsoft Teams

Open Microsoft Teams and navigate to the channel where you want to receive Bubble notifications. Click the three-dot menu (…) next to the channel name in the sidebar. Select **Workflows** from the context menu — this opens the Power Automate Workflows panel inside Teams. In the Workflows search panel, find or search for the template named **'Post to a channel when a webhook request is received'** and click it. Give the workflow a descriptive name (for example, 'Bubble Notifications to Sales Channel'), confirm the channel destination, and click **Next**. Click **Add workflow** to create it. After creation, Teams displays a webhook URL — copy this URL immediately and store it somewhere safe (a password manager or your Bubble app's private notes). This URL is typically in the format `https://prod-xx.westus.logic.azure.com/workflows/...` and is specific to this channel and workflow. Anyone with this URL can POST messages to your Teams channel, so treat it like a password. **Important:** If you see an option for the older 'Incoming Webhooks' via the Connectors UI (Apps → Connectors), do not use it — these legacy webhooks are being retired by Microsoft and may stop working without notice. Always use the Workflows app approach. Once you have copied the webhook URL, you are ready to configure Bubble.

In your Bubble editor, click the **Plugins** tab in the left sidebar. Click **Add plugins** and search for **'API Connector'** — look for the plugin published by Bubble (the official one). Click **Install** and confirm. This plugin allows Bubble to make server-side HTTP requests to any external API. Once installed, you will see the API Connector in your Plugins tab. Click on it to open its configuration panel. Click **Add another API** to create a new API configuration. Name it something like 'Microsoft Teams' so it is easy to find in your workflows. In the Base URL field, you can either paste the full Workflows webhook URL directly (the cleanest approach for a single channel) or use just `https://` as a placeholder and paste the full path into the call-level URL field. For security, the recommended approach is to paste the full Workflows webhook URL directly into the **Base URL field** and then check the **Private** checkbox next to it. This marks the URL as a server-side constant — Bubble will never send it to the browser in API responses or page data. Alternately, if you need to POST to multiple different webhook URLs (for different channels), add the webhook URL as a header constant named something like 'X-Webhook-Target' marked Private, and reference it dynamically in your workflow.

1{
2  "api_name": "Microsoft Teams",
3  "base_url": "<your Workflows webhook URL — paste here and mark Private>",
4  "authentication": "None or private header",
5  "shared_headers": [
6    {
7      "key": "Content-Type",
8      "value": "application/json",
9      "private": false
10    }
11  ]
12}

Inside the Microsoft Teams API configuration in the API Connector, click **Add a call**. Name this call 'Send Message'. Set the method to **POST**. If you pasted the full webhook URL in the Base URL, leave the call-level URL path empty (or enter a `/`). If you kept the Base URL generic, paste the full webhook URL in the path field. Set **Body type** to **JSON**. In the body section, add the following JSON structure: ```json {"text": "<message>"} ``` Click the small **< >** toggle or use Bubble's body editor to mark `<message>` as a dynamic parameter named `message` (type: text). This is the field your workflow will populate at runtime. In the **Use as** dropdown, select **Action** (since this is a mutation, not a data source). Now you need to **Initialize the call**. Click **Initialize call**. In the `message` field, type a test string such as `Test message from Bubble setup`. Click **Send**. A successful response from the Teams Workflows webhook returns HTTP 202 with an empty body or a redirect. If Teams accepted the message, check your Teams channel — the message should appear within a few seconds. If you receive a 400 or an error from Bubble saying 'There was an issue setting up your call', double-check that your webhook URL is correct and that the JSON body is valid. Once the initialize call succeeds, click **Save** on the API call. Bubble now registers all the response fields and makes this call available as an action in your workflow editor.

1{
2  "method": "POST",
3  "url": "<Teams Workflows webhook URL stored in Base URL>",
4  "headers": {
5    "Content-Type": "application/json"
6  },
7  "body": {
8    "text": "<dynamic:message>"
9  }
10}

Now wire the Teams notification into your Bubble app logic. Open the Bubble workflow editor by clicking **Workflow** in the top navigation. Create a new workflow or click an existing trigger (such as a Button click, 'When a new Thing is created', or a Backend Workflow trigger). Add a new action by clicking **Add action**. Under the **Plugins** section, find **Microsoft Teams - Send Message** (the name you gave the API call). Click it to add it as a workflow step. In the action parameters panel, set the `message` field to whatever dynamic data you want to send. For example: `'New signup: ' + Current User's email + ' at ' + Current date/time`. You can compose multi-line messages using Bubble's text concatenation operators. For **Backend Workflows** (paid Bubble plans): navigate to the **Backend Workflows** section (left sidebar under the Workflow tab or via the Server-side actions panel). Create a new API Workflow named 'Notify Teams'. Add the Microsoft Teams - Send Message action. You can schedule this Backend Workflow from client-side workflows using 'Schedule API Workflow', trigger it on a recurring basis, or call it in response to database changes. Backend Workflows are preferred because they run on Bubble's servers — the webhook URL in the Base URL (Private) is never exposed to the browser even if a client-side action somehow triggered the same call. **For users on Bubble Free plan:** You can use a client-side 'Button is clicked' workflow to call the API Connector action. The webhook URL will be in the API Connector Private field which Bubble does not expose directly in browser DevTools network requests for Private-marked Base URLs. However, the most secure and reliable pattern remains Backend Workflows on a paid plan.

For more visually rich notifications — ones that include tables, buttons, images, or structured data — you can replace the simple `{"text": "..."}` body with a full Adaptive Card JSON payload. Teams Workflows webhooks support Adaptive Cards compliant with the Adaptive Card schema. Before embedding an Adaptive Card in Bubble, design and validate your card at **adaptivecards.io/designer**. This visual tool lets you build the card, preview how it renders in Teams, and export the JSON. An example minimal Adaptive Card body looks like this: ```json { "type": "message", "attachments": [ { "contentType": "application/vnd.microsoft.card.adaptive", "content": { "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.4", "body": [ { "type": "TextBlock", "text": "<dynamic:title>", "weight": "Bolder", "size": "Medium" }, { "type": "TextBlock", "text": "<dynamic:body_text>", "wrap": true } ] } } ] } ``` In Bubble's API Connector, create a second API call (or replace the body of the existing one) with this Adaptive Card structure. Mark `<dynamic:title>` and `<dynamic:body_text>` as dynamic text parameters. A critical detail: if the Adaptive Card JSON is malformed or uses unsupported schema elements, Teams silently drops the message with no error returned to Bubble. Always validate the card at adaptivecards.io first. If you need to send Adaptive Cards with interactive action buttons that POST back to a Bubble endpoint, that requires the full Microsoft Graph API path (Azure AD app with `ChannelMessage.Send` permission), not the Workflows webhook approach. Interactive buttons are outside the scope of the basic webhook integration.

1{
2  "type": "message",
3  "attachments": [
4    {
5      "contentType": "application/vnd.microsoft.card.adaptive",
6      "content": {
7        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
8        "type": "AdaptiveCard",
9        "version": "1.4",
10        "body": [
11          {
12            "type": "TextBlock",
13            "text": "<dynamic:card_title>",
14            "weight": "Bolder",
15            "size": "Medium"
16          },
17          {
18            "type": "FactSet",
19            "facts": [
20              { "title": "Status", "value": "<dynamic:status>" },
21              { "title": "Amount", "value": "<dynamic:amount>" },
22              { "title": "User", "value": "<dynamic:user_email>" }
23            ]
24          }
25        ]
26      }
27    }
28  ]
29}

If you need to post messages to channels dynamically (without a pre-created webhook per channel), read channel message history, or build a Teams bot that responds to users, the Microsoft Graph API is the path forward. This is an advanced setup requiring Azure AD. Here is the overview of the Graph API flow in Bubble: 1. Go to **portal.azure.com** → Azure Active Directory → App registrations → New registration. Name it (e.g., 'Bubble Teams Bot'). Select 'Accounts in this organizational directory only' for single-tenant. 2. After creating the app, go to **API permissions** → Add permission → Microsoft Graph → Application permissions. Add `ChannelMessage.Send` and `Team.ReadBasic.All`. Click **Grant admin consent** (requires a Global Admin). 3. Go to **Certificates & Secrets** → New client secret. Copy the secret value — you only see it once. 4. Note your **Tenant ID**, **Client ID**, and **Client Secret**. 5. In Bubble API Connector, create a new API named 'MS Graph Auth'. Add a POST call to `https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/token` with a form-data body: `grant_type=client_credentials`, `client_id=<your client ID>`, `client_secret=<your secret, Private>`, `scope=https://graph.microsoft.com/.default`. 6. Initialize this token call, store the returned `access_token` in a Bubble data type named 'GraphToken' with an `expires_at` field (current time + 3599 seconds). 7. Create a second API call: POST `https://graph.microsoft.com/v1.0/teams/{teamId}/channels/{channelId}/messages` with header `Authorization: Bearer {{token}}` (Private, dynamic). Body: `{"body": {"content": "{{message_text}}"}}`. Mark token as Private. RapidDev's team has built hundreds of Bubble apps with integrations like this — if your Teams setup needs multiple channels, bot personas, or enterprise policy compliance, a free scoping call at rapidevelopers.com/contact can save you days of Azure configuration.

1{
2  "token_endpoint": "https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/token",
3  "token_body": {
4    "grant_type": "client_credentials",
5    "client_id": "<your Azure app client ID — Private>",
6    "client_secret": "<your Azure app client secret — Private>",
7    "scope": "https://graph.microsoft.com/.default"
8  },
9  "graph_message_endpoint": "https://graph.microsoft.com/v1.0/teams/{teamId}/channels/{channelId}/messages",
10  "graph_message_body": {
11    "body": {
12      "content": "<dynamic:message_text>"
13    }
14  },
15  "graph_auth_header": "Authorization: Bearer <dynamic:access_token — Private>"
16}