- Colour for buttons and progress: Customize the primary color used for interactive elements and progress indicators
- Page background colour: Set the overall background color of the conversation interface
Overview
The Theme Editor allows you to fully customize the visual appearance of your Wizflow conversations, providing complete control over colors, styling, and branding to match your organization’s design requirements.Getting Started
1
Access Preview Mode
Click the Preview button in your flow editor
2
Open Theme Editor
Look for the Theme Editor panel on the right side of the preview window
3
Start Customizing
The editor will open with all available customization options
Page Styling
Display Modes
Window
Display the conversation in a modal window overlay
Full Page
Show the conversation as a full-page experience
Color Customization
Primary Colors
Primary Colors
Input Styling
Input Styling
- Input field border colour: Define the border color for text input fields and form elements
Side Panel Configuration
Position Controls
Position the panel on the left side of the interface
Features
Progress Bar: Toggle the progress bar visibility to show or hide user progress through the conversation flow.
Question Styling
Customize how questions appear to users:| Element | Description |
|---|---|
| Heading colour | Set the color for question headings and titles |
| Question text colour | Define the color for question body text |
| Question background | Customize the background color behind questions |
User Message Styling
Control the appearance of user responses:| Element | Description |
|---|---|
| User message text colour | Set the text color for user messages |
| User message background | Define the background color for user message bubbles |
Images and Branding
Logo and Visual Elements
Upload Logo
Add your company logo (max width 420px)
Appears prominently in the conversation interface
Appears prominently in the conversation interface
Upload Panel Picture
Add a decorative or informational image (max width 420px)
Enhances the visual appeal of the side panel
Enhances the visual appeal of the side panel
Saving Your Theme
Save Update
Apply changes to the current theme configuration
Updates the existing theme with your modifications
Updates the existing theme with your modifications
Save as New Theme
Create a new theme based on current settings
Build a library of branded themes for different use cases
Build a library of branded themes for different use cases
Best Practices
Color Accessibility: Ensure sufficient contrast between text and background colors for users with visual impairments.
Brand Consistency: Use your organization’s official brand colors and maintain consistency with your website and other digital properties.
Design Guidelines
- Choose colors that enhance readability
- Avoid overly bright or distracting color combinations
- Test the theme across different devices and screen sizes
- Upload high-quality logo images for professional appearance
Technical Notes
- Logo and panel images are automatically optimized for web display
- Maximum image width is 420px to ensure proper scaling
- Color values are stored as hex codes (e.g., #9D58FF)
- Themes are applied in real-time during preview mode