Microsoft 365

How to integrate Office 365 with Webflow

Office 365 handles email, calendars, document storage, and team collaboration across distributed teams. Connecting these tools to your Webflow site automates lead capture, centralizes document access, and synchronizes registration data with calendar systems.

You can embed Microsoft-generated iframe codes to display static content like forms and document viewers.

Use automation platforms like Zapier, Make, or n8n to connect form submissions to Microsoft services through visual workflow builders. Or, build custom integrations using Microsoft Graph API and Webflow's APIs when you need bidirectional data sync, complex workflows, or complete control over authentication and data transformation.

Embed Microsoft content directly

Webflow's Custom Code Embed element accepts iframe codes generated by Microsoft services. Drag the Embed element onto your page, paste the Microsoft-provided code, and publish. This approach requires no coding knowledge and works for static content display.

Generate embed codes in Microsoft Forms through the Share interface. According to Microsoft's form sharing documentation, click Share → Embed, copy the generated iframe code, and paste it into Webflow's Custom Code Embed element. For responsive design, use percentage-based widths (e.g., width="100%") and set appropriate height or min-height values. Forms automatically adapt to mobile devices, and responses are collected directly in your Microsoft Forms account. Cross-origin security restrictions prevent direct CSS styling of internal form elements like buttons or input fields.

You can control iframe dimensions and container styling around the embed through Webflow's responsive settings. Set width to 100% for responsive behavior and adjust height appropriately to prevent content clipping. For mobile responsiveness, test across Webflow's breakpoints to ensure proper display on different devices. Internal form styling (colors, fonts, field appearance) cannot be customized due to security restrictions.

OneDrive embedding supports individual Word documents, Excel spreadsheets, PowerPoint presentations, and PDFs. Right-click any file in OneDrive, select Embed, click Generate, and copy the resulting iframe code. Paste into Webflow's Embed element to display interactive document viewers. Only individual files can be embedded. Folders cannot be embedded with browsing capability. OneDrive for Business requires viewer authentication (unsuitable for public websites), while personal OneDrive allows anonymous viewing.

Personal OneDrive accounts allow anonymous viewing suitable for public embedding. OneDrive for Business requires viewer authentication, making it unsuitable for public Webflow sites. You can only embed individual files. Folder browsing with live directory navigation is not supported through iframe embeds. OneDrive embeds support Word documents (viewable and optionally editable), Excel spreadsheets (with interactive viewing), PowerPoint presentations, PDF files, and individual images.

Microsoft Teams does not support iframe embedding of meetings or chat widgets directly on external websites. The Share to Teams feature provides the only embedding option. A button opens Teams with pre-filled content. Add the launcher script in your page's custom code section and include the button HTML where you want it to appear.

Users must be signed into Teams for the button to function. This works for internal tools or member areas where Teams authentication is expected, not for public marketing pages. According to Microsoft's Share to Teams button documentation, the Share to Teams button functionality is available. Teams does not support iframe embedding of meetings, chat widgets, or interactive content for external websites.

SharePoint embeds follow the same iframe pattern but require explicit permission from SharePoint administrators. According to SharePoint embedding documentation, administrators must explicitly allow external domain embedding before your Webflow domain can display SharePoint content.

SharePoint-hosted Microsoft Forms and static document viewers work once permissions are configured. Interactive SharePoint lists with live data updates cannot be embedded through iframes alone. They require Microsoft Graph API integration with webhook subscriptions and delta queries to synchronize changes. Administrator approval for external domain embedding is mandatory through SharePoint's HTML Field Security settings before any embedding will function.

Connect through automation platforms

Third-party automation platforms like Zapier, Make, and n8n provide pre-configured connections between Webflow and Office 365, reducing the need for custom code but still requiring technical setup. These platforms handle OAuth authentication, API calls, and data transformation through visual workflow builders. Users must configure authentication parameters, map fields between systems, and manage API rate limits across both Webflow (60-120 requests/minute) and Microsoft Graph (service-specific throttling).

Zapier's Office 365-Webflow integration offers pre-built templates connecting Webflow to Microsoft 365 services. Create automated workflows that sync form data to Excel spreadsheets, send Outlook emails, update SharePoint lists, or post Teams channel messages. Zapier provides templates for common automations. Current template counts vary, so check Zapier marketplace for up-to-date availability.

The Microsoft Outlook-Webflow integration supports email automation through Zapier's integration platform with templates for sending emails, creating calendar events, and managing contacts. When someone submits a Webflow form, you can use Zapier to trigger email responses from your Office 365 account with company branding and professional email addresses.

Zapier handles OAuth 2.0 authentication through a guided connection flow where you grant permissions once, and Zapier automatically manages token refresh. File upload limits depend on Zapier plan. Zapier Interfaces support 5 MB per file on Free plans and 25 MB per file on Pro plans. For general file operations, large files may encounter timeout issues. Check current Zapier documentation for service-specific limits.

Zapier offers strong support for Microsoft 365 services with templates for Outlook, Excel, and Teams. SharePoint support is more limited compared to other Microsoft services, particularly when requiring advanced list operations or complex data transformations.

Make (formerly Integromat) provides more technical control with comprehensive module catalogs. The platform supports Microsoft Teams operations including member management, channel operations, and online meetings. OneDrive operations include file handling with copy, move, rename, and sharing functions. Excel table and worksheet operations provide data transformation capabilities.

Make's visual scenario builder handles conditional logic, error handling, and multi-step data transformations. Watch for new Webflow form submissions, transform the data structure, and update multiple Microsoft services in sequence. OAuth authentication uses the callback URL https://www.integromat.com/oauth/cb/webflow2 with base API URL https://api.webflow.com/v2/ as documented in Make's Webflow integration guide.

n8n's SharePoint implementation provides SharePoint integration with file operations, item management, and list operations. For technical teams, self-hosting n8n offers complete control over data flow, security configuration, and unlimited workflow execution without per-task pricing.

The n8n Microsoft Teams node includes operations like member management, channel operations, online meetings, presence tracking, and a "Send and Wait for Response" operation for approval workflows. n8n provides SharePoint implementation options for developers requiring self-hosted solutions with complete API access, custom node creation for specialized requirements, and full control over data flow and security.

Build with Webflow and Microsoft Graph API

Custom API integration requires external middleware infrastructure because Webflow's static hosting environment cannot execute server-side code, securely store API tokens, or make direct API calls to Microsoft Graph due to browser CORS restrictions. According to Microsoft Graph CORS documentation, the API does not return the CORS headers (Access-Control-Allow-Origin, Access-Control-Allow-Headers) required for browsers to permit cross-origin requests from client-side JavaScript. All Microsoft 365 integration attempts must route through external services (Azure Functions, AWS Lambda, or automation platforms) rather than directly from client-side Webflow code.

Authentication and middleware architecture

Microsoft Graph API requires OAuth 2.0 authentication flows that cannot run in browser-based JavaScript. According to Microsoft's OAuth documentation, the authorization code flow involves multiple endpoints, token exchanges, and refresh token management that require server-side implementation.

Deploy middleware services using Azure Functions, AWS Lambda, or similar platforms. The middleware handles OAuth authorization code flow with token acquisition, secure token storage and automatic refresh (access tokens are short-lived and refresh tokens expire after 90 days of inactivity), API request orchestration between Webflow and Microsoft Graph, rate limit management for both platforms, and CORS-enabled proxy required since Microsoft Graph blocks direct browser calls from client-side JavaScript.

Webflow's webhook system triggers your middleware on form submissions, CMS changes, or e-commerce orders. Your middleware then authenticates to Microsoft Graph using OAuth 2.0 bearer tokens, makes authorized API calls to Microsoft 365 services, and optionally updates Webflow CMS through the Webflow API. This architectural pattern is required because Webflow's static hosting environment cannot directly execute server-side code or securely maintain OAuth tokens.

Required Azure AD permissions

Register your application in Azure AD portal and configure specific Microsoft Graph permissions. According to Microsoft's permissions reference, different use cases require different scopes.

Mail operations require Mail.Send for sending emails, Mail.ReadWrite for reading and modifying messages, and Calendars.ReadWrite for calendar event access. Calendar events require Calendars.ReadWrite for creating and updating events and Calendars.Read for read-only access. OneDrive files require Files.ReadWrite for user's own files and Files.ReadWrite.All for file operations across all user drives. SharePoint content requires Sites.Read.All for read access to list and document library and Sites.ReadWrite.All for creating and modifying items. Teams messaging requires ChannelMessage.Send for posting to channels and ChannelMessage.Read.All for reading channel messages.

Most SharePoint and Teams application-level permissions require tenant administrator consent, particularly when implementing application permissions (app-only context). When using delegated permissions (user context), your application accesses resources on behalf of the signed-in user and typically requires user consent rather than administrator consent. However, sensitive operations may still require administrator approval. Your application cannot access these resources until appropriate consent is granted through the OAuth 2.0 flow, either user consent for delegated scenarios or administrator consent for application permissions.

Sync form submissions to Microsoft services

POST to /me/sendMail or /users/{id|userPrincipalName}/sendMail at https://graph.microsoft.com/v1.0/ according to Mail API documentation. Structure your request body with a message object containing subject, body, toRecipients, and optional attachments array. The send mail endpoint accepts HTML formatted content within the message body and supports file attachments.

Your middleware receives Webflow form webhook payloads, extracts submission data, formats the email body with form field values, and makes the authenticated POST request to Microsoft Graph's Outlook Mail endpoint (/users/{id}/sendMail). This middleware layer is mandatory because Webflow's static hosting architecture prevents direct browser-based calls to Microsoft Graph API due to CORS restrictions. The middleware must handle OAuth 2.0 authentication, maintain secure token storage with refresh logic for 90-day expiration cycles, implement rate limiting for both Webflow's 60-120 requests/minute and Microsoft Graph's 130,000 requests per 10-second global throttling, and manage Retry-After header responses. Emails send from the authenticated user's Outlook account, maintaining company branding and professional email addresses.

Create calendar events from bookings

POST to /me/events or /users/{id|userPrincipalName}/events at https://graph.microsoft.com/v1.0/ with the Calendar API to create Outlook calendar events. Include event properties like subject, start and end times with timezone support through the timeZone property in start and end objects, location, and attendee array. The API requires Calendars.ReadWrite permission and supports time zones by specifying the timeZone identifier within the dateTime objects (e.g., "2026-01-15T10:00:00" with "Pacific Standard Time" as the timeZone value).

When users submit booking forms on your Webflow site, your external middleware service (such as Azure Functions or AWS Lambda) receives the webhook notification and extracts the date, time, and attendee information. The middleware then authenticates with Microsoft Graph API using OAuth 2.0 credentials, formats the data according to the Calendar API schema, and creates events in the appropriate Outlook calendar using the /users/{id}/events endpoint. The API returns the created event with a unique ID for future reference and additional metadata like the event's web URL and attendee status. This architecture is necessary because Webflow's static hosting cannot directly execute OAuth 2.0 flows or call Microsoft Graph due to CORS restrictions and the absence of server-side code execution capabilities.

Update SharePoint lists with form data

When integrating Webflow forms with SharePoint lists through the Microsoft Graph API, your implementation must handle SharePoint's strict data validation requirements. SharePoint list items require data transformation to match the defined column schemas. Text fields accept string values, date columns must use proper date formatting, and choice fields must match predefined option values exactly. Your middleware layer (whether using Power Automate, Azure Functions, or third-party automation platforms like Zapier or Make) handles mapping Webflow form submission payloads to SharePoint's expected field formats and data types before executing the API create or update operations.

Add rows to Excel spreadsheets

The Excel API requires delegated permissions only with signed-in user context. No application permissions are supported. This means you cannot implement background sync jobs without an active user session. Excel files must be hosted in OneDrive or SharePoint, and all operations require OAuth 2.0 delegated flow rather than app-only authentication.

Use PATCH to /me/drive/items/{item-id}/workbook/worksheets/{sheet-id}/range(address='{range}') to update cell ranges. Your middleware formats form submission data as a values array and updates the appropriate cells. Create persistent sessions using the session API for improved performance across multiple operations. Excel API supports only delegated permissions (no application permissions), requiring user context for all operations, which affects server-to-server automation scenarios.

What you can build

Integrating Office 365 with Webflow automates communication workflows, centralizes data management, and creates collaborative content systems.

• Lead management system: Connect Webflow form submissions to SharePoint lists, Outlook, and Teams through third-party automation platforms like Zapier or Make. Send automated email responses and channel notifications while centralizing contact data in SharePoint lists (requires external middleware infrastructure to manage authentication and data synchronization between systems)
• Document portal: Embed OneDrive file viewers displaying company policies, product specifications, and training materials directly in Webflow pages (only individual files can be embedded, not folders with browsing capability; OneDrive for Business embeds require viewer authentication making them unsuitable for public websites)
• Event registration platform: Capture attendee information through Webflow forms and automatically create Outlook calendar events with meeting details while adding registrants to Teams channels using third-party automation platforms like Zapier or Make
• Content backup workflow: Sync Webflow CMS collection items to Excel spreadsheets in OneDrive using automation platforms like Make or Zapier on scheduled intervals, providing disaster recovery copies of content stored outside the Webflow platform (Webflow's 60-120 requests/minute rate limit constrains large-scale sync operations)