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.760 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.760 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.760 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.760 students) : English | Português

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
Power Virtual Agents News & Announcements

Power Virtual Agents News & Announcements

Keep up to date with current events and community announcements in the Power Virtual Agents community.

Power Virtual Agents Community Blog

Power Virtual Agents Community Blog

Check out the latest Community Blog from the community!

Top Solution Authors
Users online (3,428)