Designing Chat UI in Settings

This guide explains how to customize the appearance, behavior, and functionality of your chatbot using the Settings section.

Overview

The Settings section allows you to customize various aspects of your chatbot interface, including branding, colors, behavior, and post-submission actions. These settings control how your chatbot looks and behaves to end users.

Accessing Settings

1. Open your chatbot in the flow builder
2. Look for and click the "Settings" button (usually represented by a gear icon) in the top toolbar
3. The Settings panel with multiple tabs will open

Settings Tabs and Options

Info Tab

Chatbot Title

• This is the name of your chatbot that will be displayed to users
• Appears at the top of the chat interface
• Should be descriptive and reflect the bot's purpose
• To change: Enter your new title in the text field

Description

• Serves as the welcome message or introductory text
• Shown when users first open the chat
• Should clearly communicate what the bot does
• To change: Enter your description in the text area

Chatbot Logo

• Upload your company or project logo
• Appears in the chat header
• Enhances brand recognition
• Supported formats: JPEG, PNG, GIF, WebP
• Maximum size: 5MB
• To add: Click the upload area and select an image file
• To remove: Click the 'X' button over the current logo

OG Image (SEO)

• Image used when your chat is shared on social media
• Recommended size: 1200x630px
• Appears as the preview image in social shares
• To add: Click the upload area and select an image file
• To remove: Click the 'X' button over the current image

Settings Tab

Message Delay

• Controls the pause between messages appearing
• Measured in seconds (0.5 means half a second)
• Creates a more natural conversation feel
• Default is 0.5 seconds
• To adjust: Use the slider or enter a decimal value

Chat Interface Type

Choose between two display modes:

Full Width Mode:

• Chat takes up the entire browser width
• Best for dedicated chat pages
• Provides maximum space for conversation
• To select: Toggle to Full Width option

Popup Mode:

• Chat appears as a floating bubble in the corner
• Less intrusive on content-heavy pages
• Users click to expand the chat
• To select: Toggle to Popup option

Popup Position

Applies only when using Popup Mode:

Bottom Right:

• Chat bubble appears in the bottom-right corner
• Most common position, familiar to users
• To select: Choose Bottom Right option

Center:

• Chat appears in the middle of the screen
• More attention-grabbing
• To select: Choose Center option

Email Collection

Enable/Disable Email Collection:

• Controls whether the system collects and stores email addresses
• Enabled by default
• Toggle to disable if you don't need email collection
• When disabled, email collection features will be inactive

Notification Email

• Email address where submission notifications will be sent
• Each form submission triggers a notification
• Only accepts one email address per bot
• To change: Enter a valid email address
• Important: Double-check for typos to avoid missed notifications

Theme Tab

Primary Color

• Main color used throughout the chat interface
• Applied to buttons, accents, and highlights
• Should align with your brand colors
• To change: Click the color picker or enter hex code

Secondary Color

• Supporting color for backgrounds and subtle elements
• Provides contrast with primary color
• Used for less prominent interface elements
• To change: Click the color picker or enter hex code

Color Presets

• Quick color scheme options
• Includes Indigo, Blue, Green, Purple, Pink, Orange
• Provides professional color combinations
• To use: Click on your preferred preset

Chat Icon Style

• Visual style for the chat launch icon (in popup mode)
• Options: Default, Bubble, Minimal
• To change: Select from dropdown menu

Chat Icon Color

• Color of the floating chat icon
• Visible when chat is minimized (popup mode)
• Should be noticeable against your website
• To change: Click the color picker or enter hex code

Thank You Tab

Enable Thank You Page

• Turns on/off the custom thank you message
• After form completion, users see this message
• To toggle: Use the switch control

Enable Try Again Button

• Determines if users can restart the conversation
• Appears after completion if enabled
• Allows users to resubmit if needed
• To toggle: Use the switch control

Thank You Message

• Custom message displayed after form completion
• Can be plain text or formatted with Markdown
• Should acknowledge completion and provide next steps
• To change: Enter your message in the text area

Advanced Options

Remove Branding

• Removes "Powered by Chatty Form" attribution
• Available on Pro and Elite subscription plans
• Makes the chat feel like a native part of your site
• To enable: Toggle the switch (subscription required)

Best Practices for UI Design

Consistent Branding

• Use colors that match your brand guidelines
• Upload a logo that represents your organization
• Ensure all visual elements feel cohesive

User Experience

• Set an appropriate message delay (0.5-1 second feels natural)
• Choose a chat interface type that fits your site's purpose
• Write clear, helpful descriptions and thank you messages

Accessibility

• Ensure sufficient contrast between text and background colors
• Use descriptive text for your chatbot title and description
• Consider how colors appear to users with color vision deficiency

Professional Appearance

• Use high-quality images for your logo and OG image
• Write messages that sound natural and professional
• Test how your chat appears on different devices

Previewing Your Changes

• Changes in settings take effect immediately in the preview
• Use the test chat panel to see how your settings look
• Adjust settings until the appearance matches your needs

Saving Your Settings

• Settings are saved automatically when you click "Save"
• Look for success notifications confirming your changes
• Return to the flow builder to continue working on your conversation

Troubleshooting Common Issues

Colors Not Changing

• Verify the hex code is properly formatted (#XXXXXX)
• Ensure you've clicked "Save" after making changes
• Clear browser cache if changes don't appear

Logo Not Uploading

• Check that the file format is supported (JPEG, PNG, GIF, WebP)
• Verify the file size is under 5MB
• Ensure you have internet connectivity

Chat Not Appearing Correctly

• Check that the chat interface type matches your needs
• Verify popup position is appropriate for your layout
• Ensure colors have sufficient contrast

Need Help?

• Review the settings carefully for any incomplete options
• Test the chat interface to ensure all changes work as expected
• Contact support if you're experiencing persistent issues