Chatbot Builder After creating a chatbot, you can customize the chatbot functionality and styling. You can tailor the chatbot to your company’s branding and specific needs. Here’s a breakdown of how you can customize various aspects of your chatbot:

​
Pipeline

Chatbot Pipeline The Pipeline section allows you to choose the desired pipeline and configure the data flow and processes your chatbot will follow.
  • Pipeline Selection: To choose any desired pipeline.
  • Input: Define the input your chatbot will handle.
  • Output: Specify the node to give the response back to the user.
  • Edit/New: Edit or create a new pipeline.

​
Basics

Chatbot Basics The Basics section allows you to configure fundamental settings for your chatbot to align with your brand and user interaction preferences:
  • Copilot vs. Chatbot: Choose a variant between Copilot (all chats in left alignment) or Chatbot (left and right alignment).
  • Disclaimer: Add a disclaimer message to inform users about data usage or other legal considerations.
  • Message Limit Per Conversation: Set a limit on the number of messages per conversation to manage interaction length.
There are some options that you can use:
  • Allow Stop Generation: Enable users to stop the bot’s response generation.
  • Keep Chat Open: Decide whether the chat remains open after a session.
  • Allow Clear Chat: Allow users to clear their chat history.
  • Show Remaining Message Info: Display information about remaining messages in a session.
  • Turn On User Feedback: Enable user feedback collection to improve chatbot performance.

​
Message Senders

Chatbot Message Senders The Message Senders section lets you personalize how messages are displayed in the chatbot interface. Here’s a breakdown of the customization options:
  • User Name: Define how users are labeled in the chat. This can be a generic term like “User” or a more personalized identifier.
  • Bot Name: Set the name for your chatbot, such as “Assistant,” or a custom name that aligns with your brand.
  • Input Field Placeholder: Customize the placeholder text in the message input field. This text guides users to what to type, such as “Message Assistant.”
  • Response Loader Label: Define the text shown while the chatbot processes a request. For example, it can be a phrase like “Processing Request” to inform users that a response is being generated.

​
Message Prompts

Chatbot Prompts The Message Prompts section allows you to configure how your chatbot initiates and guides conversations. Here’s a breakdown of the customization options:
  • Welcome Message: Set a friendly greeting that users see when interacting with the chatbot. This message can introduce the bot and set the tone for the conversation.
  • Error Message: Define a custom message that appears when the chatbot encounters an error. This helps manage user expectations and maintain a smooth user experience.
  • Suggest Initial Prompts: Enable this option to give users clickable prompts to help start the conversation. These can be based on common queries or topics relevant to your business.
  • Generate Related Questions: This feature automatically generates follow-up questions based on the user’s initial input. It can enhance engagement by suggesting relevant topics for further discussion.
    • Number of Related Questions: You can set the maximum number of follow-up questions displayed (up to 10).
    • Guidelines for Generating Follow-up Questions: Provide specific criteria or topics to guide the generation of these questions, ensuring they align with your business goals and user interests.

​
Welcome Header

Chatbot Welcome Header The Welcome Header section lets you personalize the initial interface users see when interacting with your chatbot. Here’s a detailed breakdown of the customization options:
  • Show Welcome Image: To enhance the visual appeal of the chatbot interface, you can enable or disable the display of a welcome image.
  • Display Image Size: Use a slider to adjust the size of the welcome image to fit your design preferences and ensure it complements the overall layout.
  • Display Name: To reinforce branding, set the name that appears prominently in the header, such as your company or chatbot’s name.
  • Display Description: Add a brief introductory message or tagline that appears below the display name. This can guide users or provide context about the chatbot’s purpose.
You can modify the fonts shown in the chatbot interface as well.
  • Display Name Font Style: Choose between normal, italic, or bold styles for the display name to match your brand’s typography.
  • Display Description Font Style: Select the font style for the description text.
  • Display Name Font Size: Adjust the font size of the display name for emphasis and readability.
  • Display Description Font Size: Set the font size for the description to ensure it is clear and legible.
  • Display Name Font Weight: Customize the thickness of the display name text to make it stand out.
  • Display Description Font Weight: Adjust the weight of the description text for visual balance.
  • Display Name Font Color: Select a color for the display name that aligns with your brand’s color scheme.
  • Display Description Font Color: Choose a color for the description text to ensure it is visually appealing and readable.
  • Display Description Alignment: Align the description text to the left, center, or right to fit the design layout of your chatbot interface.

​
Styling

Chatbot Styling The Styling section allows you to customize the visual appearance of your chatbot to align with your brand’s aesthetics.
  • Selection: Choose from various font styles to match your brand’s typography.
  • Font Size: Using a slider to ensure readability and visual appeal, adjust the font size.
  • Top Bar: Set the color of the top bar to match your brand’s primary color.
  • Background: Choose a background color that complements your overall design.
  • Accent: Select an accent color for interactive elements like buttons and links.
  • User Name and Bot Name: Customize the colors for user and bot names to differentiate them.
  • Input Bubble and Output Bubble: Adjust the colors of message bubbles for both user input and bot output to create a cohesive look.
  • Input Text and Output Text: Set the text colors within the bubbles to ensure clarity and contrast against the bubble colors.

​
Bottom Bar

Chatbot Bottom Bar The Bottom Bar section allows you to configure the appearance and functionality of the bottom part of your chatbot interface.
  • Powered by VectorShift: Enable or disable the “Powered by VectorShift” branding. Depending on your preference for displaying the branding, you can check or uncheck this.
  • Bottom Bar Text: Add custom text to the bottom bar. This could be a tagline, a call to action, or any consistent message you want users to see.
  • Bottom Bar Redirect URL: Provide a URL to which users can be redirected when interacting with the bottom bar. This is useful for directing users to your website or a specific landing page.
  • Bottom Bar Icon URL: Upload a custom icon in the bottom bar. This icon can be a logo or any image representing your brand, enhancing visual branding.

​
Avatars

Chatbot Avatars The Avatars section allows you to personalize the visual representation of the user and the assistant in the chat interface.
  • Assistant Image URL: Upload a custom image to represent the assistant. This can be a logo or a character that aligns with your brand identity.
  • Assistant Message Icon URL: Set an icon for the assistant’s messages. This icon can be different from the main assistant image and helps distinguish message bubbles.
  • Launcher URL: Define an image or icon users will see when launching the chatbot. This can be a recognizable brand element to encourage engagement.
  • Response Loader Icon URL: Customize the icon displayed while the chatbot is processing a response. This can be an animated or static image that fits your brand style.