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?

Categories:

General topics

I have the same question (0)

All responses (6)

Answers (1)

Sort by

CU22081450-0 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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)

Was this reply helpful? Yes No
sylwiastep 11 on at

Like (0)

Report
Copy link

Link copied!

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 😞

Was this reply helpful? Yes No
CU22081450-0 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

@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.

Was this reply helpful? Yes No
sylwiastep 11 on at

Like (0)

Report
Copy link

Link copied!

Currently it looks like this. https://surreycoalition.org.uk/chat-to-us/
And the window where messages appear is way too narrow 😞

Was this reply helpful? Yes No
Verified answer

CU22081450-0 Most Valuable Professional on at

Like (2)

Report
Copy link

Link copied!
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>

Was this reply helpful? Yes No
sylwiastep 11 on at

Like (1)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No