One of the solutions you can build with Microsoft Copilot Studio is an agent or chatbot for use on your external website. When you build such a chatbot, you want it to have a look that is adapted to the website it will be used on.
This is where “Webchat Playground” from “Copilot Studio Kit” comes in.
Copilot Studio Kit is a tool consisting of a Power Platform solution built and maintained by Microsoft’s Power Customer Advisory Team (Power CAT). The tool contains a lot of functionality, including for testing, agent review, call analysis, etc. A lot we can blog about here, but today we’re taking a quick look at “Webchat Playground”. To learn more about Copilot Studio Kit, see Copilot Studio Kit overview – Microsoft Copilot Studio | Microsoft Learn
Webchat Playground
In Webchat Playground we have three columns, in the first one we find the theme, here you can choose from a part ready-made theme or create your own, the middle column shows a preview of what your chatbot will look like, the last column allows you to choose between JSON or HTML. JSON tab all the styles that you can copy to an existing Web Chat you have created. The HTML tab shows the example HTML with Web Chat and the style you have defined integrated.
Theme
Click on the Add Theme button to create your own theme.
You will then have the opportunity to change colors, fonts and several other style elements for how Web Chat with your chatbot looks. The main elements you can change are:
General
Here you can, among other things, choose which background color, which text color and font the chatbot should use.
Each section also has an accessibility section that shows if you have chosen colors that do not go together. For example, if the color schemes make text or buttons difficult to read. Then you will be notified in the form of a message like this:
Send Box
Send box is the bottom box where the user writes their message. There you can also change the colors of boxes, buttons and text. In addition, you can remove the paperclip icon if you don’t need the ability to upload files to the chatbot user interface.
Suggestion Box
Suggestion box is what are called Quick Reply buttons when you configure your chatbot in Copilot Studio. On these, you can also change the colors of the background, frame, and text. In addition, using the Border Radius slider, you can choose whether the button should be square or have rounded corners.
Avatar
In the avatar section, you can change the avatar icon for both your chatbot and for the user who chats with it. In addition to background color, you can change the Border Radius for rounded corners and choose whether the avatar should be an icon/image or be represented by initials. If you want to use icon/image, you can use the URL of an image or, as in my case here, use the base64 representation of an image. To create a base64 representation of an image, there are several free services online, just search the internet for “convert image to base64”.
A base64 representation of my icon looks like this:
data:image/png; base64, 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I just paste this into the Bot image field, and this will then become my bot avatar.
Bubble
The last section of the “Webchat Playground” is Bubble. Here you can change the appearance of the chat bubbles for both the user and the chatbot.
Summary
Once you are happy with the look of the chatbot, you can copy JSON with the styles from the JSON panel if you have an existing implementation of a Web Chat interface.
If you don’t have an existing Web Chat interface then you can go to the HTML tab, copy the HTML code into a tool such as Visual Studio Code. You need to change a line in the code before you can test your chatbot.
On the line of “const tokenEndpoint = “{INJECT_TOKENENDPOINT}”;» (about line 12), there you should enter the URL to the Token Endpoint for the chatbot you want to test. Token Endpoint can be found by opening your chatbot/agent in Microsoft Copilot Studio, navigating to Channels, and selecting Email. Here, find the Token Endpoint and click Copy.
You then paste this into the line with const tokenEndpoint as follows:
Save this file as chatbot.html on your local PC and open it in a browser.
Then you should be able to see the chatbot with your new look and test it.
As we have seen, “Webchat Playground” allows you to quickly change simple elements of the appearance of your chatbot when you want to publish it to external websites. You get a visual representation of what it will look like while you change, and you get sample code for how you can implement it on your website.
For more details and for guidance on more complex scenarios, visit these links:
Customize Web Chat appearance with Webchat Playground – Microsoft Copilot Studio | Microsoft Learn
Customize the look and feel of an agent – Microsoft Copilot Studio | Microsoft Learn
Web Chat customization in the Bot Framework SDK – Bot Service | Microsoft Learn
