How to Deploy Copilot in SharePoint Page?

In this article, we will learn about how to deploy Copilot in SharePoint page. In my previous article, I showed how to deploy Copilot in Microsoft Teams.

Before getting into this article, I would recommend you go through the questionnaires about Copilot Chatbot or Copilot Studio: Top 30 Microsoft 365 Copilot FAQ: Your Questions Answered

How to Deploy Copilot in SharePoint Page?

In order to deploy Copilot in SharePoint Online pages, first we need to configure the single sign-on (SSO) in the Copilot Chatbot. For this, refer to this article: Configure Single Sign On in Copilot Studio Bots and Microsoft Teams (SSO)

Once you have successfully configured the SSO for the Copilot chatbot, come to this article and move on. We must say that to deploy or integrate a Copilot in the SharePoint Online page, the Copilot authentication type must be selected as “Manual (for custom  website)”

To verify that, follow the below steps:

Select the copilot that you want to deploy or integrate into the SharePoint Online page.

Select security from the left-side panel under the “Settings” section.

Click on the authentication tile.

Yes, it has been verified that for this Copilot chatbot, the authentication type is “Manual (for a custom website), which requires users to sign in.

Now, let’s go to the various channels of the Copilot.

Available Channels in Copilot

Select channels from the left side panel under the “Settings” section.

We can see the following channels:

• Microsoft Copilot (preview): Publish plugins to a Microsoft Copilot for a unified experience.
• Microsoft Teams: Excited to make your bot available for others to use in Microsoft Teams? Review how your bot will appear. Select Edit details to modify. Once you are ready, select Availability options to continue.
• Demo Website: You created a copilot. Great job! Let’s set up a website to share with team members so they can try your copilot.
• Custom website: This channel allows you to embed an HTML copilot into your website. Learn about embedding your copilot in a web page.
• Mobile app: Allow your mobile app users to chat with your bot. Check out our instructions for both native and web-based mobile apps.
• Facebook: Set up this channel to let Facebook users chat with your copilot. Learn how to set up Facebook channel. Note that certain copilot content may not render the same on Facebook Messenger as it was authored in Microsoft Copilot Studio. For details, refer to our supported channel content article.
• Skype: Engage your customers on the channel that’s right for you. Leverage the resources and sample code we provide to develop a solution that fits your business needs.
• Slack: Engage your customers on the channel that’s right for you. Leverage the resources and sample code we provide to develop a solution that fits your business needs.
• Telegram: Engage your customers on the channel that’s right for you. Leverage the resources and sample code we provide to develop a solution that fits your business needs.
• Twilio: Engage your customers on the channel that’s right for you. Leverage the resources and sample code we provide to develop a solution that fits your business needs.
• Line: Engage your customers on the channel that’s right for you. Leverage the resources and sample code we provide to develop a solution that fits your business needs.
• GroupMe: Engage your customers on the channel that’s right for you. Leverage the resources and sample code we provide to develop a solution that fits your business needs.
• Direct Line Speech: Engage your customers on the channel that’s right for you. Leverage the resources and sample code we provide to develop a solution that fits your business needs.
• Email: Engage your customers on the channel that’s right for you. Leverage the resources and sample code we provide to develop a solution that fits your business needs.

From the above channels list, we have already learned how to integrate or deploy the Copilot chatbot in Microsoft Teams. In this article, we will see how to test Copilot on a demo website and a custom website.

• Demo Website: You created a copilot. Great job! Let’s set up a website to share with team members so they can try your copilot.
• Custom website: This channel allows you to embed an HTML copilot into your website. Learn about embedding your copilot in a web page.

Test Copilot Chatbot from a demo website

Click on the “Demo website” tile.

From the “Share your website” section, copy the website link and paste it in the new tab of your opened browser, then, we can see the below sample website scree:

Demo website channel in Copilot Chatbot – Try out the chatbot we madeClick on the “Login” button.

Copy this validation code.

And paste that validation into the demo website chatbot, then hit enter.

The Copilot chatbot sign-in validation code was validated successfully. Then, if we ask anything from my SharePoint site, it answers. Please see below:

Integrate Copilot in SharePoint Page – Custom Website

To integrate the Copilot chatbot into the SharePoint Online page, we need to click on the “Custom website” Copilot channel.

Copy the “Default embed code”

Open your SharePoint Online page.

Add an “Embed” web part.

Paste the “Default embed code” html you have copied in the previous step into the embed web part configuration box (website address or embed code).

But it didn’t go well, we can see the below error:

“Embedding content from this website isn’t allowed, but your admin can change this setting. They will need to add ‘copilotstudio.microsoft.com’ to the list of sites that are allowed.”

Let’s fix this error; it is very simple. We need to add the ‘copilotstudio.microsoft.com’ site to the HTML field security of the SharePoint site.

Go to your SharePoint Online site settings page.

Click on the “HTML Field Security” link from the site collection administration section.

Add the ‘copilotstudio.microsoft.com’ site to the “Allow iframes from this domain” section:

Click on the Ok button.

Now, let’s go back to the Embed web part page where we got the error.

Save the page.

Click on the “Login” button.

Copy the above validation code and paste into the Copilot chatbot box like below:

Then, hit enter.

It successfully validated the code and logged in.

Now, ask some questions from your site documents, and the copilot chatbot will answer them. Please see below:

Summary: Integrate Copilot in SharePoint Page

Thus, in this article, we have learned how to deploy and integrate custom copilot from the demo web site and a custom web site such as the SharePoint Online site. In both scenarios, it worked well.

See Also: Microsoft Copilot Articles

You may also read the following Microsoft Copilot Studio articles:

• Top 30 Microsoft 365 Copilot FAQ: Your Questions Answered
• Develop Copilot for Microsoft Teams in just 5 minutes
• How to Configure Authentication in Microsoft Copilot Studio Step by Step
• Microsoft Copilot Studio: How to Get Started Step by Step
• What is Copilot Visual Studio from Microsoft Ignite 2023?
• In 2 Steps Enable Power Platform Copilot: The Next Generation of Productivity Tools
• Microsoft Copilot Studio

About Post Author

SP Doctor

I am your SharePoint and Power Platform doctor and guide. Sharing knowledge with my fellow colleagues, friends, and the tech community makes me utmost happy in my job.

See author's posts