About

The vf-chatbot component enables conversational interaction between a user and an AI system. It is designed for flexibility and can be embedded in a page as a modal or accessed as a standalone solution.

Usage

Why a chatbot

While bots can be a solution to some business challenges, ensure that it is the right solution before implementing it. Consider the following:

• Will it solve a validated user problem?
• Are there more efficient alternatives?
• What are the potential cons or drawbacks if a chatbot is added to the process?
• How will this be maintained and updated in the future?

Deciding between modal vs. standalone

The chatbot standalone and chatbot modal are two distinct variants for delivering conversational interfaces. Choose between them based on use case needs and task complexity.

Modal

• For in-context support (e.g. help with current page or workflow)
• Access point is via a floating action button on the page
• Supports simple tasks such as getting information

Standalone

• Suitable for exploratory or focused workflows (e.g. discovering genetic variants)
• Launched via a link (such as "Talk to our AI chat assistant")
• Supports more complex tasks that benefit from expanded engagement

Anatomy

| Element | Description | |---------|-------------| | Title bar | Shows the chatbot name, minimise button and close button. The title bar may include a dropdown for selecting categories. | | Dialogue section | Scrollable chat window showing the conversation log. | | Intro message | A brief onboarding message explaining the purpose and capabilities of the chatbot. Shows the icon, title and short message. | | Banner | Used to show optional disclaimers or alerts (Max. 3 lines of text). For cases that require user consent, use a blur overlay on the background or a pre-access popup instead, as banners may be missed. | | Text input area | Open input field for typing and sending queries. Expands up to 5 lines, after which it becomes scrollable. |

Flows

| Flow | Details | |------|---------| | Suggested prompts | Appear on the initial screen. Provide a quick start to users with clickable queries. They help to provide context on the type of questions the user can ask on the platform. (Max. 60 characters) | | Closing the chat dialogue | Clicking on the close icon "X" triggers a confirmation prompt to prevent accidental loss of the chat log. | | Error management | If the chatbot is unable to provide a response to the query, display a clear error message and provide an alternative way for them to get their answers. | | Links | Displayed in a clear underlined style. They can be shown inline or as a list. | | Source attribution | Chips are shown in relevant paragraphs which cite the sources. Links to the sources and more details can be accessed via a "View sources" button. | | Feedback on a query level | Users can assess the AI responses with a thumbs up/thumbs down or optional close/open response fields to give more details. | | Category selection | A dropdown in the title bar lets users switch focus areas (e.g LLM version or data source). Single or multi-selection variants can be used depending on the use case. |

Visual branding elements and content

The Chatbot branding elements follow EMBL brand guidelines but can be updated to suit your use case. For advice on branding updates please contact the EMBL Communications Team.

Texts shown in the examples are placeholder content. Please review and update all wording to fit your your project needs and ensure it meets legal, accessibility and organisational requirements.

Accessibility

The component targets WCAG 2.1 AA accessibility standard.

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack