Support embedding Messenger on mobile apps

We've shipped this on iOS with a WKWebView and it works well enough. The approach, in case it's useful:

There's no URL that renders the messenger, so instead of loading a page we host one. The app builds a blank HTML page and loads it with loadHTMLString(html, baseURL:) — the base URL matters, it gives the SDK a normal origin to make its requests from. That page loads sdk.js, boots, and opens the messenger:

Featurebase('boot', { appId, theme, language: 'en', hideDefaultLauncher: true });

// boot resolves async and `show` only warns if it lands too early,
// so poll for the messenger frame, then open it.
const timer = setInterval(() => {
  if (!registered && document.querySelector('.featurebase-messenger-frame')) {
    registered = true;
    Featurebase('onShow', () => { shown = true; post('shown'); });
    Featurebase('onHide', () => post('closed'));        // dismiss the native screen
    Featurebase('onExternalLinkOpen', u => post('link', u)); // open in Safari
  }
  if (registered && !shown) Featurebase('show', 'help');
  if (shown) clearInterval(timer);
}, 250);

post() is just window.webkit.messageHandlers.…postMessage, which gives the native side the hooks it needs — close the screen when the user closes the messenger, hand links to the system, show a spinner until onShow fires.

At phone width the messenger takes over the whole viewport and honestly looks native. Four things that cost us time, which an official version would handle for people:

- The panel is translucent, so whatever is behind it tints the entire widget. Our app theme is dark navy and it bled straight through. The host page needs a solid neutral background, and the web view has to be opaque in the same colour.

- The messenger CSS doesn't use env(safe-area-inset-*), so the web view has to stay inside the safe area — full-bleed puts the header and ✕ under the status bar and the tab bar under the home indicator.

- Main-frame navigations have to be cancelled, or a link replaces the page the widget is living on and takes the widget with it.

- Use the persistent data store so the anonymous id survives reopening the screen.

The fragile part is that we're keying on .featurebase-messenger-frame, an internal class name, to know when the messenger is ready — one refactor on your side and every integration doing this breaks silently. An official host page, or a thin iOS/Android SDK wrapping exactly this, would fix that and give you a ready-made mobile story.