Adding your own branding
Learn how to add your own branding to the pre-built UI.
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.
The advanced customization tool provides a preview of various pre-built UI screens.
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>
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>"
}
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>
Was this page helpful?