Using the App builder

App Builder: Customizing Your Client App

The App Builder is your studio's control center for designing and managing the client-facing app experience. Everything your members see when they open the app, the pages available to them, the colors, branding, and layout, is configured here.

To access the App Builder: Go to your Recess dashboard and navigate to Tools > App Builder.

The App Builder Layout

The App Builder is split into two main areas. The left panel is where you configure all settings, and the right panel shows a live preview of what your clients will see on their phones. You can click through the preview just like a client would to see exactly how the app looks before saving any changes.

When you're done editing, always click the yellow Save button in the top right to apply your changes.

Copy App Link: Generates a shareable link to your client app. Use this to send to new members or post on your website and social media.

App Settings: Controls your app's identity and access behavior (see full breakdown below).

Users: Manage who has access to the app and configure login and sign-up behavior (see below).

Global Style: Controls your app's overall visual branding (see below).

Navigation Bar: Customizes the look and behavior of the bottom navigation bar your clients use to move through the app (see below).

Below these options you'll find individual editors for each page tab in your app: Home, Schedule, Recordings, Collection, Packs, Appointments, Events, Retail, Messages, Profile, and Testing. Grayed-out tabs are available but not currently active in your app. Click any page name to customize its content and settings.

App Settings

App Settings is where you define your app's core identity — what it's called and how it appears on a client's home screen.

App Icon — Upload the image that will appear as your app icon on clients' phones. This is the first visual impression members get, so use your studio's logo or branded image. Click Replace to swap it out or the trash icon to remove it.
Full Name — The full name of your app as it appears in the browser and when clients install it (e.g., "Recess Staging App").
Short Name — An abbreviated version of your app name displayed under the icon on a client's home screen (e.g., "RSA"). Keep this short — ideally 3–5 characters.
Description — An optional description of your app. This can be used to give context about your studio.

Users

This section controls how clients access your app and what they see when they first open it.

Require Login before accessing any app content — When toggled on, clients must log in before they can view any content in the app. This is useful if your content is exclusively for paying members.
Show Login & Sign Up form at Launch — When toggled on, the login and sign-up screen appears immediately when the app opens.

Note: Recess flags that enabling these options may reduce the conversion rate to your content. If you want prospective clients to browse your schedule or offerings before signing up, consider leaving these off.

Global Style

Global Style controls your app's overall visual branding — the colors and imagery that define how the app looks and feels.

Logo — Upload your studio's logo. This appears within the app interface. Click Replace to update it or the trash icon to remove it.
Background Color — Sets the background color of the app's splash screen.
Primary Color — Your main brand color, used throughout the app for buttons, highlights, and accents.
Splash Screen — The image that briefly appears when the app first loads. This is your studio's first impression every time a client opens the app — make it count. Click Replace to upload a custom splash screen image.

The Navigation Bar section lets you control exactly how the bottom navigation bar looks and behaves for your clients.

Nav Bar Style — Choose between Sticky (the nav bar stays fixed at the bottom of the screen at all times) or Floating (the nav bar floats above the content).
Background Color — Sets the color of the navigation bar itself.
Label — Toggle on to display a text label under each icon in the nav bar. Toggle off to show icons only.
Selected Indicator Style — Controls how the active/selected tab is highlighted. Choose from:
- Chip — A pill-shaped highlight around the selected icon
- Font — The selected icon's label changes style
- Underlay — A background highlight beneath the selected icon
Selected Indicator Color — Sets the color of the active tab indicator (e.g., yellow to contrast against a purple nav bar).
Tab Order — Drag and reorder the tabs to control what appears in the main nav bar. Only the first 5 tabs will show in the primary navigation. Any tabs beyond the first 5 will be grouped under the Menu sublist, accessible via the hamburger menu icon.