UI primitives

Host-rendered chrome: toasts, loading, banners, the save bar, title bar, nav, fullscreen.

These primitives are rendered by Tringify Storeadmin in its own chrome, outside your iframe — so they look native and cannot be spoofed. Your app sends a payload; the host renders it verbatim. Every mutating call validates its input in the SDK and throws on a missing or empty required field, so there are no blank buttons or unidentifiable actions. Button clicks and dismissals come back as events; subscribe with bridge.on(name, handler).

bridge.toast(message, variant?)#

A transient host toast. variant is "default" (the default), "success", or "error".

javascript

bridge.toast("Saved", "success");

bridge.loading.start() / .stop()#

A thin indeterminate progress bar at the top of your embedded view. Idempotent — call start() when work begins and stop() when it ends.

bridge.banner.show(options) / .hide()#

A persistent, tone-coloured notice drawn below the header, above your iframe. Unlike a toast it stays until you hide it or the merchant dismisses it.

Field	Required	Default	Meaning
message	yes	—	The banner text. Throws if missing or empty.
tone	no	`info`	`info` \| `success` \| `warning` \| `critical`.
title	no	—	An optional heading above the message.
dismissible	no	`true`	Shows the dismiss (X).
action	no	—	Optional `{ id, content }` button — both required if given, else throws.

The action button emits banner:action; the dismiss emits banner:dismiss (and the host clears the banner).

javascript

bridge.banner.show({
  message: "Finish setup to start receiving orders.",
  tone: "warning",
  action: { id: "setup", content: "Open setup" },
});
bridge.on("banner:action", (e) => { if (e.id === "setup") openSetup(); });

bridge.saveBar.show(options?) / .hide()#

The contextual unsaved-changes strip. Show it when a form goes dirty; call show() again to update it (e.g. { loading: true } while saving); hide() when clean. Every field is optional:

Field	Default	Meaning
message	`Unsaved changes`	The strip label.
saveLabel	`Save`	The save button label.
discardLabel	`Discard`	The discard button label.
saveDisabled	`false`	Disable the save button.
loading	`false`	Show a saving state on the save button.

Save emits savebar:save; discard emits savebar:discard.

bridge.titleBar.set(options) / .clear()#

Renders your page title and action buttons in the host header, above your iframe. title is required (throws if empty). primaryAction is optional { id, content, disabled? }; secondaryActions is an optional array of the same (max 3). An action with a missing id or content throws. Clicks emit titlebar:action with the action's id. clear() restores the default header.

javascript

bridge.titleBar.set({
  title: "Campaigns",
  primaryAction: { id: "new", content: "New campaign" },
});
bridge.on("titlebar:action", (e) => { if (e.id === "new") createCampaign(); });

bridge.nav.set(options) / .clear()#

Declares your app's sub-navigation to the host, rendered as a native nav row in the embedded header. items is a required non-empty array of { id, label, current? }; each id and label is required (throws otherwise). Clicking an item emits nav:navigate with its id — your app owns its own routing. clear() removes the nav.

javascript

bridge.nav.set({ items: [
  { id: "overview", label: "Overview", current: true },
  { id: "settings", label: "Settings" },
]});
bridge.on("nav:navigate", (e) => myRouter.push("/" + e.id));

bridge.fullscreen.enter() / .exit()#

Ask the host to expand your iframe to fill the viewport (hiding the surrounding admin chrome) for an immersive view, and exit back to the framed layout. The host always keeps its own visible exit affordance, so the merchant is never trapped.