Answered

Customize Chat Bot Styling with CSS

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

Hi:

I am new to PVA chat bots. I have a standard HTML5 page styled with CSS. Our PVA chat bot developer provided the bot HTML/URL:

<!DOCTYPE html><html><body><iframe src="https://web.powerva.microsoft.com/environments/myenvironmentnumber/bots/new_bot_mybotidnumber/webchat" frameborder="0" style="width: 100%; height: 100%;"></iframe></body></html>

I put that iFrame in my HTML and it works, but the styling does not match. We want to override the bot styling with .css to match our company page styling. I tried following this article from Microsoft: https://docs.microsoft.com/en-us/power-virtual-agents/customize-default-canvas which uses Javascript and directline to get a token. I added my bot ID and ran the page. The bot launches, but gets an "Unable to Connect" error. When I take the directline URL+botid from the article code and put it in a browser, I get the following error:

{
"ErrorCode": 4103,
"ErrorMessage": "Bot with id mybotidnumber was not found.",
"DiagnosticsMessage": null,
"ErrorInfo": null
}

Any suggestions?

Thank you!

Categories:

Bot extensibility

I have the same question (0)

All responses (9)

Answers (1)

Verified answer

Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Hi, hoping this may help someone. After reaching out to coworkers, we found that the bot id is a GUID missing the dashes. Once we added the dashes in this format xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx the bot was found and rendered.

Was this reply helpful? Yes No
mr_dbc 14 on at

Like (0)

Report
Copy link

Link copied!

"We want to override the bot styling with .css to match our company page styling. "

are you able to override the default css by defining your own .css file?

Was this reply helpful? Yes No
hhimanshii 4 on at

Like (0)

Report
Copy link

Link copied!

Hi, please tell me from where are we getting the whole code of the pva bot.

Was this reply helpful? Yes No
mr_dbc 14 on at

Like (0)

Report
Copy link

Link copied!

Hi @hhimanshii , I'm afraid you can get the whole code of pva bot.
Can you tell me what exactly do you intend to achieve ?

Was this reply helpful? Yes No
hhimanshii 4 on at

Like (0)

Report
Copy link

Link copied!

hello, i need to customize the ui of bot. How can I do that?

Was this reply helpful? Yes No
adilei Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

Start by reading here and see if you have any specific follow up questions: https://learn.microsoft.com/en-us/microsoft-copilot-studio/customize-default-canvas?tabs=web.

Was this reply helpful? Yes No
mr_dbc 14 on at

Like (0)

Report
Copy link

Link copied!

why did my comment got removed?

Was this reply helpful? Yes No
mr_dbc 14 on at

Like (0)

Report
Copy link

Link copied!

@hhimanshii
can you give me your email details , so that i can help you out?
I'm not sure why my comment got removed

Was this reply helpful? Yes No
rkirk2k 282 on at

Like (0)

Report
Copy link

Link copied!

I've figured out how to embed the bot into SharePoint using an iframe, but has anyone been able to customize the styling of the bot in SharePoint?

Was this reply helpful? Yes No