Add footer on New Universal Login Signup page

Knowledge Solutions
, ,
1

Problem Statement

We want to add a footer in the New Universal login ONLY for the signup page and not the login. We would like to have something like “by signing up you agree to the terms and conditions…etc” but only to show up in the signup part.

Solution

You can use prompt.name=="signup" to conditionally render the footer. Example:

<!DOCTYPE html>
<html lang="{{locale}}">
  <head>
    {%- auth0:head -%}
    <style>
      body {
        background-image: radial-gradient(white, rgb(200, 200, 200));
      } 
      .footer {
        background-color: rgb(120, 120, 120);
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 16px 0; 
        width: 100%;
        color: white;
        /* Use a high z-index for future-proofing */
        z-index: 10;
      }
    </style>
    <title>{{ prompt.screen.texts.pageTitle }}</title>

  </head>
  <body class="_widget-auto-layout">
    {% if prompt.name == "signup" %} 
        {%- auth0:widget -%}
        <footer class="footer">
          <ul>
            <li><a href="https://company.com/privacy">Privacy Policy</a></li>
            <li><a href="https://company.com/terms">Terms of Service</a></li>
          </ul>
        </footer>
    {% else %}
        {%- auth0:widget -%}
    {% endif %}
  </body>
</html>

Please refer to this doc.

1 Like