Power Platform Community Forum Thread Details

I followed this article (https://learn.microsoft.com/en-us/microsoft-copilot-studio/customize-default-canvas) to customize the look of my agent but now the thumb-rating buttons are not displaying. It does display if I put it up without the customization but it doesn't match our branding or look as clean/user friendly. How do I get them to display? I have this in test so I can't share links.

Plain-Bot.png

Custom-Bot.png

Your file is currently under scan for potential threats. Please wait while we review it for any viruses or malicious content.

Categories:

General topics

@SS-13011357-0

1. Your custom canvas won’t auto-show thumbs → you must add your own UI in WebChat.

2. Use activityMiddleware to render thumb up/ thumbs down under each bot message.

3. On click, send a messageReaction via directLine.postActivity() with replyToId = activity.id.

4. Scope CSS to #webchat so your branding CSS doesn’t hide buttons.

// 1) createDirectLine as you already do
const directLine = window.WebChat.createDirectLine({ token });
const userId = "u_" + Math.random().toString(36).slice(2);

// 2) helper: send reaction
function reactTo(activityId, type /* "like" | "dislike" */) {
return directLine.postActivity({
type: "messageReaction",
from: { id: userId, role: "user" },
replyToId: activityId,
reactionsAdded: [{ type }]
});
}

// 3) add thumbs UI under each bot message
const React = window.WebChat.React;
const h = React.createElement;

const activityMiddleware = () => (next) => (card) => {
const a = card.activity;
if (!a || a.type !== "message" || a.from?.role !== "bot") return next(card);

return h("div", null,
next(card),
h("div", { className: "cc-reactions" },
h("button", { type: "button", className: "cc-reaction-btn", onClick: () => reactTo(a.id, "like").subscribe() }, "👍"),
h("button", { type: "button", className: "cc-reaction-btn", onClick: () => reactTo(a.id, "dislike").subscribe() }, "👎"),
)
);
};

// 4) render webchat with middleware
window.WebChat.renderWebChat(
{ directLine, userID: userId, styleOptions, activityMiddleware },
document.getElementById("webchat")
);

/* 5) minimal scoped styling */
#webchat .cc-reactions { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }
#webchat .cc-reaction-btn { border:1px solid #ccc; background:transparent; border-radius:999px; padding:4px 10px; cursor:pointer; }