View Categories

How to White-Label the Application

YouTestMe GetCertified supports complete white-labeling. #

This article explains how to change the application theme (interface colors) and the appearance of the login page, set your logo and favicon, customize both in-app and email notifications and configure your link.

 

Logo and Favicon #

To change the logo and favicon:

  1. Click the System option in the main menu, then select “Setting and Customization.”
  2. Navigate to the Theme and Language tab.
  3. Choose Logo and Favicon.
  4. Click on the Change logo button to change the logo and upload your preferred logo. You can always revert the default logo by clicking the Reset to Default button.
  5. To personalize the favicon, click on Change favicon (The icon displayed in a browser address bar). You can always revert the default favicon by clicking the Reset to Default button.
  6. To save changes, click the Confirm button.

NOTE: The changes will become visible the next time you log in. To check them out immediately, please log out of the application. The logo will be waiting for you on the login page.

White labeling - Logo and favicon

 

White Labeling – Web Browser’s tab Title #

You have the ability to choose the title displayed in the web browser’s tab, which appears next to your favicon.

Web browser title

To personalize the web browser’s tab title, please follow these instructions:

  1. Click on the System option in the main menu, then select “Settings and Customization.”
  2. Navigate to the Theme and Language tab.
  3. Click on the White Labeling tab.
  4. Enter your desired title in the Web Browser Tab Title box.

Web browser title - White labeling

   5. To save your changes, click the Confirm button.

Web browser title - White labeling confirm button

Please note that if you export the exam in PDF format, the web browser’s tab title will be shown in the PDF footer.

White labeling -Demo exam PDF format

White Labeling – Application Link #

In the white labeling module, you can also customize the application link displayed to users in the email notifications sent from the system. To do so, follow the instructions below:

  1. Navigate to the Application Link box and enter the desired link.
  2. To save changes, click the Confirm button.

White labeling - Application link

White Labeling – Confirmation Label and Email Signature #

In the white labeling module, you can also customize the signature to be displayed in the email notifications sent to users by the system, as well as the confirmation label that candidates will see when accepting the exam instructions.

  1. To edit the confirmation label, navigate to the Confirmation Label box and enter the desired text.
  2. To edit the signature in the email notifications, navigate to the Email Sent From box and enter the desired text.

White labeling - Confirmation label and signature

Theme #

Theme refers to the color scheme of the application that can be changed by:

  1. Navigating to the System and choosing Settings and Customization.
  2. Click on the Theme and language tab.
  3. Choose the Theme  tab.
  4. Click on the Create new button.
  5. Enter the name.
  6. Set as default.
  7. Activate the theme.
  8. Make the desired changes.
  9. Click on the Create button to save the changes.
  10. The created theme will be visible in the table above.

Legend with Examples #

  1. Change primary color – The primary color is typically the dominant color used for buttons, links, and other key elements.
  2. Change info color – The color used for informative messages or elements.
  3. Change error color – Modify the color used to indicate errors or issues. Error colors are crucial for highlighting problems that need immediate attention.
  4. Change warning color – Adjust the color used to signal warnings. Warning colors are used for situations that may not be errors but still require user awareness.
  5. Change success color – Change the color used to indicate successful actions.
  6. Change grey color – Customize the shades of grey used in the application.
  7. Change menu color on the left side of the application.
  8. Change background color – Update the overall background color of the application.
  9. Change white color.
  10. Change white text color.
  11. Change white icon color – Change the color of white icons.
  12. Change accent color – Choose a new accent color.
  13. Change Selected accent color – Specify the accent color to be used when an element is selected.
  14. Change hover accent color – Set the accent color that appears when a user hovers their cursor over an interactive element. Hover effects can enhance user interactivity.
  15. Change Disabled accent color – Define the accent color used for disabled or inactive elements. It helps differentiate these elements from active ones.
  16. Change border color.
  17. Choose desired icon type – Select a specific style or set of icons to use throughout your application
  18. Select font size – Set the desired font size for text within application. Font size also affects readability.
  19. Save changes.

From our example above, an Error Message will look like this:

Warning Dialog:

Informative Message:

The application appearance can be configured only by the administrator role, while changes are visible to all system users.

Test Logo #

Apart from branding the whole application with your logo, you can set a specific logo for each test you create. Here is how:

Navigate to your test’s Settings tab. In the Basic Information section, you will find the test logo box. Click on the pencil icon to edit the logo.

A new pop-up window with the following options will appear:

  1. The test logo is displayed here.
  2. Upload a new logo from your device.
  3. Delete the existing logo.
  4. Information on recommended logo size and type.

Save the changes you’ve made.

You can view the logo that has been set on the My tests page.

Set Up Your Support Contacts #

The purpose of this article is to explain how to set up contacts that will be used for application support.

Set Up a Contact Email #

Once you log in to the application:

  1. Select System on the left side menu, and choose Settings and Customization from the drop-down menu.
  2. Navigate to the Support tab. You will need to fill in the following fields to contact system support from the home page successfully:
  3. Purpose of mail – Describe the purpose of an email and phone call.
  4. Email – Provide the desired support email address. The first “Email” field is mandatory, and it will be the default email address.
  5. Phone number – Provide the desired support phone number.
  6. Additional info text– You can provide useful details about why you contacted the support. For example, what is the expected time for an email response to the customer’s issues or business hours when support is available, etc.
  7. Confirm – Save the changes.

    You can add up to 3 contacts for users to select from. However, it is required to have one support contact configured.

    For a video tutorial on how to set up contacts, please watch the video.

    Customizing In-App and Email Notifications #

    The Notification tab contains email and in-application notification templates that are automatically sent when a particular action is made inside the application.

    Notification templates are predefined but editable. To manage and edit notifications, follow the instructions below:

    Hover over the System and choose the Settings and customization option.

    Navigate to the Notifications tab.

    1. Find the notification you want to edit – search the list of all events for which there are notifications, and find the one you want to configure. 
    2. Enable or disable Application notification – enable or disable application notifications for any listed notification event name.
    3. Click on Edit to customize Application notification – edit the template message shown in the application after the specific action is made.
    4. Enable or disable the Email notification – enable or disable email notifications for any listed notification event name.
    5. Click on Edit to customize Email notifications – edit the template message sent to users’ email after the specific action is made.
    6. Click on the Edit button to edit the email messages.

    Once you click the Edit, the pop-up window will appear where you can:

    1. Change the Notification title. This text will be displayed as a notification title.
    2. Change the Notification text (body). You can customize the text except for the one between the $ signs. This part of the text cannot be modified as the system uses variables to insert user-related data.
    3. Click the Save button to save the template.
    4. Click the Cancel button to discard the template changes.

    Please check out this article for more detailed instructions on how to modify the predefined notification.

    Configuring Mail Server #

    This article explains configuring the mail server in the System settings on the Mail server tab.

    Accessing the page #

    Once you log in to the application, select System on the left side menu and choose Settings and customization from the drop-down menu.

    Once the System and preference page is previewed, choose the Mail server tab.

    Configuring the mail server #

    The Mail server tab sets parameters for a mail server that will send notifications to administrators and users via email. There is no limit regarding the number of mail servers that can be set.

    To configure the mail server, you need to set up the following:

    1. The drop-down list determines the mail server from which the parameters are displayed.
    2. Enter the SMTP  hostname of the mail server.
    3. Enter the SMTP  port number of the mail server.
    4. Enable SMTP authentication.
    5. Enable starting TLS protocol.
    6. Enter the username of the mail server.
    7. Enter the password for the mail server.
    8. Enter the email address a recipient will see as the sender’s address.
    9. You can test if the mail server works by sending an email to the address you specify in the Send a test email to field.
    10. Click the Send button to send the test email.
      Note: Only one mail server can be active at a time. You can set a mail server to be active by clicking on the Activate button in the form of an inactive mail server. Only inactive mail servers can be deleted by clicking on the Delete button in the form of the inactive mail server.
    11. By clicking the Update existing button, the entered parameters will be applied to the selected mail server.
    12. You will create a new mail server with the entered parameters by clicking on the Create new button.
    13. Interval– enter the number of seconds between two successive executions of the mail job.
    14. Batch size – enter the maximal number of emails sent during one execution of the mail job.

    Language settings #

    To set up the desired language, do the following:

    1. Go to the Language settings.
    2. Thick the checkbox Enable additional languages.
    3. Click on the Confirm button.
    4. Enable/disable test language.
    5. Enable/disable interface language.

    Language bundles settings #

    Users can customize the application interface text in the Language bundles tab according to their needs – change labels’ names, create new hints, and modify notifications’ content.

    A language bundle is a file consisting of the key/value pair properties. Each property is connected to one or multiple UI components based on a property key.

     

    Note that it is impossible to delete default language bundles, but you can create new ones based on them. Also, it is not possible to have two active bundles of the same type simultaneously.

    There are two ways to create a custom language bundle:

    1. Changing the language bundle by editing one-by-one property values.
    2. Downloading the language bundle, editing the file offline using the desired text editor, and importing it into the application.
      Note: The keys must not be changed. Otherwise, the changes will not be visible.To create a new language bundle by editing one-by-one property values:
    1. Click the Actions option and select the Pencil icon for the language bundle based on which you want to create a new one.
    2. Search for the property value or key you want to change.
    3. Choose the desired key from the list. If you cannot find the key for the desired property value, you can use the preview key mode to find it easily.
    4. Edit the text.
    5. Confirm or discard the changes you made in the property value field.

      Powered by BetterDocs