Create your first Application

Suggest Edits

Add Application

We add an avatar to our required application by the following steps:

  1. In the customer portal, navigate to Applications.
  2. Click on "Add" (plus icon).
  3. In the dialog, you can either select "New application" or choose from a list of existing apps and click on "ADD APPLICATION".
  4. Fill in all the required data.

General:

From the general section, fill in the following fields:

Upload Image: Users can upload an image to their application by clicking on the pencil icon and selecting the Upload new image option.

Application name: Add a name to your application.

Category: Select the category of the application from the given options.

URL: Add the main URL of your required application.

Pattern: Add a specific page URL for displaying AppNavi on the desired path, or use Steric at the end of the main URL to apply it to all pages.

Language: Select the language to show AppNavi content in that specified language. By default AppNavi content is in the browser's language.

Avatar Position: The avatar icon will appear according to the selected position. The default position of the avatar icon is Bottom-Left.

Avatar Visibility: Select the visibility mode. There are two options,

  1. Visible (default).

  2. Restricted mode

    When Restriction Mode is selected, the Restriction Keys option gets enabled which the user can use to specify up to 5 keys. In Restriction Mode, AppNavi can be visible by setting one of the Restriction Keys in the localStorage in appnavi_visibilityRestrictionKey.

Code Execution Mode:

  1. Dynamic (eval), which is the default (not usually subjected to the CSP policies of the page).

  2. Inline (restrictions by the CSP policies)

Application Disabled: If we switch on this toggle, this will disable the application and will not display the avatar on the application. If we switch off this toggle, the avatar will display on the application.

Advanced Settings:

Routes: This flag enables or disables routes in the avatar. The route section on the avatar is displayed if this is enabled; otherwise, it will hide the route section on the specified application.

Posts: This flag enables or disables posts in the avatar. The Posts section on the avatar is displayed if this is enabled; otherwise, it will hide the Posts section on the specified applications.

Announcements: This flag enables or disables the announcements on the avatar side. The announcement is a popup dialogue that is displayed to give notice of any announcement to the users if this is enabled; otherwise, the popup of the announcement will not be displayed on loading the application.

Infos: This option enables or disables the display of the info dialogue, which is called using a custom API. The user will not be able to call the information from the API if this option is disabled.

Collections: This flag enables or disables route collections in the avatar. The Route Collection section on the avatar is displayed if this is enabled; otherwise, it will hide the route collection section on the specified application.

Pins: This option enables or disables the display of the Pins section in the avatar. The Pins section on the avatar is displayed if this is enabled; otherwise, it will hide the Pins section on a specified application.

Net Promoter Score This flag indicates if an application collects feedback from users in the form of net promoter score dialogue. If this is enabled, the application collects feedback from the user and if it is disabled, the application will not collect any feedback.

Enabled Advanced Analytics: This flag indicates extended analytics data. If this is enabled, another toggle will appear as "Record User Role".

Record User Role: If this is enabled, analytics will be recorded based on user roles. The role can be developer, manager, etc.

Customized Design:

By activating this, you can add colors to different areas of the avatar on specified applications.

Colors: You can customize your avatar design by setting colors that can be selected by a color picker or added by entering a hex value.

CSS: You can add CSS to a custom theme by changing the image and text of the Avatar Icon.

Custom Code:

You can define custom code and style here, which are then used for the application.

Workspace Visibility

Here, you can select a subscription other than your primary subscription.
Your application will appear as a mirror on that subscription ID.
Workspace permissions subscribers can only perform functions on Avatar but cannot make changes to primary application data added to the portal.

Save Changes:

After adding all the details, click "Save Changes" to save your application.

Updated 22 days ago