Add a copilot to your Power Pages site (preview)
[This topic is pre-release documentation and is subject to change.]
A copilot can provide quick and efficient customer support to your site's visitors and users, which can improve your site's overall user experience. Power Pages makes it easy to add one. In just minutes, you can create a Microsoft Copilot Studio copilot on your site that uses generative answers—that is, natural language to answer questions and suggest solutions to issues in a conversational way.
Important
- This is a preview feature.
- Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.
- To understand the capabilities and limitations of this feature, see FAQ for copilot.
- If you configure copilot for generative answers from public data using Bing search, use of Bing Search is governed by the Microsoft Services Agreement and Microsoft Privacy Statement.
Prerequisites
To use AI-powered Copilot features in Power Pages:
- Your environment must be located in the United States, Europe, United Kingdom, Australia, or India regions. Review the data storage and processing geographic regions for Azure Open AI and Bing search services.
- Your browser language must be set to US-English.
- Your tenant administrator must turn on the setting Publish bots with AI features in the Power Platform admin center.
- Copilot uses Microsoft Copilot Studio generative answers. Refer to Copilot Studio Quotas & Pricing for more details.
Add a copilot
You can manually add a copilot by following below steps.
Note
If a site meets the conditions outlined in the prerequisite section, the copilot will be added to the site during site provisioning. If you prefer not to have the copilot created by default, the service admins can disable this capability at the tenant level, as described in the section turn off default copilot provision.
Go to the Set up workspace.
Under Integrations, select Add copilot (preview)
Turn on Create copilot.
Power Pages creates a copilot with generative answers conversation for you in Copilot Studio.
To make the copilot available to visitors and users, turn on Enable copilot on site.
If your tenant admin hasn't turned on publish copilot with AI features, the Enable copilot on site isn't available.
Customize your copilot
When creating a copilot for a website, it utilizes the content from the hosting site to generate responses. The Dataverse service facilitates the indexing of site content and configured tables, which are then summarized by Copilot Studio to generate responses.
Authenticated site users receive tailored, summarized answers that align with their web roles. To further improve the content model for authenticated site users, refine the data by following these steps:
Open the chatbot.
Under Refine your data, choose the Make changes button.
Select Choose tables lookup control to select or deselect the tables.
- You can select multiple tables in this section. Ensure that any table you select here's used on the site.
- On subsequent pages, you must specify the page where the table is used for generating the citation URL.
Choose Next.
Under the Choose table, select the table that contains the columns and page link you wish to select. The table won't appear unless it has at least one multi-line column.
- You can select one table at a time.
Under Add page link, select the page where table is used.
Note
- Make sure you select the correct page where the table is used. Choosing the wrong table will result in the bot providing an incorrect citation URL for the answers.
- The page must use 'id' as the query string parameter; the citation URL will not function correctly if any other parameter name is used.
Under Choose columns, select the list of columns that is used in page.
Note
Only a column with multiline text is available to choose.
Select Next and review the selection.
Choose Save to submit the changes.
Customize copilot appearances
You can customize the copilot's style by overriding the default Cascade Style Sheet (CSS) classes. To do so, add a style tag to the header template and follow these steps to override the values.
- Go to site's code editor.
- From Explorer navigation, expand the web-templates folder.
- Open Header.html.
- Add your style tag.
- Override the respective styles.
Copilot widget
Copilot collapsed icon:
.pva-embedded-web-chat-widget {
background-color: #484644;
border: 1px solid #FFFFFF;
}
Tooltip:
.pva-embedded-web-chat-widget .pva-embedded-web-chat-widget-tooltip-text {
background: white;
color: #323130;
}
Copilot elements
Reference the CSS samples provided for examples of how to customize your chatbot's elements.
1. Header
.pages-chatbot-header
{
background: #77a145;
color: #ffffff;
}
2. Height and Width
.pva-embedded-web-chat[data-minimized='false'] {
height: 80%;
width: 25%;
max-width: 400px;
max-height: 740px;
}
3. Copilot window
.pva-embedded-web-chat-window {
background: white;
}
4. Bubble from copilot
Background color:
.webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
background-color: #77a145 !important;
border-radius: 5px !important;
}
Text color:
.webchat__bubble:not(.webchat__bubble--from-user) p {
color: #ffffff;
}
5. Bubble from user
Background color:
.webchat__bubble.webchat__bubble--from-user .webchat__bubble__content {
background-color: #797d81 !important;
border-radius: 5px !important;
}
Text color:
.webchat__bubble.webchat__bubble--from-user p {
color: #ffffff;
}
6. Reference links
.webchat__link-definitions__badge {
color: blue !important;
}
.webchat__link-definitions__list-item-text {
color: blue !important;
}
.webchat__render-markdown__pure-identifier {
color: blue !important;
}
7. Privacy message
Background color:
.pva-privacy-message {
background: #797d81;
}
Text color:
.pva-privacy-message p {
color: #ffffff;
font-size: 12px;
font-weight: 400;
}
Turn off default copilot provisioning
Service admins who are members of any of the following Microsoft Entra roles can use a PowerShell script to change the tenant-level setting enableChatbotOnWebsiteCreation:
The default value of the tenant-level setting is ‘null’ which will behave as if the setting is set to ‘true’ and creates the bot during site creation. The admin can set its value to ‘true’ or ‘false’.
To get the current value of the tenant-level setting, use the Get-TenantSettings command. For example:
$myTenantSettings = Get-TenantSettings
$ myTenantSettings.powerPlatform.powerPages
Note
The Get-TenantSettings command doesn't list tenant settings whose value is null. The default value of the tenant-level setting enableChatbotOnWebsiteCreation is null, so it doesn't appear the first time you run the script. After you set its value to true or false, the setting appears in the list.
To set a value for enableChatbotOnWebsiteCreation, use the Set-TenantSettings command. The following example sets the value to false:
$requestBody = @{
powerPlatform = @{
powerPages = @{
enableChatbotOnWebsiteCreation = $false
}
}
}
Set-TenantSettings -RequestBody $requestBody
Known issues
- You can't change your site's custom domain after you add a copilot. Instead, turn off the copilot, change the custom domain, and then turn the copilot again.
- Although you can turn on the copilot feature on sites that you create outside the regions chatbot is available in, the copilot might not be created.
- If you turn off the copilot feature, allow a few minutes for background operations to complete before you turn it on again.
See also
Feedback
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
Submit and view feedback for