Skip to main content

Appearance Settings

This article will guide you through changing the appearance-related settings for your project using the Settings button on the project home page. Customizing the appearance of your chatbot helps align it with your brand’s colors and style, creating a cohesive and professional look.

Accessing the Projects Section​

To manage your project settings, follow these steps:

  1. Log in to your NGage 360 account.
  2. Navigate to the main menu and click on the 'Projects' link.

This will take you to the Projects section, where you can see a list of all your current projects.

Accessing the Settings Page​

Once you are in the Projects section, follow these steps to access the project settings:

  1. Select the Project: Find the project you want to configure from the list. Click on the project name to go to the Project Details page.
  2. Click on the 'Settings' Button: On the project home page, locate and click on the 'Settings' button. This will open the project settings interface.

Configuring Appearance Settings​

In the Settings page, follow these steps to configure the appearance settings of your project:

  1. Navigate to the Appearance Tab: Click on the 'Appearance' tab within the settings interface. This tab contains all the options you need to customize the look and feel of your AI agents.

Appearance Configuration Options​

  1. Custom Title:

    • Edit Title: Enter a custom title for your agent in the 'Custom Title' field. This will be displayed at the top of the agent window.

  2. Custom Sub-Title:

    • Edit Sub-Title: Enter a custom sub-title in the 'Custom Sub-Title' field. This can be used to provide additional context or a tagline for your agents.

  3. Welcome Message:

    • Edit Welcome Message: Enter a welcome message that will greet users when they first interact with your agents. This sets the tone for user interaction.

  4. Custom Avatar:

    • Upload Avatar: Click on the 'browse' button to select and upload a custom avatar image for your AI agents. This could be your company logo or any image that represents your brand.

  5. Position on Page:

    • Select Position: Choose the position where you want the agent to appear on the screen. The options are 'Bottom Left' or 'Bottom Right'.

  6. Font and Colors Settings:

    • Customize Font: Configure the font of the agent to match your brand’s scheme.
    • Customize Colors: Configure the colors for various UI elements of the agent to match your brand’s color scheme. This includes settings for background color, text color, button color, and more.

Real-Time Preview​

As you make changes to the appearance settings, a real-time preview on the same page will show you how the agent will look with the applied changes. This helps you see the impact of your customizations instantly and make adjustments as needed.

Saving the Settings​

Once you have configured all the desired appearance settings, follow these steps to save your changes:

  1. Save Changes: Click on the 'Save Settings' button to apply and save all the changes you have made to the appearance settings.
  2. Confirmation: You will receive a confirmation message indicating that your settings have been successfully updated.

Benefits of Customizing Chatbot Appearance​

  • Brand Alignment: Ensure your AI agents align with your brand’s colors and style, creating a cohesive user experience.
  • Professional Look: Enhance the professionalism of your AI agents with custom titles, sub-titles, and avatars.
  • User Engagement: A well-designed interface can improve user engagement and satisfaction.

Conclusion​

Changing the appearance settings on NGage 360 allows you to create visually appealing and brand-aligned AI agents. By following the steps outlined in this guide, you can easily customize the title, sub-title, welcome message, avatar, position, and UI colors to match your brand’s identity.