Answered

How to resize chatbot in Wordpress

(0) Share

Report

Posted on by sylwiastep

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?

All responses (6)

Answers (1)

sylwiastep 11 on at

Like (1)

Report

Re: How to resize chatbot in Wordpress

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!! 🤗
Verified answer

CU22081450-0 Most Valuable Professional on at

Like (2)

Report
Re: How to resize chatbot in Wordpress

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>
sylwiastep 11 on at

Like (0)

Report

Re: How to resize chatbot in Wordpress

Currently it looks like this. https://surreycoalition.org.uk/chat-to-us/
And the window where messages appear is way too narrow 😞
CU22081450-0 Most Valuable Professional on at

Like (0)

Report

Re: How to resize chatbot in Wordpress

@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.
sylwiastep 11 on at

Like (0)

Report

Re: How to resize chatbot in Wordpress

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 😞
CU22081450-0 Most Valuable Professional on at

Like (0)

Report

Re: How to resize chatbot in Wordpress

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-canvas-simple?WT.mc_id=BA-MVP-5003806

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

COVID19 Volunteer - Self4Society (mygov.in)