Custom branding - Authsignal

For a more seamless user experience you can heavily customize the pre-built UI branding by providing your own theme. Visit the branding tab in the Authsignal Portal to get started. If you require a more bespoke branding experience then try out our UI customization tool. This tool allows you to change a wide range of design tokens (colors, borders, alignment, text) to tweak the look and feel of the entire pre-built UI.

Custom templates

To override the pre-built UI’s layout you can provide a custom template. Custom templates, at a bare minimum, must contain the following structure.

<html>
  <head>
    <authsignal-head></authsignal-head>
  </head>
  <body>
    <authsignal-widget></authsignal-widget>
  </body>
</html>

The authsignal-head and authsignal-widget tags are required for the pre-built UI to function correctly.

To update your tenant’s custom template, you can send the following payload to the Update Theme endpoint.

{
  "template": "<html><head><authsignal-head></authsignal-head></head><body><authsignal-widget></authsignal-widget></body></html>"
}

The template string must have escaped special characters.

Adding custom HTML/CSS

Using a custom template allows you to add your own HTML/CSS. For example, if you wanted to show an image next to the pre-built UI you could use the following template:

<html>
  <head>
    <authsignal-head></authsignal-head>
    <style>
      .wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      .image {
        display: block;
        width: 100%;
        height: 100%;
        z-index: 10;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-image: url(https:\/\/images.unsplash.com\/photo-1682685795579-37e731bfefab?q=80&w=1374&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <authsignal-widget></authsignal-widget>
      <div class="image"></div>
    </div>
  </body>
</html>

Which would result in:

Adding custom JavaScript

To add custom JavaScript to your custom template you can use the following structure:

<html>
  <head>
    <authsignal-head></authsignal-head>
    <script src="https://cdn.some-javascript.min.js"></script>
  </head>
  <body>
    <authsignal-widget></authsignal-widget>
  </body>
</html>

​Custom templates

​Adding custom HTML/CSS

​Adding custom JavaScript

Custom templates

Adding custom HTML/CSS

Adding custom JavaScript