Web Settings
The Web Settings tool allows you to customize the appearance and behavior of your conversational flow when deployed as a web chatbot. This includes branding, colors, and display text.
Accessing Web Settings
- Click the Settings button (gear icon) in the top bar
- The Settings panel opens with two tabs: General and Customization
General Tab
The General tab contains basic flow information and import/export tools.
Flow Information
| Field | Description | Rules |
|---|---|---|
| Label | Display name of the flow | Any text |
| Alias | URL-friendly identifier | No hyphens at start/end, no consecutive hyphens |
| Description | Brief description of the flow | Optional |
Alias Rules
The alias is used in the web chatbot URL. It must follow these rules:
- Can contain letters, numbers, and single hyphens
- Cannot start or end with a hyphen
- Cannot have consecutive hyphens (
--) - Example valid:
onboarding-flow-v2 - Example invalid:
-my-flow-,my--flow
Import/Export
The General tab also provides access to Import & Export functionality.
Customization Tab
The Customization tab lets you personalize the chatbot's appearance.
Logo
Upload your company or product logo:
- Click the upload area to select an image
- Supported formats: PNG, JPG, SVG
- Preview shows how it will appear in the chatbot header
- Click the trash icon to remove the current logo
Display Name
The name shown in the chatbot header:
- Appears next to the logo
- Typically your company or product name
- Keep it short for mobile compatibility
Description
A brief description shown below the display name:
- Appears in the welcome screen
- Can describe the purpose of the chatbot
- Example: "Hi! I'm here to help you get started"
Avatar
The chatbot's profile image:
- Appears next to messages from the bot
- Upload a custom image or icon
- Recommended: square image, at least 64x64 pixels
- Supported formats: PNG, JPG, SVG
Primary Color
The main accent color for the chatbot:
- Affects buttons, links, and highlights
- Click the color picker to select
- Enter a hex code for precise colors (e.g.,
#3B82F6) - Consider your brand guidelines when choosing
Button Text
The text displayed on the start button:
- Appears on the initial chatbot button/launcher
- Example: "Start Chat", "Get Help", "Begin"
- Keep it action-oriented and concise
Live Preview
As you make changes in the Customization tab, a live preview updates in real-time:
Welcome View
Shows how the initial chatbot screen appears:
- Logo and display name
- Description text
- Start button with your custom text
Chat View
Shows how the conversation interface appears:
- Avatar in message bubbles
- Primary color in action elements
- Overall look and feel
Saving Changes
Changes are saved automatically when you:
- Switch between tabs
- Close the settings panel
- The system shows a saving indicator
Best Practices
Branding Consistency
- Use your brand's official logo
- Match the primary color to your brand palette
- Use consistent terminology in display name and descriptions
Mobile Optimization
- Keep display names short (under 20 characters)
- Use legible fonts in logo images
- Test the preview at different sizes
Accessibility
- Ensure sufficient contrast between primary color and white
- Use clear, descriptive button text
- Avoid small or hard-to-read logo text
Configuration Persistence
Web settings are saved separately from the flow content:
- Changes persist across flow versions
- Exporting a flow includes web configuration
- Importing a flow can update web configuration
Troubleshooting
Logo doesn't appear
- Check the image format (PNG, JPG, SVG supported)
- Verify the file size isn't too large
- Try uploading again after clearing browser cache
Color doesn't update
- Ensure the hex code is valid (6 characters after #)
- Refresh the preview panel
- Save and reopen the settings
Preview doesn't match live chatbot
- Clear browser cache on the chatbot page
- Ensure changes are saved
- Check if you're viewing the correct flow version