The Self Service > Branding page is the foundation of the self-service experience. All visual settings configured here — header layout, colours, logos, and contact details — are shared across every self-service page (Reset Password, Verify Email, Unsubscribe, and Delete Account). Configure Branding first before setting up any other self-service page, since the optional buttons on those pages rely on URLs entered here.
The screen is split into two panels: the settings panel on the left and a live preview on the right. Every change you make is reflected in the preview instantly — you do not need to save before seeing results. Use the mobile/desktop toggle at the top of the preview panel to check how the page will appear on different screen sizes.
Content Tab
The Content tab controls what appears in the header of every self-service page and how it is laid out.
Header Content Type — determines the header's visual structure. Choose one of three options:
Default Header — uses brainCloud's built-in header. No logo or custom text is shown. Use this if you do not need branded headers.
Custom Header – Logo & Text — upload a square logo image and enter a short text label (up to 25 characters, e.g. your company name) displayed beside it. The logo and text appear side-by-side in the header. Click the image placeholder to upload a file from your computer.
Custom Header – Logo Only — upload a wide (landscape) logo image that spans the full header width. No text is shown. Selecting this option automatically disables the 2 Colors background type because a two-tone gradient does not display well behind a full-width logo.
Header Background Type — controls the fill behind the header content:
2 Colors — a left-to-right gradient between Background 1 and Background 2 colours set in the Colors tab. Not available when Logo Only is selected.
1 Color — a flat solid background using the Background 1 colour.
Transparent — no background fill; the page background shows through the header area.
Header Spacing — controls how the header sits on the page:
Floating — the header is inset with a gap around it, creating a card-like appearance that floats above the page body.
Full Width — the header stretches edge-to-edge across the top of the page.
App Icon & Name — sets the app identity displayed in the body of the self-service pages (distinct from the header logo). Upload a square icon image and enter an app name (up to 25 characters). If no custom icon is uploaded, the app's default image from the portal is displayed at reduced opacity as a fallback. To remove a previously uploaded image, click the image and select the delete/clear option.
Colors Tab
The Colors tab gives you fine-grained control over every colour on the self-service pages using CSS variables. Changes here apply to all self-service pages simultaneously.
How to use color sets (recommended starting point):
Use the Apply Color Set dropdown to select a named preset. The preview updates live as you browse through the options without committing any change.
When you find a set you like, click
Apply Colorsto load its values into the individual colour pickers below. This does not save — you can still tweak individual values afterwards.Click
Saveto persist when you are happy with the result.
Individual colour controls — each colour picker accepts RGBA values. The following groups are available:
HTML / Body — Background colour of the outermost page shell.
Header — Background 1, Background 2 (gradient end), Icon colour, Text colour.
Page — Page background, Heading 1–4 text, Body text, Links, Footer text, Icons, Icons (success state), Icons (failure state), Dividers.
Buttons (Primary / Secondary / Destructive / Disabled) — each button group has Text, Border, and Background colour pickers. Enabling the Fill checkbox for a button group locks the border and background to the same colour, creating a solid filled button. Disabling Fill separates them so you can create outlined or ghost button styles.
Input Fields — Background, Border, Text, and Placeholder colours for normal, focused, and disabled states.
Optional Details Tab
The Optional Details tab stores the destination URLs and mailing address that appear in the shared boilerplate footer and power the optional navigation buttons on other self-service pages. These values must be filled in before the corresponding buttons can be enabled on any self-service page.
App Links — each field accepts a URL up to 2048 characters:
App Homepage — destination for the Homepage button shown on self-service pages. Use your game or app's main website URL.
Feedback Website — destination for the Feedback button. Link to a feedback form, survey tool, or community forum.
Exit Survey Website — destination for the Exit Survey button shown on deletion flow pages. Link to a survey designed to capture why the user is leaving.
Customer Service Email / Website — accepts either a
mailto:address (e.g.mailto:support@myapp.com) or a fullhttps://URL. Shown in the boilerplate footer as a support link.Terms & Conditions Website — linked in the boilerplate footer. Required for many app store compliance requirements.
Privacy Policy Website — linked in the boilerplate footer. Required for GDPR and similar regulations.
Contact Information — your business address, displayed in the boilerplate footer alongside the legal links. This is particularly important for email compliance laws (CAN-SPAM, CASL, etc.) that require a physical mailing address in commercial emails:
Address — street address, up to 255 characters.
City — up to 50 characters.
State / Province — up to 50 characters.
Country — up to 50 characters.
Zip / Postal Code — up to 10 characters.
Actions
Cancel— discards all unsaved changes and reverts every field to the last saved state. Uploaded images are saved immediately when selected and are not affected by Cancel.Save— persists all changes to the backend. The button is disabled until there are unsaved changes and all validation rules pass (e.g. text fields within character limits).Clear— available to super/developer users only. Wipes all branding data back to defaults and re-fetches fresh defaults. Use with caution in production apps.
If you attempt to navigate away from the page with unsaved changes, a confirmation dialog will ask you to confirm before discarding them.