Themes
A theme creator allows us to choose from predefined themes or to create a fully customized theme based on our requirements. We can create themes for both merchant and back office๏ปฟ portals.
Signzy provides a predefined theme for the Merchant portal, which can be tweaked and edited, however, only limited actions can be performed.
The various options that are available under the default theme:
- Theme Name: The name of the theme.
- Brand primary color: The hex code for the primary color(a color that is used the most with the brand) of the brand is entered here.
- Login background color: The hex code for the background color of the login page is entered here.
- Select favicon file: The favicon file for the theme is uploaded. (jpg and png file with a maximum size of 1 MB)
- Select Logo file: The logo file for the theme is uploaded. (jpg and png file with a maximum size of 1 MB)
- Show Customized Progress bar: A customized progress bar is visible on the top during the journey on turning this toggle on.
- Hide Flow Name on Page Header: The flow๏ปฟ name is hidden on the page header when this toggle is turned on.
Top Bar
- Topbar: Color
- Primary Colour: The top bar of the page can have the primary color of the brand that is already configured above.
- Custom: The top bar's color can also be customized by choosing the custom option.
- Colour
- Web header color: The hex code for the header color displayed during the web journey is entered here.
- Mobile header color: The hex code for the header color displayed during the mobile journey is entered here.
- Image: Images can also be set for the header
- Select Header Image for Web: The header image displayed during the web journey is uploaded here.
- Hide logo on header(Web): Enabling this toggle hides the logo on the header during the web journey.
- Select Header Image for Mobile: The header image displayed during the mobile journey is uploaded here.
- Text & icons: Colour of text and icons placed on the topbar
- White (Default): The color of text and icons placed on the top bar will be set to white.
- Black: The color of text and icons placed on the top bar will be set to black.
- Custom: The color of text and icons placed on the top bar can be customized by entering the hex code of the required color.
- Header alignment: Alignment of the topbar/header can be selected as Floating, Fixed, or Transparent/No header.
Elements, buttons and other controls
- Element: The element๏ปฟ style can be selected as Default(outline with fixed label), Fill with Outline, Filled, Standard, or Outline.
- Non Editable Text field: The style of the non-editable text field can be selected as Default(grey background)
- Buttons: Buttons include all controls such as navigation buttons, checkboxes, radio buttons, toggles etc.
- Primary Colour: The button of the page can have the primary color of the brand that is already configured above.
- Custom: The button's color can also be customized by choosing the custom option and entering the hex code of the required color.
- Text & icons: Colour of text and icons placed on top of primary color
- White (default): The color of text and icons placed on top of the primary color will be set to white.
- Black: The color of text and icons placed on top of the primary color will be set to black
- Custom: The color of text and icons placed on top of the primary color can be customized by entering the hex code of the required color.
- Headers & titles color
- Primary Color(Default): The headers and titles of the page๏ปฟ can have the primary color of the brand that is already configured above.
- Custom: The headers and titles's color can also be customized by choosing the custom option and entering the hex code of the required color.
Page Background
- Page content background: The background that is behind the content of each page.
- Default(Light Grey): The background color can be selected as default(grey).
- Custom Color: The page background color can also be customized by choosing the custom option and entering the hex code of the required color.
- Image
- Upload Image(Desktop): An image can also be uploaded as a page background for the desktop version of the journey.
- Upload Image(Mobile): An image can also be uploaded as a page background for the mobile version of the journey.
Font
- Select the font for display: The font style that will be used for the journey can be selected from the dropdown๏ปฟ.
- Add New: You can also add a new font by clicking on 'Add New'. You will be redirected to the Custom Fonts sections.
Panel Info Section
- The alignment of the panel info section can be selected as Left, Right, or Hidden.
- Panel Background Colour: The background color of the panel info section can be configured here.
Editable elements
- Companyโs favicon
- Companyโs Logoย
- Top bar
- Buttons and other controls
- Background color
- Panel info section
As we edit the theme, simultaneously on the right side we can see how the theme will appear on the Desktop and Mobile by switching the 'Preview' button either on the desktop or on the mobile.
When we select to create a new theme, we get a total blank theme page that could be customized from scratch as per the requirements(all the fields are configurable), all the settings and options remain the same as discussed in Signzyโs default theme above.
It is straightforward and easy to set up the theme page.
This gives an option within GO Admin to restrict the languages shown on the front-end UI(Indian and Global). Segregation between Indian and Global languages restricts the number of languages available for translation depending on the userโs geographical location. The language can be simply configured by selecting Indian or Global from the dropdown menu and clicking on the 'Update' button.
Custom fonts can be added to incorporate customized fonts according to the requirements of the different financial institutions. Branding for fintechs/banks can be customized with their theme fonts. To enhance user flexibility and creativity, this feature enables users to upload and use custom fonts in their realm without relying on developers for every customization request.
- Go to 'Custom Fonts'.
- Click on 'Add New'.
- Enter a 'Font Family Name' to recognise the font that will be added.
- Select a 'Fallback Font' from the dropdown. (In case a user logs in with an autologin link, the font gets loaded for the selected font. If itโs corrupted the fallback font gets loaded)
- Upload the custom fonts for all the weights, i.e., Light, Regular, Emi Bold and Bold in TTF, OTF, WOFF and WOFF2 formats.
- Click on Add.
- The custom font is added in the Themes section for the realm.
- After adding the fonts, you can go to the particular theme and assign the fonts there
- In custom font, you can add types of fonts and multiple font files too.ย
Note:
- In admin, the user can select 1 fallback font for 1 family.
- If the custom font is applied in the RM app the fallback font will load.
We can also customize additonal pages. i.e., the instructions and thank you pages for a particular journey. We can do so in a few steps:
- Go to 'Customize Additional Pages'.
- Select the flow from a dropdown
- Do you want to add an Instruction Page?
- Do you want to add Thank you Page?
- We can add an instruction page, a thank you page, a journey termination page, and a handoff page by clicking on the yes option.
- The template of these pages can also be selected according to the requirements.
- These templates come with the option to add the page with image or with text.
- The text or the image can then be added according to the requirement using elements, viz, text, image and text, and custom HTML.
- We can also customize the title and button text for the page.
Signzy provides a predefined theme for the Back Office Portal๏ปฟ, which can be tweaked and edited, however, only limited actions can be performed.
- Theme Name: The name of the theme.
- Logo: The logo of the organization is uploaded here.
- Colors and Elements: The colors for the header, title, button, font, etc can be set here from the color palette.
Note: The fields in Signzy's Default Theme can not be edited
When we select to create a new theme, we get a total blank theme page that could be customized from scratch as per the requirements(all the fields are configurable), all the settings and options remain the same as discussed in Signzyโs default theme above.
It is straightforward and easy to set up the theme page.
This section facilitates the addition of frequently asked questions and articles to assist end users in addressing common issues or inquiries throughout their journey. To add a new FAQ or article, enter the Article Name, Topic, and Answer, and then click the 'Add Article' button. All the added articles and FAQs will be conveniently displayed on the right side of the screen for easy access.
Getting help
Please feel free to contact us if you have any questions, require clarification, or have ideas for how to make the documents or any of our services better.
You can reach out to us at [email protected].
๏ปฟ