web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Copilot Studio / Power Virtual agent on...
Copilot Studio
Unanswered

Power Virtual agent on mobile phone small text

(0) ShareShare
ReportReport
Posted on by MickaelAljian 4

I have been creating a PVA bot and was looking to do some customisation. Like automatically starting the conversation.

 

I used this documentation to create a HTML file for testing.

 

Automatically start a chatbot conversation - Power Virtual Agents | Microsoft Docs

 

When opening this HTML file on a computer it works. Looks as expected. (see example) 

MickaelAljian_0-1656569799909.png

If I open the same HTML file on a mobile phone the text is so small it is unreadable.

MickaelAljian_1-1656569854261.jpeg

 

If I open the Mobile App URI from Teams Channels on a phone it looks as expected.

 

Does anyone have any idea what is going on? I have looked through the Botframework style options (BotFramework-WebChat/StyleOptions.ts at master · microsoft/BotFramework-WebChat · GitHub) and cannot see anything that stands out which would exhibit this behaviour.

 

Or does anyone have any hints on having a better user experience with PVA on mobile? Like the phone keyboard overlapping the conversation.

 

Thanks,

 

Mickael

Categories:
General topics
I have the same question (0)
  • MickaelAljian Profile Picture
    MickaelAljian 4 on at

    OK, I am halfway there.

     

    The headings are in the h1 section of <Body> Doubling the px values of everything on the script, has made the heading readable on mobile phone.

     

    h1 {
    font-size: 32px;
    font-family: Segoe UI;
    line-height: 40px;
    color: whitesmoke;
    display: table-cell;
    padding: 26px 0px 0px 40px;

    }

     

    Having the chat covered by a keyboard on the phone is in the #webchat section of <Body>. Changing Height (50%) and Top tp 200px moves the chat window up to half way.  So when the keyboard appears it does not cover the chat.

     

    #webchat {
    position: fixed;
    height: calc(50% - 100px);
    width: 100%;
    top: 200px;
    overflow: hidden;

     

    Now all I need to do is work out how to make the chat text bigger.

     

    Any ideas?

  • MickaelAljian Profile Picture
    MickaelAljian 4 on at

    I can see there is discussion within the github repository for mobile-friendly options.

     

    Design: Finger-friendly UI for mobile device · Issue #2210 · microsoft/BotFramework-WebChat · GitHub

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

News and Announcements

Welcome to the Power Platform Communities
Season of Giving Solutions is Here!
Explore Copilot Studio Forums, Blogs & Galleries!

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Copilot Studio

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 255 Super User 2025 Season 2

#2
Romain The Low-Code Bearded Bear Profile Picture

Romain The Low-Code... 205 Super User 2025 Season 2

#3
S-Venkadesh Profile Picture

S-Venkadesh 101 Moderator

Last 30 days Overall leaderboard

Featured topics

Announcing the "Microsoft Copilot Studio ❤️ MCP" lab
Welcome to the Copilot Studio forum!

Product updates

Microsoft Power Platform Community release plans