Create your first Application

Overview

This document outlines the process for creating a new application in the AppNavi portal. Applications in AppNavi serve as containers for avatars, routes, and guided content. By setting up an application, guidance can be targeted, personalized, and deployed across specific environments.

Navigation Path

To begin the application creation process:

Navigate to the Manage Tenant page.
Go to the Applications section.
Select Applications.
Click the Add (+) icon.

The Application Creation page opens.

General Information

Upon clicking the add icon, the Application Creation page will open. The following fields must be filled to complete the application setup:

Field	What it means	What to enter
Upload Image	Image used to identify the Application.	Upload an appropriate application icon or image.
Application Name	Name used to identify the Application in AppNavi.	Enter a clear and recognizable name, such as `ServiceNow Production`.
Workspace	Workspace to which the Application belongs.	Keep the default workspace or select another workspace if required.
Application URL	Main URL of the target application.	Enter the application's main URL.
Pattern	Defines the URLs on which AppNavi should appear.	Enter the required URL pattern. Wildcards such as `*` can be used when multiple paths should be covered.
Owner	User responsible for the Application.	Select an active AppNavi user.
Language	Language used for AppNavi content.	Select the required language. By default, the browser language is used.
Avatar Position	Determines where the AppNavi Avatar appears.	Select the required position. The default position is Bottom-Left.
Avatar Visibility	Controls who can see the Avatar.	Select Visible or Restricted Mode based on your requirements.

Avatar Visibility

Two visibility modes are available:

Visible – The Avatar is visible to users when the Application's URL pattern matches.
Restricted Mode – The Avatar is initially hidden and can be made visible only when the configured restriction conditions are met.

Restricted Mode can be useful when testing AppNavi with a limited group of users.

Code Execution Mode

Select how AppNavi custom code should be executed.

Option	Description
Dynamic	Default option. Designed to work with most Content Security Policy (CSP) configurations.
Inline	Executes code inline and may be restricted by the target application's CSP configuration.

If your target application has strict CSP rules, verify the application's security configuration before selecting the execution mode.

Avatar Guide Size

Select how the Avatar guide should initially appear.

Option	Description
Minimized	Avatar guide appears collapsed by default. Users can expand it manually.
Maximized	Avatar guide is expanded by default. Users can manually minimize it.

Note: The avatar guide size resets on page refresh; user preferences are not saved.

Application Disabled

Use Application Disabled when you want to temporarily prevent AppNavi from loading for this Application.

When enabled, the avatar will not load on the configured application.
When disabled, the avatar is active and visible based on pattern match and restrictions (if applied).

Enable Advanced Analytics

Enable Advanced Analytics when the Application requires extended tracking and usage metrics.

When enabled, an additional option is available to Record User Role, which can be used for role-specific insights.

Module Section

On the left side of the application creation screen, a Modules Section displays the active modules licensed for the tenant.

Modules such as Guidance, Insights, and Discovery will be highlighted when enabled.
Only enabled modules will be available for use in this application.

Additional Toggles and Advanced Options

Enable Custom Design

Enable Custom Design if you want to customize the appearance of the AppNavi Avatar.

After enabling it, the Design section becomes available.

You can customize:

Avatar colors.
Avatar icon image.
Text and other supported styling through CSS.

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.

Enable Custom Code

When enabled, a Custom Code section is displayed.
This section allows insertion of custom JavaScript or styling snippets.
Custom code can be used to extend avatar behavior or styling beyond default capabilities.
If custom code toggles is disabled then the custom code page will not be available and if there is any custom code saved in the editor then it will not be executed for that particular application.

Use with caution. Ensure all custom scripts follow security and CSP compliance guidelines.

Save & Verify AppNavi loads

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

After opening the target application, confirm that the AppNavi Avatar loads as expected.

If you are using direct integration, the integration script must also be installed in the target application. AppNavi supports both Chrome Extension and script-based integration methods.

Verify the integration

For direct integration, AppNavi recommends generating the integration script from the Application menu so that the required secure parameters are included when applicable.

for more information, check Direct Integration.