SMeet Mini Apps

Interface

The page fills the window under the SMeet bar. SMeet draws the bar, the menu and every trusted screen; the page draws everything else, in SMeet's colors and language if it wants to look at home.

The window#

• In the web app on a screen at least 768 pixels wide the window stands in the middle, 420 by 760 pixels (at most 92% of the screen), and Expand makes it up to 1100 by 900. On a narrower screen it takes the whole screen.
• In SMeet for iOS the window takes the whole screen on an iPhone; on an iPad and a Mac it is a card in the middle, which Expand enlarges.
• SMeet's bar above the page shows Back while the page holds a back handler, the title, the domain of the page, the menu and Close. Do not draw a second close button or a fake address bar.
• Everything SMeet shows on its own (the consent, the confirmation of a result, an external link, a report, the menu, the error screens) is drawn over the page by SMeet. While it is up, the page cannot be clicked or focused.

Size and the keyboard#

environment.viewport is the visible area of the app: under the SMeet bar and above the on-screen keyboard. environment.safeArea gives the cut-outs of the device that cross it. Both change with onViewportChanged: when the keyboard opens and closes, the device turns, the window is resized on a Mac, expanded or collapsed.

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

function applyViewport({ viewport, safeArea }) {
  const root = document.documentElement.style;
  root.setProperty("--app-height", `${viewport.height}px`);
  root.setProperty("--safe-bottom", `${safeArea.bottom}px`);
}
applyViewport(app.environment);
app.onViewportChanged(applyViewport);

• Lay the page out by the viewport, not by 100vh: on phones 100vh includes what the keyboard covers.
• Keep the field in focus and its button above the keyboard; scroll the focused field into view after onViewportChanged.
• Leave safeArea.bottom free at the bottom of a full-screen layout.

Theme#

environment.colorScheme is light or dark, and environment.theme gives SMeet's colors as CSS values: bg, text, hint, link, button, buttonText, secondaryBg. They change with onThemeChanged.

function applyTheme({ colorScheme, theme }) {
  const root = document.documentElement;
  root.style.colorScheme = colorScheme;
  for (const [name, value] of Object.entries(theme)) root.style.setProperty(`--smeet-${name}`, value);
}
applyTheme(app.environment);
app.onThemeChanged(applyTheme);

Take the colors as a whole, and check the contrast of your own colors against bg in both schemes.

Language#

environment.language is ru or en, the language of the person's SMeet. Show the page in it. In the web app a change of language comes with onLanguageChanged; on iOS and macOS it closes the window, and the next launch has the new language. Your server gets the same value as user.language_code.

Back and closing#

• app.setBackHandler(handler) makes SMeet's Back call your handler instead of acting itself; use it for the steps of a form. app.setBackHandler(null) gives Back back to SMeet when the page is at its first step.
• app.setClosingConfirmation(true) while the form has unsaved changes: SMeet asks once before it closes the window, and a second press closes it. Turn it off once the changes are saved.
• app.close() closes the window, for example after a result was sent.

Keep the draft anyway: the window can close without asking, when the person signs out or loses access.

No browser dialogs#

alert(), confirm(), prompt() and print() do not work in the window. In the web app the frame does not allow modal dialogs; on iOS and macOS alert() returns at once, confirm() gives false and prompt() gives null. A dialog in the window could look like SMeet's own and ask for a password, so SMeet never shows one. Draw your own confirmations and messages in the page.

Links and new windows#

• The page cannot open a new window or a tab (window.open, target="_blank") and cannot navigate the SMeet tab. Open an external address with app.openExternalLink(url): SMeet shows the address, and after Open the browser opens it, outside SMeet and without the person's SMeet session.
• openExternalLink takes an absolute https address with a host, without a user name or password, up to 2048 characters, not on SMeet's own host. Anything else fails with INVALID_PARAMS and no dialog. In the web app, after three presses of Cancel in a row in one launch, the next calls fail with RATE_LIMITED and no dialog until the person opens the app again.
• Links between the pages of your own origin work as on any site. Every page loads the SDK and connects again (Loading). A link to another origin leaves your domain: in the web app SMeet covers the window and says "The page left <domain> or is not responding"; on iOS and macOS the link is not followed, and SMeet offers to open it in the browser, as with openExternalLink.
• A Mini App does not link to purchases of digital goods (Rules for authors).

What the frame does not allow#

In the web app the frame has the camera, the microphone, the location, screen capture, full screen, reading the clipboard, payments, USB, Bluetooth and the motion sensors off; writing to the clipboard works. On iOS and macOS SMeet refuses the camera, the microphone and the motion sensors. The person can choose a file with a standard <input type="file">; the system picker may offer to take a photo, and the page gets only the resulting file. Downloads from inside the window do not work in the web app (Files).

Accessibility#

SMeet's window is a dialog with its own title; when it opens, the focus moves into it, and keys pressed inside the page belong to the page. The rest is yours:

• headings, labels for every field, buttons that are <button>, a visible focus;
• messages about the state of the page in a region with role="status" or aria-live;
• text that grows with the person's font size, and no information carried by color alone;
• keyboard use from the first field to Send without a mouse; Escape inside the page is the page's.

Visibility#

During a call SMeet hides the window without closing it and sends onVisibilityChanged with visible: false; when the call ends, visible: true. Pause sound, video and timers that would surprise the person while the window is hidden. The form and the session stay; a session that ended meanwhile is renewed by a new sign-in.