Smart FAQ bot embedded via iframe

Adding a Smart FAQ bot to a Power Pages site can greatly enhance the self-service experience for users by giving them instant answers to common questions. When embedded via an iFrame, the bot is accessible without navigating away from the portal, ensuring a seamless user journey.

Here’s a detailed, step-by-step guide to help you build and embed a Smart FAQ bot using Microsoft Power Virtual Agents, integrated into Power Pages via iFrame.

---

Step 1: Design Your FAQ Experience

Before creating the bot, outline your goals:

• Purpose: Answer frequently asked questions about your product, service, event, or portal features.
• Structure: Group FAQs into categories like “Getting Started”, “Troubleshooting”, “Billing”, etc.
• Tone: Keep answers brief, helpful, and user-friendly.

---

Step 2: Create the Smart FAQ Bot in Power Virtual Agents

1. Go to Power Virtual Agents
   • Navigate to: https://powervirtualagents.microsoft.com
   • Sign in with your Microsoft credentials.
2. Create a New Bot
   • Click “Start from blank” or use a template.
   • Give it a name like “SmartFAQBot”.
3. Add Topics for FAQs
   • Go to Topics in the left panel.
   • For each FAQ, create a trigger phrase and response.
     • Example:
       • Trigger: “How do I reset my password?”
       • Response: “To reset your password, click on ‘Forgot Password’ on the login page and follow the steps.”
4. Enable AI-Driven Suggestions
   • Turn on the AI capability to handle similar user queries even if they don’t exactly match trigger phrases.
5. Test Your Bot
   • Use the Test Bot panel to simulate user interactions and refine responses.

---

Step 3: Publish the Bot

Once your bot is ready:

1. Click Publish in the top-right corner.
2. After publishing, go to Manage > Channels.

---

Step 4: Set Up the Website Channel

1. Click on Custom Website under the Channels section.
2. Copy the embed code snippet provided by Power Virtual Agents. Example:
   <iframe src="https://web.powerva.microsoft.com/environments/Default-1234567-bot/MySmartFAQBot/webchat?__version__=2" frameborder="0" style="min-width: 400px; width: 100%; height: 500px;"> </iframe>
3. Save this code in a safe place—you’ll use it in Power Pages shortly.

---

Step 5: Embed the Bot in Power Pages via iFrame

1. Go to Power Pages Studio
   • Open the Power Pages site where you want to add the bot.
2. Select the Page
   • Choose or create a page like “Help Center” or “Support”.
3. Add HTML Code Component
   • Use the HTML code component in the design panel.
4. Paste the iFrame Embed Code
   • Paste the iFrame code snippet you copied from Power Virtual Agents.
5. Adjust Size and Placement
   • Modify min-width, height, or use CSS classes if needed for responsiveness.
6. Save and Preview
   • Save the changes and preview the page to ensure the bot loads and functions correctly.

---

Step 6: Secure and Optimize

1. Access Control
   • Make sure the page with the bot is accessible to the right user roles.
   • Use Power Pages Web Roles and Web Page Permissions to control visibility.
2. Performance Optimization
   • Load the iFrame lazily or in a tab to reduce load time on the home page.
   • Consider placing the bot on a dedicated FAQ or support page.
3. Mobile-Friendly
   • Make sure the bot frame adjusts to smaller screen sizes.
   • Use CSS media queries or percentage-based widths.

---

Step 7: Enhance with AI Features (Optional)

• Enable Multi-turn Conversations
  • Use Power Virtual Agents’ built-in support for dialogs and multiple steps.
• Escalate to Human Agent
  • Add options to connect users with a live agent via Teams or email if the bot can’t answer.
• Analytics
  • View usage stats in Power Virtual Agents admin panel.
  • Use insights to improve answers and detect trending topics.