Dynamic Logo in New Universal Login Widget

Help
,
1

Hi,

We have a need where-in we need to display different logo presented to the user on the login widget in the New Universal Login (On basis of a dynamic businesslogic)

Is there a way to achieve this?

The branding section provided only allows to upload a logo which always gets picked up and displayed on the login widget.

Is there a way around this where-in I can update the login template with a condition that checks the dynamic business logic and accordingly displays the relevant logo in Login Widget.

Thanks
Saurabh

3

Is there any update on this? We have a very important need of changing the login widget logo in certain conditions.
Is this achievable with New Universal Login?

4

Hi @Saurabh :wave:

Great question!

Yes, this can be achieved with the New Universal Login (NUL) by leveraging the Page Templates API to conditionally change the logo. To get acquainted with the concept of Page Templates, and how you can use them to customise the NUL, I recommend reading the following documentation.

More specifically for your query, by using the Page Templates API and CSS, you can specify that you want to render a custom logo by adding class="_use-custom-prompt-logo" to the <body> element. You could then use Liquid conditionals to change the logo depending on the application (or other business logic).

Here is a code example from the above documentation for how this would look:

<!DOCTYPE html>
<html lang="{{locale}}">

  <head>
    <title>Welcome to {{ application.name }} </title>
    {%- auth0:head -%}
    <style>
      {% if application.name == "Auth0 Community" %}
      #custom-prompt-logo {
      background-image: url('https://cdn.auth0.com/manhattan/versions/1.3312.0/assets/badge.png');
      }
      {% elsif application.name == "Auth0 Dashboard" %}
      #custom-prompt-logo {
      background-image: url('https://cdn.auth0.com/blog/auth0rta/theme/logos/auth0-logo-black.png');
      }
      {% endif %}
  </style>

  </head>

  <body class="_widget-auto-layout _use-custom-prompt-logo">
    {%- auth0:widget -%}
  </body>

</html>

Let me know if this helps with customising your login experience!

2 Likes
6

Hi James,

Thank you for taking out the time to respond to my query.

Incidentally, I was actually able to find this in the Auth0 Customise Page Template docs with New Universal Login and was able to successfully achieve this use-case and it works as expected.

Thank you for your assistance.

1 Like
7

Teamwork makes the dream work!

8

Is there a way to similarly change the “Primary Color ( branding.colors.primary)” dynamically based on the application.name