Builder Settings Panel

The Builder Settings panel is accessed from within the Application Builder — typically via the gear icon or the Settings option in the builder's top bar. It is distinct from the Settings tab on the app's management screen in the Applications Manager, which governs access control and governance.

Note: Builder Settings vs the Settings tab: Builder Settings (inside the builder) controls the app's identity, design, code, and integrations. The Settings tab in the Applications Manager controls who can access the app and other governance policies. They are separate panels.

The panel is searchable — type in the search field at the top to jump directly to any setting by name. Settings are organised into the following top-level sections:

General

The General section covers the app's core identity and visual brand assets.

Identity

Brand Assets

Brand assets are visual identifiers displayed in the app's navigation header, browser tab, and (for mobile) on device home screens and loading screens.

• Logo — Full-width wordmark or logotype shown in the app's primary navigation bar. Use an image with a transparent background. Recommended format: SVG or PNG.

• Symbol — Icon-only version of the brand mark, used in compact navigation states (collapsed sidebar) or as a standalone icon. Square format recommended.

• Fav Icon — The icon displayed in the browser tab and bookmarks bar. Recommended size: 32×32 px or 64×64 px PNG, or an ICO file. Displayed small, so avoid complex detail.

Mobile apps have richer branding options including Android and iOS-specific assets (launcher icons, adaptive icon layers, notification icon) configured in the Mobile section.

Splash Screen (Mobile)

The splash screen is the loading screen displayed while a mobile app initialises. You can configure:

• Light logo — Logo to display when the system is in light mode.

• Dark logo — Logo to display when the system is in dark mode.

• Background colour — The solid background fill behind the logo.

• Image fit — How the logo image is scaled within the splash screen bounds (contain, cover, fill, etc.).

Design System

The Design System section controls the visual language applied across all components in the app.

• Theme — Pick a base theme. Themes define a complete set of colour tokens, typography scales, and border-radius presets. The same theme picker available at app creation is accessible here, with the same filter options (All / Light / Dark / Both / Recent / Presets).

• Colors — Override individual colour tokens from the selected theme — primary, secondary, surface, background, error, warning, success, and semantic variants.

• Typography — Set font family, weights, and size scale for headings, body text, labels, and captions.

• Border Styles — Configure default border radius and border width used by components such as cards, inputs, and buttons.

• Custom Icons — Upload SVG icon sets to make them available in the icon picker throughout the builder. Custom icons are scoped to the app.

Development

The Development section contains settings that control runtime behaviour, navigation, custom scripting, analytics instrumentation, and real-time features.

Navigation

Configure the app's navigation menu — the primary sidebar or top-bar menu that links to pages within the app.

• Content — Add, remove, reorder, and nest menu items. Each item links to a page, an external URL, or a custom action.

• Appearance — Choose the navigation style (sidebar, top bar, or bottom bar for mobile), set icon display options, and control header/footer slots.

Launcher (Copilot Apps)

For Copilot app types, the Launcher subsection controls the floating chat button that appears on the host page where the Copilot is embedded.

• Text — Label displayed on or beside the launcher button.

• Icon — The icon or avatar shown on the launcher button.

• Position — Where on the host page the launcher appears (bottom-right, bottom-left, etc.).

• Events — Actions triggered when the launcher is opened, closed, or first rendered.

Custom Code

Inject arbitrary HTML or JavaScript into the app's document.

• Header code — Injected into the <head> of the rendered page. Use for third-party analytics scripts, meta tags, font preloads, or CSS custom properties.

• Footer code — Injected just before the closing </body> tag. Use for deferred scripts, chat widgets, or initialisation code that must run after the DOM is ready.

Custom code is applied as HTML attributes on the web container. On mobile apps, custom code support may be limited to the web-view layer — verify compatibility with your target mobile platform.

App Variants (Mobile)

For mobile apps, you can define named variants of the app — for example, a Primary consumer-facing variant and a Secondary internal-tools variant built from the same application record but distributed separately. Variants can have different build configurations, icons, and splash screens.

Analytics

• Enable usage analytics — Toggle to start collecting page view, component interaction, and session data. Required for the Insights tab to appear in the Applications Manager.

• Custom events — Define named custom events that your page actions can fire. Custom events appear in the Insights dashboard alongside automatically collected events, allowing you to track app-specific interactions (e.g., "Form Submitted", "Report Exported").

Realtime Events

Enable real-time data synchronisation across all active sessions of the app using named topics. When one user's action triggers a topic event, all other users with the app open receive the update without needing to refresh.

• Define topic names and the payload shape for each topic.

• Wire topics to actions and component bindings in the builder.

Note: Realtime Events is not available for module app types.

File Management

• Initial file visibility — Set the default visibility applied to files uploaded through file-upload components. Options are typically Private (only the uploading user and administrators can access the file URL) or Public (the file URL is publicly accessible to anyone with the link).

Note: Setting the default visibility to Public means uploaded files are readable by anyone with the file URL — including people outside your organisation. Choose this setting carefully and only when the uploaded content is intentionally public.

Location Tracking

Enable the browser or device location API for this app. When enabled, page actions and components can request the user's current coordinates. Users are prompted for permission by the browser or OS before any location data is accessed.

Developer Panels (Dev Mode Only)

Two additional subsections appear only when the builder is in developer mode:

• Theme (Developer only) — Exposes low-level design token overrides not available in the standard Design System UI.

• Developer Options — Debug and diagnostic settings, including verbose logging and experimental feature flags.

Apps & Integrations

Connect the app to third-party services and embedded assistants. Each integration is toggled independently; enabling one does not affect others.

Yellow.ai Configuration

Yellow.ai is a conversational AI platform. Enabling it embeds a Yellow.ai bot as a chat interface inside your mobile app. The bot persists across pages and can be passed contextual data about the signed-in user.

Configuration Fields

Note: After enabling Yellow.ai, a Control Yellow.ai action becomes available in the app's Action palette. Use it on pages to programmatically open, close, or toggle the chat window.

Note: Yellow.ai configuration changes ship with your next publish — you do not need to submit a new mobile build to the App Store or Google Play for bot configuration changes to take effect.

Steps: Configure Yellow.ai on a Mobile App

1. Open the app in the Application Builder.

2. Open Builder Settings (gear icon in the top bar).

3. Navigate to Apps & Integrations.

4. Locate the Yellow.ai card and toggle Enable Yellow.ai to on.

5. In the Bot ID field, paste the bot identifier from your Yellow.ai dashboard. The field masks the value after you move focus away — this is expected.

6. Optional — Enter a Bot name to override the display title in the chat header.

7. Optional — Enter a publicly accessible image URL in Bot icon to customise the chat launcher avatar.

8. Optional — In User context, click Add to create key–value pairs. Use the data pill picker on the value field to bind dynamic user attributes from the session.

9. Click Save (or the equivalent save control in the Settings panel).

10. Publish the app. The Yellow.ai bot is now active in the published mobile app. No new store build is required.

Frequently Asked Questions

How do I configure a Content Security Policy (CSP) for my app?

Frame-ancestors directives — which control which parent sites can embed your app in an iframe — are configured in the app's Settings tab under Security → Frame-ancestors. Broader CSP headers are managed at the environment level by your platform administrator rather than in Builder Settings. If you need to adjust CSP headers beyond frame-ancestors, contact your UnifyApps administrator or refer to the Runtime and Access documentation.

Can I use a custom domain for my published app?

Custom domain support is a platform or workspace-level configuration, not a per-app Builder Settings option. The App URL field in Builder Settings → General lets you update the path slug within the workspace domain, but mapping a fully custom external domain (for example, app.yourcompany.com) requires environment-level DNS and SSL configuration. Contact your workspace administrator or the UnifyApps support team to set up a custom domain.

How do I white-label or brand my app with my company's logo and colors?

Branding is configured in Builder Settings under two sections: General (for the logo, symbol, and favicon that appear in the navigation bar and browser tab) and Design System (for the color palette, typography, and border styles applied across all components). Upload your logo and symbol files in General → Brand Assets, then use Design System → Colors to override the theme's color tokens to match your brand palette.

Does UnifyApps Applications support environment variables or secrets?

App-level configuration values that need to differ between environments are typically managed through the integration configuration and data source settings rather than a dedicated environment variables panel. Sensitive credentials (such as API keys for Razorpay or Pusher) are entered in the relevant Apps and Integrations section of Builder Settings and are masked after saving. For advanced secrets management, contact your workspace administrator.

Can I inject custom JavaScript or third-party scripts into my app?

Yes. The Custom Code subsection in Builder Settings → Development lets you inject arbitrary HTML or JavaScript into either the document head (for analytics scripts, font preloads, or meta tags) or just before the closing body tag (for deferred scripts or chat widget initializations). Code injected here is applied globally across all pages of the published app. On mobile apps, custom code support is limited to the web-view layer — verify compatibility with your target mobile platform before use.