Tray Embedded / Core Topics / Whitelabelling / Auth-only dialog CSS

Auth-only dialog CSS

  • On this page

If you are using the Auth-only dialog (i.e. your integration does not require End Users to carry out any personalization beyond authenticating with services) then it is possible to whitelabel the CSS using Tray's built-in CSS Editor.

You can do this with the following steps:

  1. Set up your auth-only dialog as explained in the Auth-only dialog guide

  2. You will see that the screen has no CSS styling applied:

auth-only-no-css
  1. Right-click and choose 'inspect' to bring up the page elements

  2. Observe the different classes, including 'partner_screen'

inspect-classes-partner-screen
  1. In the Tray UI, go to settings & people > customization > edit & preview:

edit-and-preview

Here you can modify .partner_screen to be whatever style you want

It is not possible to use the 'preview' function to view changes to auth-only dialog CSS. You will need to apply the changes and then run the dialog in your browser to view them (changes might take a few minutes to take effect, as css is cached).

Making changes to this class will affect it across all your solutions

  1. After making the CSS changes and re-running the auth-only dialog, you should see your new styling:

new-css-styling