Skip to main content

Notifications

Copilot Studio - Bot Extensibility
Answered

Customize Chat Bot Styling with CSS

(0) ShareShare
ReportReport
Posted on by

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:
  • rkirk2k Profile Picture
    rkirk2k 280 on at
    Re: Customize Chat Bot Styling with CSS

    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? 

  • mr_dbc Profile Picture
    mr_dbc 14 on at
    Re: Customize Chat Bot Styling with CSS

    @hhimanshii 

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

  • mr_dbc Profile Picture
    mr_dbc 14 on at
    Re: Customize Chat Bot Styling with CSS

    why did my comment got removed?

  • adilei Profile Picture
    adilei on at
    Re: Customize Chat Bot Styling with CSS

    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

  • hhimanshii Profile Picture
    hhimanshii 4 on at
    Re: Customize Chat Bot Styling with CSS

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

     

  • mr_dbc Profile Picture
    mr_dbc 14 on at
    Re: Customize Chat Bot Styling with CSS

    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 ?

     

  • hhimanshii Profile Picture
    hhimanshii 4 on at
    Re: Customize Chat Bot Styling with CSS

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

     

  • mr_dbc Profile Picture
    mr_dbc 14 on at
    Re: Customize Chat Bot Styling with CSS

    "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?

  • Verified answer
    Re: Customize Chat Bot Styling with CSS

    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.

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,526

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,907

Leaderboard

Featured topics