Add a copilot to your Power Pages site

A Power Pages site 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.

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 Copilots 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.

1. Go to the Set up workspace.

2. Under Copilot, select Add copilot

   

3. Turn on Create copilot.

   Power Pages creates a copilot with generative answers conversation for you in Copilot Studio.

4. 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:

1. Open the copilot.

2. Under Refine your data, choose the Make changes button.

3. 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.

4. Choose Next.

5. 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.

6. 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.

7. Under Choose columns, select the list of columns that is used in page.

   Note

   Only a column with multiline text is available to choose.

8. Select Next and review the selection.

9. 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.

1. Go to site's code editor.
2. From Explorer navigation, expand the web-templates folder.
3. Open Header.html.
4. Add your style tag.
5. 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:

• Global administrator
• Power Platform administrator
• Dynamics 365 administrator

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

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 copilot 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

• Create an AI-generated webpage using Copilot
• Create a form in a webpage using Copilot
• Add AI-generated text using Copilot
• Force Bing webmaster to index your site (preview)
• Add AI-generated code using Copilot (preview)