Add Footer on New Universal Login Signup Page

Overview

This article explains how to add a footer in the New Universal Login ONLY for the signup page and not the login. The goal is to have something like “by signing up you agree to the terms and conditions…etc,” but this should only be displayed in the signup part. 

Applies To

  • New Universal Login

Solution

This can be accomplished by using a prompt.name=="signup" to render the footer conditionally. The following shows an 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>

 


Refer to the Page Footers section of the Customize New Universal Login Pages for more information. 
 

Recommended content

No recommended content found...