Skip to main content
You have created a chatbot and it works, but right now it says “VectorShift” at the top, uses a default purple accent, and greets users with a generic welcome message. Before you put it in front of customers, you want it to look and feel like your own product. The chatbot builder gives you full control over the chatbot’s appearance and behavior through eight settings panels. You can change the connected Agent or workflow, rename the bot, apply your brand colors, configure starter prompts, set up a custom launcher icon for embedded widgets, and much more.

What can customization do?

You can match your brand identity with custom colors across the entire interface, set your own bot name and description so users see your product name instead of “VectorShift,” and configure welcome messages with starter prompts that guide users toward the right questions. The builder also lets you enable follow-up question generation, customize the launcher for embedded chatbots, control how long conversations persist for returning visitors, enable file uploads (requires a Chat File Reader node in your pipeline), and cap messages per conversation. The examples below continue with the “Order Support” chatbot from Creating a chatbot, now being branded for an online store.

Step 1. Configure the Agent or pipeline

The Pipeline panel lets you change which Agent or pipeline powers the chatbot or open the editor directly from the builder. Chatbot Pipeline
  • Pipeline Selection lets you switch to a different Agent or pipeline at any time.
  • Input determines which variable receives the user’s message.
  • Output determines which variable returns the chatbot’s reply.
  • Edit / New opens the Agent or pipeline editor so you can modify the connected workflow without leaving the chatbot builder, or create a new one from scratch.

Step 2. Set the basics

The General panel controls the chatbot’s core behavior settings: its disclaimer text, message limits, and several feature toggles. Chatbot General

Disclaimer

Add a disclaimer message that appears to users before they begin chatting. This is useful for informing users about data usage, accuracy limitations, or legal considerations. Leave it blank to show no disclaimer. The AI disclaimer text defaults to: “This AI assistant is provided for informational purposes only. Responses may not always be accurate or complete.”

Message limit per conversation

Set the maximum number of messages a user can send in a single conversation. By default, this is unlimited (no cap). When a limit is set and a user reaches it, they will need to start a new conversation to continue chatting.

Feature toggles

  • Allow Stop Generation lets users click a stop button to cancel the bot’s response while it is being generated.
  • Keep Chat Open controls whether the embedded chat window starts in an open state when the page loads, rather than waiting for the user to click the launcher.
  • Allow Clear Chat adds a button that lets users clear their current conversation history.
  • Show Remaining Message Info displays a counter showing how many messages the user has left when a message limit is set.
  • Turn On User Feedback adds thumbs-up and thumbs-down buttons to each bot response so users can rate the quality of answers.

Step 3. Customize message senders

The Message Senders panel controls the display names and placeholder text in the chat interface. Chatbot Message Senders
  • User Name sets the label shown next to user messages. Defaults to User. For the Order Support chatbot, you might change this to Customer.
  • Bot Name sets the label shown next to bot responses. Defaults to Assistant. Change it to your product name or bot persona, like Order Support.
  • Input Field Placeholder is the hint text shown in the message input box before the user starts typing. Defaults to Write a message.
  • Response Loader Label is the text shown while the chatbot is processing a response. Defaults to Understanding your request.... You could change this to something like Looking up your order... to match the chatbot’s purpose.

Step 4. Configure message prompts

The Message Prompts panel configures the welcome message, error message, suggested starter prompts, and follow-up question generation. Chatbot Prompts

Welcome and error messages

  • Welcome Message is the first message the bot sends when a user opens a new conversation. Use this to set expectations: what the chatbot can help with, what it cannot do, and how to get started.
  • Error Message is displayed when the chatbot encounters a problem running the workflow. A clear error message helps users understand that the issue is temporary and they should try again.

Suggested starter prompts

Toggle Suggest Initial Prompts to show up to four clickable prompts at the start of each conversation. These give users a quick way to begin without having to think of a first question. When enabled, you can fill in up to four prompts:
  • Prompt A through Prompt D each accept a short question or statement that users can click to send immediately. For the Order Support chatbot, these might be: “Where is my order?”, “How do I return an item?”, “What are your shipping options?”, and “I need to update my address.”

Follow-up question generation

Toggle Generate Related Questions (enabled by default) to have the chatbot suggest follow-up questions after each response. This keeps the conversation flowing and helps users discover what else the chatbot can answer.
  • Number of Related Questions controls how many follow-up suggestions appear after each reply. Set this to any value from 1 to 10. Defaults to 3.
  • Guidelines for Generating Follow-up Questions is an optional text field where you can provide instructions that shape the follow-up suggestions. For example: “Focus questions on order tracking, returns, and shipping. Avoid questions about products or pricing.” This prompt is sent to the model that generates the follow-ups (internally, VectorShift uses a separate LLM call to produce these suggestions).

Step 5. Design the welcome header

The Welcome Header panel controls the visual header that appears at the top of the chat interface before the user sends their first message. Chatbot Welcome Header

Image and branding

  • Show Welcome Image toggles the display of a header image. Enabled by default.
  • Display Image Size adjusts the size of the welcome image using a slider.
  • Display Name is the large heading text at the top of the chat. Defaults to VectorShift. Change this to your chatbot’s name or your company name.
  • Display Description is the subtitle text below the display name. Defaults to Hi, how can I assist you today?. Replace this with something specific to your chatbot’s purpose, like Ask me about orders, returns, and shipping.

Typography controls

You have fine-grained control over the text appearance of both the display name and the description:
  • Font Style sets the text to normal, italic, or bold for both the display name and description independently.
  • Font Size adjusts the text size for each element.
  • Font Weight controls the thickness of the text.
  • Font Color sets the text color. Use this to match your brand palette.
  • Display Description Alignment positions the description text to the left, center, or right.

Step 6. Apply your brand styling

The Styling panel is where you apply your brand colors across the entire chatbot interface. Chatbot Styling
  • Font Selection lets you pick a font family for the chatbot. Defaults to Inter.
  • Font Size adjusts the base font size for all chat text.
  • Top Bar color sets the background of the bar at the top of the chat window.
  • Background color controls the main chat area background.
  • Accent color is used for buttons, links, and other interactive elements. Defaults to #513dd9, a deep indigo that matches VectorShift’s own branding. You can enter any valid hex value.
  • User Name and Bot Name colors let you differentiate the sender labels visually.
  • Input Bubble and Output Bubble colors control the background of user and bot message bubbles respectively.
  • Input Text and Output Text colors control the text inside those message bubbles.
For a cohesive look, set the accent color to your primary brand color, then adjust the bubble and text colors to complement it. Test with both light and dark backgrounds to make sure text stays readable.

Step 7. Configure the bottom bar

The Bottom Bar panel configures the footer area at the bottom of the chatbot window. Chatbot Bottom Bar
  • Powered by VectorShift toggle controls whether the “Powered by VectorShift” branding appears in the footer. Enabled by default.
  • Bottom Bar Text lets you add custom text to the footer, such as a tagline or legal notice.
  • Bottom Bar Redirect URL makes the footer text clickable, linking to any URL you specify (your homepage, a support page, etc.).
  • Bottom Bar Icon URL adds a small icon next to the footer text. Provide a URL to your logo or any other image.

Step 8. Set custom avatars

The Avatars panel lets you replace the default VectorShift icons with your own images throughout the chat interface. Chatbot Avatars
  • Assistant Image URL sets the main avatar image for the chatbot. This appears in the welcome header and alongside bot messages.
  • Assistant Message Icon URL sets a smaller icon that appears next to each bot message bubble. This can be different from the main assistant image.
  • Launcher URL sets the icon used for the chatbot launcher button (relevant for embedded chatbots).
  • Response Loader Icon URL customizes the icon shown while the bot is generating a response. You can use an animated GIF here for a loading effect.

Embedded chatbot launcher settings

These settings let you customize the launcher button and its positioning for chatbots using the Website Chatbot (Embedded) template. Select the Embedded template to access them. The Launcher settings for embedded chatbots The launcher is the button that appears on your website and opens the chatbot when clicked.
  • Launcher variant controls the launcher’s appearance. Choose Icon to show just an icon, or Icon + Text to show an icon with a text label next to it.
  • Launcher text is the label shown next to the launcher icon when the Icon + Text variant is selected. Defaults to Chat.
  • Launcher message is a tooltip or prompt message shown near the launcher to encourage users to interact. Defaults to Chat with us now!.
  • Launcher image URL lets you replace the default launcher icon with your own image.
  • Embed position controls which corner of the screen the launcher appears in. Choose Left or Right. Defaults to Right.
  • Bottom spacing sets the distance in pixels between the launcher and the bottom edge of the screen. Defaults to 10.
  • Side spacing sets the distance in pixels between the launcher and the left or right edge of the screen. Defaults to 10.

Conversation persistence (embedded only)

For embedded chatbots, conversation persistence controls whether returning users see their previous conversation when they revisit your website. Persistence is enabled by default. The default duration is 1 week, meaning a user who returns to your site within one week will pick up where they left off. After the persistence window expires, they start a fresh conversation. You can configure the duration using any combination of a quantity and a time unit: minutes, hours, days, weeks, or months. You can also set it to Infinite to never expire — returning users will always pick up their previous conversation.
Longer persistence means returning users pick up where they left off, which is great for ongoing support conversations. Shorter persistence (or disabling it entirely) means each new browser session starts fresh, which works well for transactional use cases like quick lookups.

Next steps

Your chatbot is now fully customized. Head to Sharing and deploying to choose how your users will access it.

Sharing and deploying

Deploy via link, embed on a website, or connect to Slack, WhatsApp, and SMS

Analytics and conversation history

Track usage, review conversations, and export data