Routing & events

Keep the admin URL in sync, navigate the host, and subscribe to host events.

bridge.navigate(path)#

Navigate the merchant to a path in the Tringify admin, e.g. bridge.navigate("/products"). The path must be relative; the host rejects absolute URLs. Use this to send the merchant to a native admin page (not to route inside your own app — see routing below).

bridge.routing.setPath(path)#

Keeps the admin (parent) URL in step with where the merchant is inside your app, so reload, the browser back button, and copied links all land back on the same in-app screen. Call it whenever your own route changes (e.g. in your router's afterEach). path must be app-relative and begin with / (throws otherwise); the host reflects it as a query on the admin URL without reloading your iframe.

app.js javascript

// Tell the host where you navigated.
myRouter.afterEach((to) => bridge.routing.setPath(to.fullPath));

// React to deep links / back button.
bridge.on("routing:navigate", (e) => myRouter.replace(e.path));

bridge.on(name, handler)#

Subscribe to a host-emitted event. Returns an unsubscribe function. The handler receives the event payload. The events the host emits:

Event	Payload	Emitted when
ready	the launch context	the host acknowledges the frame (also resolves `ready()`).
theme:change	`{ theme }`	the merchant switches light/dark in the admin.
routing:navigate	`{ path }`	a deep link or the back/forward button changes the in-app path.
titlebar:action	`{ id }`	a title-bar action is clicked.
nav:navigate	`{ id }`	a nav item is clicked.
banner:action	`{ id }`	the banner action is clicked.
banner:dismiss	—	the banner is dismissed.
savebar:save	—	the save-bar Save is clicked.
savebar:discard	—	the save-bar Discard is clicked.

javascript

const off = bridge.on("theme:change", (e) => applyTheme(e.theme));
// later: off();