Branding On Steroids
In a previous blog post 👈, I introduced Asgardeo Organization Branding capabilities. And since then, we have added quite a few cool nifty features that could really help users to achieve advanced customizations whilst staying in the low code realm.
This blog post will take a sample scenario and compare the newly added capabilities.
TL;DR:
To have a branding like the sign-in page of this application 👉 https://drogo-nft-demo.web.app, update the branding configurations of your organization with these values.
And also watch this how to view 👉 https://www.youtube.com/watch?v=yXhSaNUMMN4&ab_channel=Asgardeo
Scenario 🏜
Drogo is a new startup company that specializes in NFTs. They have a marketplace application that is hosted on Firebase.
They want to let their users log in to their marketplace application and also they require to drive new users to register with their service via the application. This is where Asgardeo comes in. They’ve used the Asgardeo React SDK to integrate login capabilities to the application.
Here’s the progress until now!
Did you notice what’s lacking here?
Of course, the branding transition sticks out like a sore thumb.
Let’s fix it. shall we…
Get Started 🚀
I will first log in to Asgardeo Console with the credentials of my organization(drogo). And I will navigate to Develop > Branding to reach the branding feature.
⚠️ Always remember to Go Live if you want your changes to appear
General Settings ⚙️
Here we can configure the general settings of the company branding. I will explain in brief what each of these fields does.
Also, I will be adding the values i’m using so it’ll be easier if you decide to follow along 😉
Site Title
This is the text that appears in the browser tab when you shower over, in social media shares, etc.
Value Used
Login | DrogoIn Action
Copyright Text
Text that appears at the footer of the login screens.
Value Used
© Drogo 2022. All Rights Reserved.In Action
For free-tier subscriptions, the Powered by Asgardeo label will display on the Asgardeo-powered interfaces when branding is published.
Contact Email
The email address appears in error pages and other important areas where your customer might want to contact you for additional support.
Value Used
support@drogo.ioIn Action
Design 🎨
Theme
This is the base for your design. We currently support Dark 🌑 & Light 🔆 variants to start with.
Since the Drogo NFT application has a darker tone, I will start with the Dark theme.
Theme Preferences
Now I can start customizing the overall look and feel based on the organization’s branding guidelines.
Following is the color palette salvaged from the company’s branding guidelines.
Theme Preferences > Images
Logo
This is the image that appears on top of the Login Box. You can add a hosted URL of an image and also an Alt text for accessibility.
For better performance, use an image that’s
600x600pixels and less than1mb.
Favicon
This is the image that appears on the browser tab. You can also add a URL of a hosted favicon image here.
For better results, use an image with a square aspect ratio that’s at least
16x16pixels in size.
Theme Preferences > Color Palette
Primary Color
Color of the primary action buttons, hyperlinks, etc.
Secondary Color
Color of the secondary action buttons like cancel buttons, etc.
Theme Preferences > Page
Background Color
The background color of the body of the pages in the login screens.
Font Color
The font color of the pages instead of hyperlinks. If you change this value, it’ll affect the overall font color of elements like headers, input labels, etc. You will be able to have more fine-grained control over the input label colors in later sections.
Theme Preferences > Footer
Border Color
The top border color of the page footer.
Font Color
The font color of the copyright text and other links in the footer.
Theme Preferences > Font
The font-face of the login pages.
Use a Web Safe Font
Pick a web-safe font (fonts that are pre-installed by many operating systems) like Arial, Times New Roman, etc.
Import a Font
Import a font from a CDN or a font service like google.
Import a Font > Import URL
Enter a URL to import a custom font from a font service.
Import a Font > Font Family
Name of the font family you are planning to import. This is usually documented in the font service.
Theme Preferences > Headings
Font Color
Font color of the H1, H2, H3, H4, H5 & H6 headings in the login pages.
Theme Preferences > Buttons > Primary
These buttons appear as the primary actions in the login flows.
Font Color
Color of the primary button’s font.
Border Radius
Border radius of the primary button.
The background color of the primary button will be infered from the primary color defined in the color pallette.
Theme Preferences > Buttons > Secondary
These buttons appear as the secondary actions in the login flows such as cancel buttons, etc.
Font Color
Color of the secondary button’s font.
Border Radius
Border radius of the secondary button.
The background color of the secondary button will be infered from the secondary color defined in the color pallette.
Theme Preferences > Buttons > External Connections
These buttons are used to display external IdPs and social connections (Google, Facebook, etc) inside the login box.
Background Color
The background color of the button.
Font Color
Color of the button’s font.
Border Radius
Border radius of the button.
Theme Preferences > Login Box
Background Color
The background color of the login box.
Font Color
The color of the text inside the login box including text, input labels, etc.
If you need to change input labels to a different color, that can be done from the Inputs section.
Border Color
The border color of the login box.
Border Width
The border width of the login box.
Border Radius
The border-radius of the login box.
Theme Preferences > Inputs
Background Color
The background color of the text inputs, checkboxes, etc.
Font Color
The font color of the characters inside the text input fields, ✔️ of checkboxes, etc.
Border Color
The border color of the text inputs, checkboxes, etc.
Border Radius
The border-radius of the text inputs.
Theme Preferences > Inputs > Input Labels
Font Color
The font color of the labels of text inputs, checkboxes, etc.
Advanced 🔗
And finally, under advanced, we can configure the privacy, terms of service (TOS), and also the cookie policy URLs.
If these are not configured when the branding is live, the privacy and TOS links will not be visible in the footer and the cookie policy popup will also be hidden.
Final Outcome 🎉
To see for yourself, go to https://drogo-nft-demo.web.app and click on
Sign In
Live Demo 📹
Concluding Remarks 🔚
Asgardeo RnD team is tirelessly working on improving the feature further.
If you have any further requests or suggestions, please reach out to the team through our community or via asgardeo-help@wso2.com.
Signing off… ✌️❤️
