Skip to main content

UI Layouts

A UI Layout is a screen that Centro renders for a user — the set of buttons, groups and information a guest or staff member sees in a webapp, on a dashboard or on a connected panel. Layouts are built in the layout editor and linked to the places they should appear.

You manage layouts under Settings → Objects → UI Layouts.

Layout types​

Every layout has a type that determines where it is used:

  • User Layout — the interface a guest or user sees in a Centro webapp.
  • Dashboard — a dashboard view, typically for staff or a wall display.
  • 2N Layout — the screen pushed to 2N intercom hardware.

Building a layout​

Open a layout to edit it, or select Add to create one. A layout is made up of:

  • Items — the buttons, groups and info boxes that fill the screen. Add, reorder and nest items in the editor.
  • Appearance — the logo (brand logo or a custom image), header and background colours, header title and subtitle, and the fonts used across the layout.
  • Conditions — rules that show or hide items depending on context, so one layout can serve different users or situations.

Text in a layout can include Centro Property tokens written in curly braces, such as {welcome_message}. When the layout is rendered, each token is replaced with the property's value for the current user and location — this is how a single layout is translated into multiple languages and tailored per location. See Centro Properties.

Linking a layout​

A layout only appears once it is linked to something. Layouts can be linked to:

  • Locations — anyone viewing that location sees the linked layout.
  • QR codes — scanning the code opens the layout.
  • Connectors — a panel connector displays its linked layout.
  • Stay types — welcome and post-authentication screens for a guest stay.

Mark a layout as the default to have it used wherever no more specific layout is linked.

Duplicating and generating layouts​

  • Duplicate — copy an existing layout as the starting point for a new one, rather than building from scratch.
  • Generate with AI — create a first-draft layout from your brand and a short prompt, then refine it in the editor.

How changes reach users​

Saving a layout pushes the update live: connected webapps and panels refresh in place, so users see the new version without reopening the app. Centro can also render a layout to an image — used, for example, to push a screen to physical 2N intercom hardware — substituting Centro Property tokens for the target location as it renders.