Microsoft Copilot

How to integrate Microsoft Copilot with Webflow

Integrating Microsoft Copilot with Webflow gives your site AI-powered chat interfaces and semantic search across Microsoft 365 content. This connection helps teams surface internal knowledge bases on public websites and automate content synchronization between platforms.

You can embed Microsoft Copilot chat widgets using HTML iframe code from Copilot Studio, or build custom integrations using Microsoft Graph APIs and Webflow's APIs. The embed approach works for most teams adding chat widgets. API integration makes sense when you need custom UI controls, complex authentication flows, or tight integration with Webflow CMS collections.

Embed Microsoft Copilot chat widgets

Microsoft Copilot Studio provides HTML iframe code for adding chat interfaces to any website. The iframe renders a chat interface for website visitors.

Access the Microsoft Copilot Studio web channel to obtain the iframe HTML code. Paste this code into a Code Embed element on any page where you want the chat interface to appear.

The iframe embed approach works for:

• Customer support chat on product pages
• Knowledge base search on documentation sites
• Interactive FAQs that query your Microsoft 365 content

Configuration requirement: Set authentication to "No authentication" in Copilot Studio for public embed to work.

Learn more about web channel configuration.

Implementation steps:

• Add a Code Embed element to your Webflow page
• Paste the Microsoft-provided iframe HTML into the embed element
• Style the embed container with custom CSS if needed for responsive behavior
• Publish your Webflow site to make the chat widget live

Character limits: Webflow allows 50,000 characters for Code Embed elements per the custom code documentation. Microsoft iframe code is well within this limit.

Styling options: The iframe loads Microsoft's default chat UI. You can style the iframe container element in Webflow using standard CSS, but customizing the chat interface itself requires using the Chat API to build your own UI. Note that Chat API is currently in private preview and requires Microsoft account team approval.

Build with Webflow and Microsoft Graph APIs

The Microsoft Graph API exposes Copilot functionality through RESTful endpoints. This approach requires OAuth 2.0 authentication, API key management, and custom JavaScript to handle requests and responses.

You'll authenticate users through Microsoft Entra ID, retrieve data from Microsoft 365 sources, and display results in custom Webflow components. API integration works best for teams with backend infrastructure to proxy requests and manage authentication tokens. Direct calls from browser-based Webflow sites to Microsoft Graph APIs will fail due to CORS restrictions.

Available API endpoints:

• Retrieval API (Public Preview) for accessing Microsoft 365 content programmatically with semantic search capabilities
• Search API (Preview) for semantic search across connected data sources
• Interaction Export API (Public Preview) for analyzing how users engage with your copilot
• Change Notifications API (Preview) for webhook-based content updates
• Meeting Insights API (Beta) for meeting-related data extraction, available only at graph.microsoft.com/beta/copilot

Licensing requirement: These APIs require a Microsoft 365 Copilot license for each user accessing the functionality.

Rate limits: The Retrieval API allows 200 requests per user per hour, with a 1,500-character limit per query string and maximum 25 results per query.

Learn more about Microsoft Copilot APIs.

Authentication flow: Use OAuth 2.0 Authorization Code Flow with PKCE for authentication as described in the Microsoft documentation. Both platforms support standard OAuth patterns. Tokens expire and require refresh logic, so plan for token management in your backend infrastructure.

Sync Microsoft 365 content to Webflow CMS

Connect Microsoft Graph webhooks to Webflow CMS collections to create or update Webflow content items when documents change in SharePoint or OneDrive. This keeps your public website content synchronized with internal knowledge bases.

Set up Microsoft Graph change notifications for SharePoint libraries or OneDrive folders. When Microsoft sends webhook events for created, updated, or deleted resources, your middleware calls the Webflow CMS Items API to mirror changes.

Microsoft Graph sends webhook notifications when content changes, triggering these event types:

Webhook event types:

• created events trigger new CMS item creation in Webflow collections
• updated events modify existing Webflow items based on resource ID mapping
• deleted events archive or remove corresponding Webflow CMS items

Implementation requirements: Microsoft Graph webhooks require publicly accessible HTTPS endpoints. Host middleware on serverless platforms like Azure Functions to receive webhook payloads, validate signatures, and call Webflow APIs. Webhook subscriptions expire and require renewal logic to continue receiving notifications. You must also implement validation token handling when Microsoft initially confirms endpoint ownership.

Implementation complexity: You'll need to map SharePoint document IDs to Webflow item IDs, handle deduplication for documents that trigger multiple change events, transform SharePoint metadata into Webflow collection schema, and implement retry logic for failed syncs.

Payload limits: Microsoft Graph webhook subscriptions support payloads up to 5MB per the webhook documentation.

Add AI-powered search to collection pages

Build custom search interfaces that query Microsoft 365 content through Copilot's semantic search capabilities, then display results in Webflow.

Use the Copilot Retrieval API (Public Preview) to send user queries and receive ranked results based on AI understanding of intent. The Retrieval API provides true semantic search grounded in Microsoft 365 content. Render results in Webflow using custom JavaScript.

Search scope configuration: Connect your copilot to specific SharePoint sites, OneDrive folders, or Teams channels. The Retrieval API only returns results from connected data sources that the authenticated user has permission to access. You must filter by data source type, as the API does not support interleaved results across different source types.

Response structure: Search results include resource titles, snippets, URLs, and relevance scores when retrieving from SharePoint or OneDrive sources. Parse JSON responses and inject HTML into Webflow elements using the Webflow JavaScript API.

What you can build

Integrating Microsoft Copilot with Webflow enables AI-powered interfaces that connect your public website to Microsoft 365 organizational knowledge.

• Knowledge base search interfaces: Query SharePoint libraries and OneDrive folders through Copilot's Retrieval API semantic search, displaying results alongside Webflow CMS collection items for unified search across internal and public content
• Automated documentation sites: Sync technical specifications, product guides, or policy documents from SharePoint to Webflow CMS collections using Microsoft Graph webhooks, keeping public-facing help centers current with internal knowledge bases
• Conversational product pages: Add embedded chat widgets that answer visitor questions based on product specifications, FAQs, and support documentation stored in Microsoft 365 data sources