Ever thought about owning a custom copilot for your personal, business or any website? It’s time to turn that thought into reality!

Learn how to build a custom copilot, using Microsoft Copilot Studio, with a welcome message, prompts, generative ai responses, gathering information from multiple websites and fallbacks, manual topics to capture contact information. All of this while working through a conversation flow diagram.

This is an introduction to the design and build of the website and does not cover embedding the copilot or placement of the copilot on your website.

Scroll down for additional resources.

Guide

Conversational Flow Diagram

Adaptive Card Example

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": 2,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Contact Me",
                            "weight": "Bolder",
                            "size": "Medium",
                            "style": "heading",
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "Please provide your details below and the question or message you have",
                            "isSubtle": true,
                            "wrap": true
                        },
                        {
                            "type": "TextBlock",
                            "text": "No information will be shared with third parties",
                            "isSubtle": true,
                            "wrap": true,
                            "size": "Small"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://www.flowjoe.io/wp-content/uploads/2023/11/Top_Image_FlowJoe_1.png",
                            "altText": "FlowJoe"
                        }
                    ]
                }
            ]
        },
        {
            "type": "Container",
            "$data": "${properties}",
            "items": [
                {
                    "type": "Input.Text",
                    "label": "Name",
                    "id": "Name",
                    "regex": "^[A-Z][a-z]+$",
                    "errorMessage": "Please enter your name",
                    "isRequired": true
                }
            ]
        },
        {
            "type": "Container",
            "$data": "${properties}",
            "items": [
                {
                    "type": "Input.Text",
                    "label": "Email Address",
                    "id": "EmailAddress",
                    "regex": "^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+[.][A-Za-z0-9-]{2,4}$",
                    "errorMessage": "Please enter a correct email address",
                    "isRequired": true
                }
            ]
        },
        {
            "type": "Container",
            "$data": "${properties}",
            "items": [
                {
                    "type": "Input.Text",
                    "label": "Message",
                    "id": "Message",
                    "errorMessage": "Please enter a message",
                    "isRequired": true
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit"
        }
    ]
}

Additional Resources

• Adaptive Cards: https://adaptivecards.io/designer/
• Microsoft Learn Docs: https://learn.microsoft.com/en-us/microsoft-copilot-studio/fundamentals-what-is-copilot-studio
• Copilot Studio Website: https://www.microsoft.com/en-us/copilot/microsoft-copilot-studio