Publish Your Custom Copilot to SharePoint Online Site

So, you've developed your custom Copilot using Copilot Studio, which leverages knowledge from your SharePoint site. And now, you’d like to publish that Copilot on the SharePoint site itself. So, what are your options? Well, you can deploy it as an SPFx component, which is well documented in this blog.

However, if you’re not a big fan of how it appears as a popup and are looking for an integrated chat experience similar to the test window in Copilot Studio, without spending a lot of effort customizing it, you can consider adding the Copilot as an iframe on your site’s home page. This is a great way to increase user traffic to your Copilot as it’s always visible on the SharePoint site.

Here’s a simple how-to guide:

Assumptions and Prerequisites:

• This article assumes you’re familiar with the basic concepts of customizing a SharePoint Online site, Copilot Studio, and the Generative AI features of Copilot Studio. Furthermore, it's assumed you already have a custom copilot developed using Copilot Studio.
• SharePoint Site admin permissions are required to make changes to security settings. Check with your InfoSec before enabling an iframe from an external site.
• While it’s not required, you’re likely using SharePoint as a knowledge source for your Copilot if you’re looking to publish your Copilot on a SharePoint site. If you’re not and would like to know more about it, you can refer to this document:?Use SharePoint or OneDrive content for generative answers.
• Copilot Studio authentication and SSO must be properly configured before proceeding further. You can refer to Microsoft documentation for more information.

Let’s begin.

First, we need to add Copilot domain to the allow-list to be able to insert an iframe. For this:

• Go to your SharePoint Online site and click on the gear icon in the top right, and then click on “Site Information”.
• Then click on “View all site settings”.
• Locate “HTML Field Security” as shown below.
• Add “copilotstudio.microsoft.com” or “web.powerva.microsoft.com” (you don’t have to add both, but since many users are still using web.powerva.microsoft.com, I'm including it).

Next, head over to Copilot Studio, open your Copilot, and click on Channels.

Click on “Custom website” and copy the HTML code as shown below.

Now, go back to the SharePoint site and click “Edit”.

• You can add a section/column where you’d like to embed the Copilot.
• In that section, add a web part by clicking the + button.
• Select the embed option and paste the HTML code you copied earlier.

In this example, I’ve set the height to 320%; you can adjust this based on your page layout.

That’s it! Republish the site, and you should see the Copilot embedded.

It should look something like this:

As you can see, this is quite easy to implement and very handy for demos, POCs, and quickly extending your Copilot to your associates. The UI also looks nice, looks well integrated, and allows users to open SharePoint documents quickly, which are linked in citations. Importantly, it displays the ellipses while you await an answer, which is currently missing in the test window of Copilot Studio.