alpha

This version is in early development and is subject to change and therefore not ready for wide use. There may be other stable versions available.

Chatbot Welcome element

Initial welcome screen for the chatbot, displaying a greeting and suggested questions.

github location npm version

Usage

When to use this component

Use the chatbot welcome component to:

  • Provide a clear introduction to the chatbot's purpose and capabilities
  • Guide users with suggested questions or topics they can explore
  • Set expectations about what kind of help or information the chatbot can provide
  • Create a friendly, approachable first impression for the conversational interface
  • Reduce user uncertainty about how to start interacting with the chatbot

The welcome screen is particularly effective when users might be unfamiliar with chatbots or when the chatbot serves specific, specialized functions that benefit from explanation.

When not to use this component

This component is not to be used independent of the standalone or modal chatbot containers as it may not work correctly

Avoid the welcome screen when:

  • Users are already familiar with the chatbot and frequent returning users would find it repetitive
  • The chatbot's purpose is immediately obvious from the context
  • Screen space is limited and you need to maximize the conversation area
  • The chatbot is embedded in a workflow where users have a specific, urgent task to complete
  • You have evidence that users prefer to jump straight into asking questions

For experienced users or simple use cases, a minimal interface that goes directly to the input field may be more efficient.

Implementation

The welcome component appears when the chatbot is first opened and includes:

  • A welcoming title and description
  • Brief explanation of the chatbot's capabilities
  • Clickable suggestion prompts to help users get started
  • Visual branding elements like icons or logos

Users can either click on a suggested question or type their own query to begin the conversation.

Variants

Examples

Installation info
yarn add --dev @visual-framework/vf-chatbot-welcome

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-chatbot-welcome/index.scss";

Changelog

Changelog

Assets



File system location: components/vf-chatbot-welcome

Find an issue on this page? Propose a change or discuss it.