Avatar Customizing

Overview

The AppNavi Avatar uses a circular icon and the default text label GUIDE. You can customize its appearance to match your organization's branding by replacing the icon with an image, changing the text label, or replacing both the icon and text with a single image.

Avatar customization is configured separately for each application in the AppNavi Portal using custom CSS.

Use this guide when you want to customize the Avatar icon or label. For general Avatar settings, see AppNavi Avatar. For colors and broader branding options, see Custom Theming.

The new text description for the avatar icon is "GUIDE," replacing the previous text "AppNavi." The "GUIDE" text will be accompanied by an icon in the form of a circle. Additionally, users have the flexibility to insert an image and text of their choice by replacing the circle and the text.

IMPORTANT: Important: Customizing the GUIDE appearance can cause functional limitations or compatibility issues. Custom CSS may also need to be reviewed after AppNavi updates. Use these customizations at your own risk and verify the result in the target application.

Choose a Customization Method

Following are the three methods to customize the guide.

1. Replace the Avatar Icon with an Image

User can add image in Avatar Icon, and text will be remain same that is "GUIDE". User can also apply custom theme in this scenario. Use this option to display a custom image while keeping the default GUIDE text.

Following are the steps to add image

1. Log in to the AppNavi Portal.
2. Go to Manage Tenant → Applications.
3. Find the application you want to customize and open its edit settings.
4. Open the Design tab and select CSS.
5. Add the following CSS:

span#an-avatar-icon
{ background-image: url(ADD_URL_HERE); }

6. Replace ADD_URL_HERE with the URL of your image.
7. Save the changes and open the target application.

8. Verify that your image appears in place of the default circle and that the GUIDE label remains visible.

2. Replace the GUIDE Label with Custom Text

Use this option to replace the default GUIDE label while keeping the existing circular icon.

User can add text in the replacement of default text that is "GUIDE". The character limit of the text should not exceed 6 character. User can also apply custom theme. Following are the steps to change text

1. Log in to the AppNavi Portal.
2. Go to Manage Tenant → Applications.
3. Find the application you want to customize and open its edit settings.
4. Open the Design tab and select CSS.
5. Add the following CSS:

#global-an-container div#an-avatar .an-av-icon-text::before
{  content: "ENTER_TEXT_HERE"; }

6. Replace ENTER_TEXT_HERE with your desired label. The text must not exceed six characters.
7. Save the changes and open the target application.
8. Verify that the custom label appears and the circular icon remains unchanged.

At the client side, the text will change to customise text that user has added instead of GUIDE. And circle Icon will remain same.

3. Replace the Avatar Icon and Text with a Single Image

Use this option when user want to replace both the circular icon and the GUIDE label with one image, such as a branded logo. User can replace Icon and text both by an image as well. In this case custom theme cannot be used.

Important: Custom theming cannot be used with this configuration

1. Log in to the AppNavi Portal.
2. Go to Manage Tenant → Applications.
3. Find the application you want to customize and open its edit settings.
4. Open the Design tab and select CSS.
5. Add the following CSS:

#global-an-container div#an-avatar .an-av-icon-text-wrapper span.an-av-icon-circle:before {
    display:  none;
}
#global-an-container div#an-avatar .an-av-icon-text-wrapper span.an-av-icon-text::before {
    display: none;
}
#global-an-container span#an-avatar-icon {
    background-image: none;
}

#global-an-container #an-avatar .an-av-icon-text-wrapper::before {
    background-image: url(ADD_URL_HERE);
}

6. Replace ADD_URL_HERE with the URL of your image.
7. Save the changes and open the target application.
8. Verify that the image replaces both the circular icon and the GUIDE label.

At the client side, the image will appear instead of circle and GUIDE.