Skip to main content

User Interfaces

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

General Information​

All branchly navigators share the same knowledge base. The Chat Widget and Chat Navigator 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 Navigator and Search Navigators the node id of the currently selected node is appended to the URL as a query parameter. This allows navigation via 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 Navigator Settings.

Chat Widget​

Personalize your Chat Interfaces with the following settings:

  • 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.
  • AI Bubble: Choose from a palette of design options for the chat bubble.

Color Settings​

Adjust the visual elements of your chat interface:

  • 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.

Prompt Persona​

Choose from predefined prompt personas such as Customer Support Agent, Technical Support Agent, Product Advisor, or Tourism Information Guide. Customize the persona to fit your specific use case. This customization forms part of the prompt sent to the LLM.

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 Navigator​

The settings between the Chat Widget and Chat Navigator are shared.

Search Navigator​

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

General Settings​

Configure the core aspects of your Search Navigator:

  • 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​

Customize the color scheme of your Search Navigator:

  • 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.

AI Bubble​

  • Bubble Color: Select a color for the AI bubble from the available options.

Sticky Search Bar​

Improve accessibility with a 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.

WhatsApp Interface (Expected in Q3/2024)​

An upcoming WhatsApp interface will extend branchly's capabilities to WhatsApp, integrating generative AI chat functionality for seamless user interaction. Stay tuned for its release in Q3/2024.