UI Customization and Branding in Cloudentity

Cloudentity enables you to configure the look and feel of the Cloudentity user portal and the Cloudentity developer portal. As an Cloudentity administrator, you get a dedicated view where you can set up specific graphical items and see the instant demo of the input you provide as the UI settings.

Additionally, Cloudentity enables developers to dive directly into the code and modify the web templates for all user-facing pages, for example for user login and registration.

Basic Customization

Brand Appearance Page

The Brand appearance page found under Tenant Settings consists of the central Preview area and the right Settings pane.

In Settings, you can configure the following:

• Primary color
• Header color
• Company logo
• Font type.

In Preview, you can check how the settings that you’ve just defined look like from the user perspective. Preview shows sample pages with your settings applied. You can switch between three displays available in Preview: Consent, User portal, and Developer portal.

Note

You can always return to the default UI configuration by selecting the Reset to default button.

Configure UI for the Users

To learn how to configure the look and feel of the Cloudentity user and developer portals, either see the video demonstrating this process or check the instruction including step-by-step configuration guidelines.

Video

Instruction

1. In your workspace, go to Tenant Settings.

   Result

   The tenant configuration menu opens.

2. From the tenant configuration menu, navigate to Brand appearance and configure available GUI features as needed. You can

   • Select Primary color and Header color
   • Provide the logo to be displayed in GUI by entering Company logo URL
   • Select Logo size by picking one of the available options (Small, Medium, Large)
   • Define the font type by entering Font URL
   • Get back to the default settings with the Reset to default button.

   Check Preview

   While applying your custom settings, check the Preview area to see how your modifications are rendered in the mock Cloudentity GUI. Preview shows three Cloudentity GUIs: Consent, User portal, and Developer portal. Switch between them with the Preview navigation in the top right corner (< and >).

3. Select Save to apply your new GUI configuration.

Advanced Configuration with Themes

Enable advanced branding

At the moment, workspace branding must be explicitly enabled in your tenant by Cloudentity administrators.

Advanced configuration capabilities allow you to implement your own branding themes. You can achieve the following advantages:

• Completely style the page branding so that it matches the rest of your website that Cloudentity provides identity capabilities for.

• Include the correct privacy statements for all customers.

• Apply individual styling for all customers and de-couple it from Cloudentity’s own branding.

Themes consumed by Cloudentity are Golang-based HTML templates, so you’re going to need an understanding of this technology in order to modify them. The Cloudentity theme is a system theme and cannot be changed. When ready, themes are bound to individual workspaces.

Create a Template

1. Go to Tenant Settings > Appearance.

2. Select Create Theme. Give your new theme a name.

3. Modify the templates responsible for specific pages. See the preview page to check if your changes bring the expected result.

   

   Template group	Description
   Pages	Templates grouped by their UI location as seen by the end user.
   Components	Shared templates used only as part of the Pages templates (direct preview is impossible for that reason). If you want to preview changes made in Components, check the affected template under Pages.

4. Save. If you cannot save, check the Console for errors.

5. Go to Tenant Settings > Workspaces > Workspace Settings > Bind theme and bind your newly prepared theme to a workspace. Your changes are now applied for the users.