Client Portal Branding and Style Settings

Learn how to configure your Client Portal branding and appearance settings in TDAdmin.

You can control the Client Portal branding and appearance settings separately for each Client Portal app you have created in your TeamDynamix system. Customization options include personalized headers, footers, site logos, favicons, and comprehensive style settings.

Please note that any changes to the portal header and footer may take up to 15 minutes to take effect.

In this article, we cover how to configure application-level Client Portal settings:

• Customize the Portal Header and Footer
• Customize the Client Portal Color Scheme
• Add a Unique Portal Logo and Link
• Customize the Favicon
• Organize the Top Navigation

Customize the Portal HTML Header and Footer

The HTML Header and Footer sections allow administrators to show customized content at the top and bottom of pages when users visit their domain-specific Client Portal. HTML entered in the header field will be displayed at the top of every page, displayed in a <code>header</code> tag, and all HTML entered in the footer field will be displayed at the bottom of Client Portal pages in a <code>footer</code> tag. All HTML will be 'sanitized' by the system to prevent any code vulnerabilities before it is published.

To add custom HTML headers and footers to a Client Portal:

1. Open the Client Portal settings:
   • Technicians: In the Client Portal, click your name in the top right, select Admin 
   • Global Admins: In TDAdmin, click Applications > Client Portal name 
2. Click Settings in the left navigation.
3. Scroll down to the Client HTML Header or Client HTML Footer section.
4. To modify the Client HTML Header and enter the content as HTML into the field.
5. To modify the Client HTML Footer, uncheck the User Default Client Footer box, then enter the needed content in HTML in the field.
6. Click the Save button.

Learn more about HTML sanitization.

Customize the Client Portal Color Scheme

You can ensure that your organization's brand is reflected in your Client Portal. A variety of page components are supported, each of which can be clicked to display a color wheel for easy selection. A preview window on the right side of the page displays all the currently selected settings.

To customize the Portal styles:

1. Open the Client Portal settings:
   • Technicians: In the Client Portal, click your name in the top right, select Admin 
   • Global Admins: In TDAdmin, click Applications > Client Portal name 
2. Click Styles in the left navigation.
3. Modify the colors to match your organization's branding for each section of the page. Use hexadecimal codes for colors, or utilize the color picker by clicking on a color field.
4. Click Preview to apply the changes in the right-side Preview.
5. To implement the changes on the Client Portal, click the Save and then Enable buttons.

For complete details on the available styles, review the  Client Portal Styles article.

Add a Unique Portal Logo and Link

By default, each Client Portal application will inherit the organization's logo and link; however, a unique logo and link can be applied for each Portal application.

The logo image dimensions should have a maximum width of 580 pixels and a maximum height of 80 pixels.

To customize the logo and link:

1. Open the Client Portal settings:
   • Technicians: In the Client Portal, click your name in the top right, select Admin 
   • Global Admins: In TDAdmin, click Applications > Client Portal name 
2. Click Styles in the left navigation.
3. Scroll down to the Custom Logo section.
4. Under Upload Logo, click Browse. Then locate the desired image file and click Open.
5. To change the webpage the logo points to, enter a value starting with http:// or https://in the Logo URL field.
6. Enter Logo Alt Text to override the default "Client Portal Home Page" text.
7. Click Save.

Customize the Favicon

When enabled, this icon will display to the left of the page title in the web browser tab. It is also saved in a user's bookmarks to help quickly identify the link if they save the page in their browser.

There are third-party tools that can be used to help generate the icon in an ICO file format, which is the required file extension for icon uploads. 

To customize the favicon:

1. Open the Client Portal settings:
   • Technicians: In the Client Portal, click your name in the top right, select Admin 
   • Global Admins: In TDAdmin, click Applications > Client Portal name 
2. Click Styles in the left navigation.
3. Scroll down to the Browser Favicon section and click Browse.
4. Locate the desired image file and click Open
   • The favicon must be a 16x16 pixel image in the .ico format.
5. Click Save.

Organize the Top Navigation

You can customize the order in which your custom pages appear in the top navigation. The page buttons will always appear to the left of the portal application buttons.

1. Open the Client Portal settings:
   1. Client Portal Admins: In the Client Portal, click your name in the top right > Admin 
   2. Global Admins: In TDAdmin, click Applications > [Client Portal Application] 
2. Click Modules & Pages and select Pages
3. In the Move column, use the up or down arrows to rearrange the pages. The Order indicates which place from the left the page will appear
4. The changes are saved automatically and can be viewed on your portal when you refresh.