Recent searches
No recent searches
Issues with Fullscreen-Webwidget on iOS mobile
Answered
Posted Mar 23, 2022
Unfortunately, the WebWidget SDK is automatically fullscreen on any mobile device, which means that on iPhone X and later devices (with the top nodge) the minimize Button cannot be clicked anymore and the title is covered entirely by the device's nodge.
I have tried offset, but that just displaces the whole thing vertically which means the send button at the bottom can no longer be clicked.
Please tell me what I can do, so it is no longer full screen or can have some padding/margin etc. so that it only takes up 80% of the viewport height or something.
Best regards,
Max Weidemann
millionways
window.zESettings = {
webWidget: {
position: { horizontal:"left", vertical:"top" },
offset: {
mobile: {
horizontal:"0px",
vertical:"100px",
},
},
contactForm: {
title: {
de:"Beschwerde einreichen",
"en-US":"File a complaint",
},
},
},
}
0
6
6 comments
Max Weidemann
0
Greg Katechis
Hi Max! Could you explain how you're implementing the widget? Within a browser like Safari, the address bar takes up the top portion of the page and even if you move it to the bottom, I'm not able to reproduce this issue. Apologies if I'm missing something obvious here!
0
Max Weidemann
Hi, I cannot post any screenshots here unfortunately, because I can't add images here for some reason.
So the platform is basically Cordova and it runs on my iOS Simulator. The implementation is via the window.zESettings object you see in my previous post and then calling
window.zE("webWidget", "open")upon the user pressing a button. After that the widget is automatically opened in fullscreen on the iOS device and can no longer be minimized resulting in a forced app close if users want to re-interact with the app.
1
Glauber Almeida
Any updates on this matter?
0
Gabriel Manlapig
Are you using our iOS SDK? https://developer.zendesk.com/documentation/classic-web-widget-sdks/support-sdk/ios/nutshell/ or are you using different method to implement Zendesk web widget to your mobile iOS app? Any additional information is helpful!
0
Glauber Almeida
Hi Gabriel,
Our app is built with Capacitor (https://capacitorjs.com/) and Angular framework. We use the https://www.npmjs.com/package/ng-zendesk-webwidget module to open the chat in angular.
0