Copilot Studio Website Channel Shows Blank Chat: Fix
🔍 WiseChecker

Copilot Studio Website Channel Shows Blank Chat: Fix

When you embed a Copilot agent from Copilot Studio into your website, the chat pane sometimes appears completely blank. No welcome message, no response, and no error text. This problem typically occurs because the website domain is not authorized in the Copilot Studio channel settings, or because a required authentication or data source configuration is missing. This article explains the three most common root causes and provides exact steps to restore the chat display.

Key Takeaways: Fixing a Blank Website Chat in Copilot Studio

  • Copilot Studio > Channels > Website > Domain security: Add your live website domain to the allowed list to prevent the chat from being blocked.
  • Copilot Studio > Settings > Authentication: Configure Microsoft Entra ID or anonymous access so the chat can load for visitors without a Microsoft 365 license.
  • Copilot Studio > Topics > System fallback: Enable a fallback topic to show a default message if the agent cannot match any user input.

ADVERTISEMENT

Why the Copilot Studio Website Chat Appears Blank

The blank chat pane is almost always caused by one of three technical failures. First, the Copilot agent blocks requests from domains that are not listed in the channel security settings. When a user visits your website, the browser sends a request to Copilot Studio. If the domain is not authorized, the server returns an empty response or a CORS error, and the chat UI shows nothing.

Second, the authentication method is misconfigured. Copilot Studio supports two modes for website channels: anonymous access and authenticated access with Microsoft Entra ID. If anonymous access is turned off and your website does not pass a valid token, the agent refuses to respond. The chat pane loads but remains empty because no data is exchanged.

Third, the agent has no active topics or the system fallback topic is disabled. When a user types a message, the agent tries to match it against existing topics. If no topic matches and the fallback topic is turned off, the agent returns nothing. The chat stays blank even though the connection is technically working.

Steps to Re-enable the Website Chat in Copilot Studio

Follow these steps in the order listed. Test the chat after each step so you can identify which fix resolved the issue.

Step 1: Authorize Your Website Domain

  1. Open Copilot Studio and select your agent
    Sign in to copilotstudio.microsoft.com with your Microsoft 365 account. From the left navigation, select Agents and click the agent that shows a blank chat on your website.
  2. Go to Channels > Website
    In the left menu, click Channels. Under the Available channels list, select Website. This opens the channel configuration page.
  3. Add your website domain to the allowed list
    Under Domain security, you see a text field labeled Allowed domains. Type your full website domain, for example www.example.com. If your site uses multiple subdomains, add each one on a new line. Do not include http:// or https://. Click Save at the top of the page.
  4. Re-embed the chat script on your website
    After saving, copy the embed code from the Website channel page. Replace the old script tag on your website with this new code. The chat will now load only for domains you authorized.

Step 2: Configure Anonymous Access

  1. Navigate to Settings > Authentication
    In Copilot Studio, click Settings from the left menu. Under the Security section, select Authentication. This page controls how users identify themselves to the agent.
  2. Enable anonymous access
    Set the toggle Allow anonymous access to On. This lets visitors without a Microsoft 365 account interact with the chat. If you need authenticated access for data-sensitive scenarios, keep this toggle Off and configure Microsoft Entra ID instead. For most public websites, anonymous access is the correct choice.
  3. Save and republish the agent
    Click Save. Then go to the Publish section in the left menu and click Publish. The changes apply to the live website within a few minutes.

Step 3: Enable the System Fallback Topic

  1. Open Topics > System
    From the left menu, select Topics. At the top of the topic list, switch the filter from Custom to System. You see a topic named Fallback.
  2. Turn on the fallback topic
    Click the Fallback topic. In the topic editor, ensure the Status toggle at the top right is set to On. If it is Off, click the toggle to enable it. The fallback topic triggers when the agent cannot find a matching topic for the user’s message.
  3. Edit the fallback message
    In the fallback topic, you see a message node. Replace the default text with something helpful, such as “I did not understand your question. Please rephrase or contact support.” Click Save and republish the agent.

Step 4: Verify the Chat Embed Code

  1. Check the script tag on your website
    Open your website’s HTML file or CMS template. Locate the script tag that loads the Copilot agent. It should look similar to <script src="https://copilotstudio.microsoft.com/..."></script>. Ensure the src URL is correct and not truncated.
  2. Confirm the script is placed before the closing body tag
    Move the script tag to just before </body> if it is not already there. This ensures the page DOM loads fully before the chat initializes.
  3. Clear your browser cache and test
    Open an incognito or private browser window. Navigate to your website. The chat should now display a welcome message or an input box. If it is still blank, proceed to the next section.

ADVERTISEMENT

If the Chat Is Still Blank After the Main Fix

The chat works on localhost but not on the live domain

This confirms the domain security setting is the issue. You likely missed adding the exact live domain to the allowed list. Go back to Channels > Website > Domain security and verify the domain spelling. Include the subdomain if your site uses www. For example, add both example.com and www.example.com if both redirect to your site.

The chat shows a loading spinner that never finishes

A persistent spinner usually indicates a network or CORS problem. Open your browser’s developer tools (F12) and check the Console tab. If you see a CORS error, the domain is not authorized or the embed script is being blocked by a content security policy. Add the Copilot Studio domain copilotstudio.microsoft.com to your website’s Content-Security-Policy header.

The chat loads but returns no responses to user messages

This points to a topic configuration issue. The agent has no topics that match the user’s input, and the fallback topic is either off or empty. Revisit Topics > System > Fallback and confirm it is enabled. Also check your custom topics: if they all have complex trigger conditions, simplify them to catch more user phrases.

Copilot Studio Website Channel: Anonymous vs Authenticated Access

Item Anonymous Access Authenticated Access (Microsoft Entra ID)
Who can chat Any visitor without sign-in Only users with a Microsoft 365 account in your tenant
Setup complexity Simple toggle in Settings > Authentication Requires app registration in Azure portal and token generation
Data access Agent uses only static knowledge sources Agent can access user-specific Microsoft 365 data
Use case Public FAQ, marketing, support Internal employee portals, HR self-service
Blank chat risk Low if domain is authorized High if token is missing or expired

For most public websites, anonymous access is the correct method. Authenticated access is intended for internal corporate portals where every visitor has a Microsoft 365 identity. If you choose authenticated access, you must implement token generation on your website’s backend and pass the token to the Copilot chat SDK.

After completing the steps above, your Copilot Studio website channel should display a fully functional chat pane. Test the chat on multiple browsers and devices. If the blank screen persists, review your website’s Content-Security-Policy headers and ensure they allow scripts from copilotstudio.microsoft.com and all subdomains. As an advanced tip, use the Copilot Studio Test Agent panel to send test messages directly in the studio before testing the live website.

ADVERTISEMENT