How to set the width for Identity Management Templates

You can set the width when you show the Identity Management templates via Javascript, for example like this:

tp.pianoId.show({width:'1000'})

This can be applied to modal and inline templates.

For example, you can bind this JavaScript to a register button's onclick function as shown below in order to show the Identity Management register screen inline:

tp.pianoId.show({
        displayMode: 'inline',
        screen: 'register',
        containerSelector: '#your-container',
        width:'1000'
      });

If you'd like it to be shown as a modal, you can use this code:

tp.pianoId.show({
        displayMode: 'modal',
        screen: 'register',
        width:'1000'
      });

You can also adjust the width of the Identity Management templates via CSS, by adding the code below to the Piano ID layout template in the CSS tab:

body{
 width: 800px !important;
}

You can specify the width value as you prefer.

If you'd like to change the width of Identity Management templates only for mobile devices, you can use the snippet below:

@media only screen and (max-width: 600px) {
  body {
      width: 200px !important;
  }
}

Please keep in mind that this will change the width of all Identity Management templates.

Last updated: July 03, 2026