cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
sylwiastep
New Member

How to resize chatbot in Wordpress

I've created a chatbot, and have iFrame link, but when I embed it on our wordpress page the window where chat appears is extremely narrow. I tried to change the height bit on the code in wordpress, but it doesn't seem to do anything. I can't find anywhere in PVA to change the look of the chatbot, can anybody help me please? 

1 ACCEPTED SOLUTION

Accepted Solutions
renatoromao
Super User
Super User

Hi @sylwiastep ,

 

Your issue is quite simple, you are adding your iframe with width and height using 100%.

Try to change to: (height: 500px) -> pixels

<iframe src="https://web.powerva.microsoft.com/...." frameborder="0" style="width: 100%; height: 500px;"></iframe>

 


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.650 students) : English | Português

View solution in original post

6 REPLIES 6
renatoromao
Super User
Super User

Hi @sylwiastep ,

 

You can use CSS style to customize your chatbot design:

https://docs.microsoft.com/en-us/power-virtual-agents/customize-default-canvas#customize-the-default... 

 

You can see a bot template customized using the hyperlink below, using the F12 developer tool:

COVID19 Volunteer - Self4Society (mygov.in)


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.650 students) : English | Português

Thank you for that. I saw this, and I tried this, but it resulted in the chat window missing completely - just the title was showing. And I changed the Id where requested, and tried changing the link too... no luck at all 😞 

renatoromao
Super User
Super User

@sylwiastep ,

 

I already customized some PVA bots in a custom website. Can you share your WordPress public link that contains your bot implemented?

Maybe I can suggest some changes using your CSS file with the F12 developer tool. It'll help you to see the way to develop it.


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.650 students) : English | Português

Currently it looks like this. https://surreycoalition.org.uk/chat-to-us/

And the window where messages appear is way too narrow 😞 

renatoromao
Super User
Super User

Hi @sylwiastep ,

 

Your issue is quite simple, you are adding your iframe with width and height using 100%.

Try to change to: (height: 500px) -> pixels

<iframe src="https://web.powerva.microsoft.com/...." frameborder="0" style="width: 100%; height: 500px;"></iframe>

 


Did I answer your question? Mark my post as a solution!
Thanks!

Renato Romão,

Connect with me here 😉

Power Virtual Agents course (+2.650 students) : English | Português

View solution in original post

Kill me if I haven't tried that before!!! Really, I did, and that didn't work... but now it does, so a big THANK YOU to you!! 🤗

Helpful resources

Announcements
V3_PVA CAmpaign Carousel.png

Community Challenge - Giveaways!

Participate in the Power Virtual Agents Community Challenge

PVA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Top Solution Authors
Users online (970)