MediaQuery used in Web Messenger component

Hi community,
we are integrating the Genesy Web Messenger into the customer's web portal. The portal's developers are asking us what "mediaQueries" are used in the in the Web Messenger widget component appearance, in order to align the window with the custom launcher they have prepared.
Genesys support referred me here for some more information from the product team.
Any help?

Thank you!

Marco

I would also add: what is the criterion for Web Messaging to be in full screen on mobile devices?
Because we have experienced some strange behaviour:
On tablets/iPads in portrait mode, the Messenger does not go into full screen mode, remaining on one side of the screen. Whereas on the same device, but in landscape mode, the Web Messenger goes into fullscreen mode, unnecessarily taking up the whole screen.
Any help or ideas?

Thank you

Regards,
Marco


Hello Marco, glad to see you are actively testing our new Web Messenger.
It sounds like you're trying to build your custom launcher UI. Just note that the actual Messenger UI will remain decoupled from your custom launcher (there is no attempt to detect where your custom launcher appears on screen). If you want to customize the position on screen for Messenger, you would still need configure that within Messenger Configuration, there's a specific section that covers positioning on desktop browsers.


Hope it helps!

Hi Angelo,
yes, a custom launcher has been developed on the portal's customer.
But my question is precisely to understand what the default behaviour of Genesys Web Messenger is on mobile devices.
Basically we have experienced that on smartphones, the messenger goes in fullscreen.
We expected the same behaviour on tablets/ipads, but instead we noticed the behaviour mentioned in the previous post. So the question is what kind of media queries are set 'inside' the Web Messenger component by default?
Thank you

Marco

Hi, Marco, I can answer this.

In the portrait mode on tablets, there is enough height for Messenger to render properly in normal mode, so thats why you don't see it full screen.

But when the device is in landscape mode and its max-device-width being up to 1440px, it will appear in full screen. This is because, in the landscape mode the height will less than what it will usually be in portrait mode and so Messenger cannot render properly in normal mode, instead it will render full screen (on ipads/tablets) ensuring user is able to access all the controls in Messenger.

Here is the media query we use:

@media screen and (max-device-width: 600px), screen and (max-device-width: 768px) and (orientation: landscape), screen and (max-device-width: 823px) and (orientation: landscape), screen and (max-device-width: 1440px) and (orientation: landscape) { ... }

Hi Ranjith,
thank you very much for the feedbck.
I reported the information to the customer. I hope it is sufficient to describe the behaviour of the Messenger, for their business needs.
Thank you

Regards,
Marco