Page Branding
Customize the appearance of Wristband's hosted authentication pages to match your application's brand.
Overview
By default, Wristband's hosted authentication pages use standard styling. Page branding allows you to customize logos, colors, backgrounds, form elements, and other visual components to provide a consistent experience throughout your authentication workflows.
Branding is configured at the application level by default, with the option to override these settings for individual tenants. This allows you to maintain a consistent brand across your application while supporting tenant-specific customization.
Configuring Page Branding
To configure page branding, navigate to Branding → Hosted Pages in the Application View of the Wristband Dashboard.
Figure 1: Customize hosted authentication pages in the Page Branding Editor and preview your changes in real time.
The Page Branding Editor provides a real-time preview of your hosted authentication pages as you make changes. You can switch between different pages using the Preview Screen dropdown to see how your branding settings appear across different authentication workflows.
The editor organizes branding settings into two categories:
- Common Configurations: Customize shared visual elements that appear across hosted authentication pages.
- Page-Specific Configurations: Customize side panels and content for individual login and signup pages.
Common Configurations
Common configurations control the appearance of shared components across Wristband's hosted authentication pages. These settings let you customize elements such as page backgrounds, logos, form panels, input fields, buttons, links, and other UI elements.
Common branding settings apply to hosted pages used in the following workflows:
- Signup
- Tenant Discovery
- Login
- MFA Challenge and Enrollment
- User Invite
- Change Email
- User Activation
- Email Verification
- Password Reset
The following example illustrates how common branding settings map to the different components of a hosted authentication page.
Figure 2: Common branding settings control shared page components, including backgrounds, logos, forms, and buttons.
Page-Specific Configurations
In addition to common branding settings, Wristband allows you to customize the side panels displayed alongside hosted login and signup forms. Side panels provide additional space for branded content, such as marketing messages, product information, or promotional imagery.
Side panels can be configured independently for four hosted page types:
- Application-Level Login
- Application-Level Signup
- Tenant-Level Login
- Tenant-Level Signup
For each page, you can customize the side panel's layout and content. You can display a background image or embed custom content from an external URL using an iframe.
Figure 3: Configure side panel layouts and content independently for application-level and tenant-level login and signup pages.
Embedding Custom Content
Using an iframe allows you to display dynamic content hosted by your application or another service. This provides additional flexibility for creating customized authentication experiences.
For security, Wristband sandboxes embedded iframe content and applies Content Security Policy (CSP) restrictions.
The following example shows how side panel content appears on a hosted signup page.
Figure 4: An application-level signup page displays custom side panel content alongside the signup form.
Configuring a Tenant Override
To configure tenant-specific page branding:
- From the Application View, select the tenant you want to customize using the tenant dropdown in the side navigation menu.
Figure 5: Select a tenant from the side navigation dropdown to configure tenant-specific branding.
- Navigate to Branding → Hosted Pages.
- Select the Edit Tenant Config tab.
- Customize the tenant's branding settings and save your changes.
- Enable the tenant override toggle.
Figure 6: Enable the override toggle to apply your tenant-specific branding changes.
Updated 1 day ago