I’m building a fullscreen widget (using requestDisplayMode({ mode: ‘fullscreen’ })) and need to handle bottom clearance differently depending on the hosting context:
Native mobile app (iOS/Android): The WebView sits above the native chat bar. No extra bottom padding needed — the widget fills exactly the space it’s allocated. Only env(safe-area-inset-bottom) is required.
Mobile web browser (chatgpt.com in Chrome/Safari): The widget iframe receives the full viewport height, but the chatgpt.com DOM input composer (~102px) visually overlays the bottom of the widget. Without extra bottom padding, sticky footers and CTAs end up hidden behind the composer.
The problem: I cannot find any SDK signal to distinguish these two cases. Both contexts:
-
Set window.openai.userAgent.device.type === ‘mobile’ via the openai:set_globals event
-
Have identical navigator.userAgent strings (both are Chrome on Android)
-
Do not include the Android WebView
wvUA marker (modern Chrome-based WebViews omit it)
The widget cannot inspect the parent frame DOM to detect the composer element.
Questions:
-
Is there an existing window.openai property or
set_globalspayload field that identifies native app vs web browser context? -
Is window.openai.displayMode or any other property reliable for this distinction?
-
If not, would OpenAI consider adding a window.openai.hostContext or similar field (e.g.
'native-app' | 'web') to the SDK? This would unlock proper layout handling for fullscreen widgets on mobile.
Current workaround attempted:
-
UA heuristics (
/\bwv\b/, /Version\/\d/ on Android) — fails for modern Chrome-based WebViews -
device.type === ‘mobile’ from
set_globals— same value in both contexts, can’t distinguish
Any guidance appreciated!