# Custom Universal Login Modal Placement

**URL:** <https://community.auth0.com/t/custom-universal-login-modal-placement/118177>\
**Category:** Get Help\
**Tags:** login-experience, new-universal-login-experience\
**Created:** [October 10, 2023, 1:19pm UTC](https://community.auth0.com/t/custom-universal-login-modal-placement/118177 "2023-10-10T13:19:07Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![msmith1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@msmith1](https://community.auth0.com/u/msmith1)\
**Post date:** [October 10, 2023, 1:19pm UTC](https://community.auth0.com/t/custom-universal-login-modal-placement/118177/1 "2023-10-10T13:19:07Z")

</div>

Hi there. I have a question that I’ve noticed has been asked previously but did not see any conclusive answers.

What I am trying to do is develop a custom universal login page, using the custom HTML field. I am wondering if it is possible to change the behavior of the login modal to appear in any area of my choosing within the custom HTML page, such as a sidebar rather than a popup in the center of the screen.

I have seen suggestions about universal vs. embedded login for more design flexibility, but am wondering what the limitations are with universal to achieve what I am after.

Any advice is appreciated!

---

<div class="post-metadata">

**Author:** ![nathan.jenkins](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/nathan.jenkins/32/44577_2.png) [@nathan.jenkins](https://community.auth0.com/u/nathan.jenkins)\
**Post date:** [October 10, 2023, 6:53pm UTC](https://community.auth0.com/t/custom-universal-login-modal-placement/118177/2 "2023-10-10T18:53:50Z")

</div>

Hi @msmith1 , welcome to the Auth0 Community!

I would recommend taking a look at using a [Custom Page Template with New Universal Login](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates).

There is an [example here](https://auth0.com/docs/customize/universal-login-pages/universal-login-page-templates#login-box-image-layout) showing the Auth0 prompt positioned to the left. You’ll find lots of examples on this page in the docs that should help give you ideas on what is possible when using a page template.  
Hope this helps, thanks!

---

<div class="post-metadata">

**Author:** ![msmith1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@msmith1](https://community.auth0.com/u/msmith1)\
**Post date:** [October 16, 2023, 4:36pm UTC](https://community.auth0.com/t/custom-universal-login-modal-placement/118177/3 "2023-10-16T16:36:21Z")

</div>

Hi @nathan.jenkins . Thanks so much for the reply.

I was able to use that example code, but still cannot get the form to render properly when using a custom HTML login page. See attached for a screenshot of what is rendering, and below for the code taken from the demo example. Could you advise? Again, thanks so much!

```auto
        <div class="sidebar">
            <div class="form-container">
                {% if prompt.name == "login" or prompt.name == "signup" %} 
                    {%- auth0:widget -%}
                {% else %}
                    {%- auth0:widget -%}
                {% endif %}
            </div>
        </div>

```

 ![Screenshot 2023-10-16 at 12.36.05 PM](https://global.discourse-cdn.com/auth0/original/3X/7/f/7f4b6bb7c2320f93af5f43881ec93e9b4c5ebd1d.png)

---

<div class="post-metadata">

**Author:** ![nathan.jenkins](https://sea1.discourse-cdn.com/auth0/user_avatar/community.auth0.com/nathan.jenkins/32/44577_2.png) [@nathan.jenkins](https://community.auth0.com/u/nathan.jenkins)\
**Post date:** [October 17, 2023, 1:24pm UTC](https://community.auth0.com/t/custom-universal-login-modal-placement/118177/4 "2023-10-17T13:24:04Z")

</div>

Hi @msmith1 , you’re welcome!

The Page Template works with **New** Universal Login, perhaps you are looking at **Classic** Universal Login?  
I recommend taking a look at the pros and cons between them see here - [Classic Vs New UL.](https://auth0.com/docs/authenticate/login/auth0-universal-login/new-universal-login-vs-classic-universal-login)

If you’re wanting the customize classic, take a look at the [Lock Configurations](https://auth0.com/docs/libraries/lock/lock-configuration) and specifically this use of the [prompt in a container](https://auth0.com/docs/libraries/lock/lock-configuration#container-string-) might help.  
Thanks!

---

<div class="post-metadata">

**Author:** ![msmith1](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/768px-User_font_awesome.svg.png) [@msmith1](https://community.auth0.com/u/msmith1)\
**Post date:** [October 17, 2023, 1:38pm UTC](https://community.auth0.com/t/custom-universal-login-modal-placement/118177/5 "2023-10-17T13:38:09Z")

</div>

@nathan.jenkins I can confirm that it is the New Universal Login.

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/auth0/original/3X/b/5/b560f266932fcce5d57f09a6595bd50518cae3f3.jpeg) [@system](https://community.auth0.com/u/system)\
**Post date:** [October 31, 2023, 1:39pm UTC](https://community.auth0.com/t/custom-universal-login-modal-placement/118177/6 "2023-10-31T13:39:08Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
