Customize Your Agent in Microsoft Power Pages
Customize Your Agent in Microsoft Power Pages
Microsoft Power Pages allows you to customize AI-powered Agents to deliver more relevant, personalized, and visually appealing experiences for your users. You can refine the data used by the Agent, configure citations, select Dataverse tables, and customize the chatbot appearance using CSS and JavaScript.
Why Customize Your Agent?
By customizing your Agent, you can improve response accuracy, personalize user experiences based on web roles, and align the chatbot interface with your organization's branding and design standards.
- Improve response relevance.
- Control AI knowledge sources.
- Personalize answers for authenticated users.
- Customize chatbot branding.
- Enhance user engagement.
- Provide accurate citations.
How Agent Data Works
Power Pages Agents use website content and Dataverse tables to generate responses. When users are authenticated, the Agent can provide personalized answers based on assigned web roles and available permissions.
Refine Agent Data Sources
Follow these steps to configure the data used by your Agent:
- Open Power Pages.
- Navigate to Set up Workspace.
- Select Copilot.
- Choose Add Agent.
- Under Refine Your Data, select Make Changes.
- Choose the Dataverse tables that should be used by the Agent.
- Remove tables that shouldn't be referenced.
- Save your configuration.
Configure Table Citations
To improve transparency and help users locate source information, you can associate Dataverse tables with specific website pages.
- Select the Dataverse table.
- Choose Add Page Link.
- Select the webpage containing related information.
- Save the mapping.
When the Agent generates responses, users can view citations that reference the associated webpage.
Select Multiline Columns
Multiline text columns often contain valuable business information such as descriptions, notes, and comments. These columns can be configured as knowledge sources for the Agent.
- Descriptions
- Comments
- Knowledge Articles
- Notes
- Support Content
Customize Agent Appearance
Power Pages allows developers to customize the chatbot interface using custom CSS and JavaScript.
Steps to Customize the Agent
- Open the Power Pages code editor.
- Navigate to Web Templates.
- Open Header.html.
- Add a <style> block or JavaScript.
- Override default chatbot styles.
- Save and publish your changes.
Customizable Agent Elements
| Element | Description |
|---|---|
| Header | Customize chatbot title bar appearance. |
| Height & Width | Adjust widget size and positioning. |
| Copilot Window | Modify the main chat window styling. |
| Chat Bubbles | Customize message background colors. |
| Text Colors | Control chatbot text appearance. |
| Reference Links | Style citation and source links. |
| Privacy Message | Customize privacy notices and disclaimers. |
Agent Widget Customization
If your Agent was created before July 2025, you may notice a different chatbot experience compared to newer Agents. Microsoft continuously improves the Agent interface and introduces additional customization capabilities.
Customizable Widget Components
- Collapsed Chat Icon
- Tooltip Messages
- Agent Logo
- Header Branding
- Message Bubbles
- Privacy Banner
- Reference Links
- Window Dimensions
Example CSS Customization
.agent-header {
background-color: #0078D4;
color: white;
}
.agent-window {
border-radius: 12px;
}
.agent-bubble {
background-color: #F3F6F9;
}
.agent-link {
color: #0078D4;
}
Best Practices
- Use only relevant Dataverse tables.
- Configure citations for transparency.
- Maintain consistent branding.
- Test Agent responses regularly.
- Review permissions and security settings.
- Monitor Agent performance and usage.
Summary
Customizing your Power Pages Agent allows you to create more accurate, engaging, and branded AI experiences. By refining knowledge sources, configuring citations, selecting Dataverse content, and customizing the chatbot interface, you can deliver intelligent conversational experiences tailored to your business needs.