Skip to main content

User Interfaces

branchly provides four distinct user interfaces: the Chat, Chat Widget, Navigator, and the Search interface. These interfaces can be customized to match your brand and use case, sharing the same knowledge base.

General Information​

  • All User Interfaces of an Application share the same knowledge base. The Chat Widget and Chat share design settings and prompts.
  • All branchly user interfaces are web components, enabling them to be styled using custom CSS if you wish. For more details, refer to Custom Styling of User Interfaces via CSS.
  • The dynamic navigation features requires that the nodes in your knowledge base are connected via relationships.
  • In the Chat and Navigator the node id of the currently selected node is appended to the URL as a query parameter. This allows navigation via the browser history and the sharing of links to specific pieces of information. Furthermore, this feature enables search engines to crawl the content inside your user interfaces. The behavior of dynamic navigation can be adjusted in the Application Settings.

Chat Widget​

Personalize your Chat Interfaces with the following settings:

  • AI Bubble: Select an AI bubble from the available options.
  • Greeting: Define a welcoming message for your users. You can define a greeting for each locale.
  • Assistant Name: Name your chat assistant to reflect your brand or the nature of the service.
  • Font: Select a font for the text within your chat interface.
  • Color Settings:
    • Font Color: Choose a color for the main text, including titles.
    • Background Color: Set a background color for the entire chat interface.
    • User Message Color: Specify the color for messages sent by users.
    • Main Color: Select the primary color theme for your chat interface.
  • Suggested Questions: Configure predefined questions that will be shown to users to guide them through the search. These questions will be shown to users when they start the search. Here you can also select a strategy for the suggested questions.

Prompting​

Choose from predefined prompt templates such as Customer Support Agent, Technical Support Agent, Product Advisor, or Tourism Information Guide. Customize the prompts to fit your specific use case.

  • Persona (with limitations): Instructions for the AI to handle incoming messages. What role should the AI take, what limitations should it have?
  • Output Instructions: Instructions for the AI to follow when generating the response. Think about the tone of voice, the length of the response, and the complexity of the language.
  • Context Nodes: Inject existing Nodes from your knowledge base into the prompts for each step in the branchly AI process. A good use case for this would be, if the type of questions the AI should answer depends on some dynamic information that is regularly updated via a data source scheduler.

Opening Behaviour​

You can control the behaviour of the chat widget when the user is first opening your page. See here: Custom Styling of User Interfaces via CSS.

Chat​

The settings between the Chat Widget and Chat are shared.

Navigator​

Enhance your Navigator with a range of style and customization options:

  • AI Bubble: Select an AI bubble from the available options.
  • Navigator Title: Add a title that appears at the top.
  • Font Family: Choose from various font styles including sans-serif, serif, and monospace.
  • Maximum Nodes Displayed: Limit the number of "next node" buttons visible, with additional nodes accessible via a "plus" button.
  • Background Image URL: Enter the URL of an image to tile as the background.
  • Element Border Radius: Select from Default, Round, or Sharp border styles.
  • Node Shadow: Enable to add a subtle shadow to nodes.
  • Navigator Title Alignment: Position the title at the Start or Center.
  • Color Settings:
    • Font Color: Pick a color for the main text and titles.
    • Background Color: Choose a background color for the interface.
    • Search Highlight Color: Select a color for highlighting search results.
    • Search Result Background Color: Set a distinct color for search result backgrounds.
    • Next Nodes Color: Choose a color for the "next node" navigation buttons.
    • Next Nodes Font Color: Select a color for the text on the "next node" buttons.
    • Selected Nodes Color: Pick a color for already selected nodes.
    • Selected Nodes Font Color: Choose a color for the text on currently selected nodes.
    • Sticky Searchbar Color: Set a color for the sticky search bar.💡 Note: You can choose to display either an image or a background color for your Search Navigator, not both.
  • Sticky Search Bar:
    • Sticky Searchbar Mobile: Enable a sticky search bar on mobile devices.
    • Sticky Searchbar Desktop: Enable a sticky search bar on desktop screens.

Search​

Personalize your Search interface with the following settings:

  • AI Bubble: Select an AI bubble from the available options.
  • Font: Select a font for the text within your chat interface.
  • Color Settings
    • Font Color: Choose a color for the main text, including titles.
    • Background Color: Set a background color for the entire chat interface.
    • User Message Color: Specify the color for messages sent by users.
    • Main Color: Select the primary color theme for your chat interface.
  • Interface Title: Define a welcoming message for your users. You can define a greeting for each locale.
  • Input Placeholder
  • Generated Answer Message
  • Submit Button Text
  • Suggested Questions Title
  • Suggested Questions: Configure predefined questions that will be shown to users to guide them through the search. These questions will be shown to users when they start the search. Here you can also select a strategy for the suggested questions.