Guardian Hosted Page Logo Customisation by Subdomain

Hi,

I’m a bit unclear on this. Is it possible to determine the origin of a login request so the logo on the Guardian hosted page can be customised based on the subdomain?

Eg. whitelabel1.mycompany.com will have its own logo, while
whitelabel2.mycompany.com will have a different logo

Hey @james.cullen!

Good question and usecase actually! Let me do some research and get back to you with what I find!

Looking at our docs on customising the logo, there’s only info about setting the one you want:

It’s unlikely that it will be possible to distinguish the subdomain but let me confirm it with our product team!

Discussed it with a few of co-workers and it seems like there is no way to adjust the logo based on the subdomain. I highly encourage you to report it as feedback to our product team as a feature request as it would be really helpful in some cases.

Here’s our feedback site:

Thanks a lot for that!

1 Like

Hi James,

Will the same users be able to log-in to each of those white labeled apps, or are you going to have a user database for each app?

Thanks,

Andres

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

Hi James,

I am not sure if this is still a requirement, but I was looking for something else and I came across your question. it is not exactly what you ask, but I have devised a way in which to identify which client (application) the request came from and add a custom logo in in.

This is achieved by opening the editor for the Multi-factor Authentication (Universal Login section \ Multi-factor Authentication tab) and add the following between <script> and (function() {...}:

`var clientid = getClientId();
if (clientid === “<client_Id>”) {
iconUrl = “”;
} else {
iconUrl = " ";
};

function getClientId() {
var regex = new RegExp(‘[?&]state(=([^&#]*)|&|#|$)’),
results = regex.exec(window.location.href);
if (!results) return null;
if (!results[2]) return ‘’;

var decodedState = window.atob(results[2]).split(/[\s,]+/);

if (!decodedState[3]) return ‘’;
return decodedState[3];
}

You will now be able to specify branding based on the clientId.

1 Like

Thanks for sharing that @adam.evans!

1 Like