Widget Customization

Make your live chat widget perfectly match your brand identity. Customize colors, themes, positioning, and appearance to create a seamless user experience that feels native to your website.

Customization Overview

Fiko's widget customization system gives you complete control over your chat widget's appearance and behavior. All changes are applied in real-time with live preview, so you can see exactly how your widget will look before publishing.

Colors & Themes

Custom colors and pre-built themes

Position & Size

Flexible positioning and spacing

Mobile Ready

Responsive design options

Live Preview

See changes instantly

Accessing Customization Settings

Widget customization is available through your Fiko dashboard. You can modify your widget at any time, preview changes live, and publish them when you click Save Changes.

Navigate to Widget Management

Access your widget's customization interface from your Fiko dashboard.

Go to Settings → Channels → Fiko Widgets
Find your widget in the list and click "View Config"
Select "Customization" from the widget management menu
The customization interface opens with live preview

Live Preview: The preview updates as you edit the widget. Use it to test your settings, then click Save Changes to publish the updated configuration.

Appearance Settings

Control every aspect of your widget's visual appearance to ensure it complements your website design and reinforces your brand identity.

Widget Style

Choose between different widget styles to match your website's aesthetic.

Bubble: Classic circular chat bubble (default)
Bar: Rectangular bar style for modern designs
Custom: Upload your own icon or logo

Visibility Options

Control when and how your widget appears to visitors.

Always Visible: Widget is always shown (recommended)
Hide Until Activated: Appears when triggered by user action
Always Hide: Keeps the widget hidden until you enable it again

Advanced Features

Enable additional features to enhance user experience.

Agent Photos: Show team member photos in chat
Typing Indicators: Display when agents are typing
Sound Notifications: Audio alerts for new messages
Timestamps: Show message timestamps
File Attachments: Allow visitors to send files

Position & Layout

Position your widget optimally for your website layout and user experience. Consider your site's design and user behavior when choosing placement.

Choose Widget Position

Select the best position for your website layout.

Bottom Right (Default)

Most common position, doesn't interfere with navigation or content.

Recommended

Bottom Left

Good for right-to-left languages or specific design preferences.

Alternative

Spacing Controls:

Side Spacing: Distance from screen edge (default: 20px)
Bottom Spacing: Distance from bottom edge (default: 20px)

Themes & Colors

Create a cohesive brand experience by customizing your widget's color scheme. Choose from preset themes or create custom color combinations.

Theme Selection

Choose between light and dark themes as your base.

Light Theme

Clean, bright appearance

Dark Theme

Modern, sleek design

Color Customization

Customize individual color elements to match your brand perfectly.

Blue

Professional and trustworthy

Green

Growth and success

Purple

Creative and innovative

Orange

Energetic and friendly

Red

Urgent and important

Teal

Calm and balanced

Color Psychology: Different colors evoke different emotions. Blue builds trust, green suggests growth, while orange creates energy. Choose colors that align with your brand personality.

Advanced Color Settings

Primary Color: Main widget and button colors
Secondary Color: Accent colors and highlights
Background Colors: Chat window and message bubbles
Text Colors: Message text and UI elements
Agent/Customer Colors: Different colors for agent vs customer messages

Mobile Optimization

Ensure your widget works perfectly on mobile devices with responsive design options and mobile-specific customizations.

Mobile Settings

Optimize your widget for mobile users.

Enable on Mobile: Toggle widget visibility on mobile devices
Mobile Positioning: Automatic adjustment for small screens
Touch Targets: Larger buttons for easy finger interaction
Mobile Spacing: Optimized spacing for mobile viewports

Mobile Best Practices

Test on actual mobile devices, not just browser dev tools
Ensure the widget doesn't block important mobile navigation
Consider thumb-friendly positioning on larger phones
Test both portrait and landscape orientations

Live Preview System

The live preview system lets you see exactly how your widget will look on your website before making changes public. Test different options safely.

Real-time Preview Features

Instant visual feedback for all changes
Test different screen sizes and orientations
Preview both minimized and expanded widget states
Simulate conversation flow and interactions
Test color combinations and themes

Preview vs Live Site: The preview shows your widget in an isolated environment. Always test changes on your actual website to ensure they work well with your specific layout and CSS.

Customization Best Practices

Follow these guidelines to create an effective and user-friendly chat widget that enhances your customer support without compromising user experience.

Brand Consistency

Use colors that match your website's color palette
Maintain consistent typography and styling
Upload your logo or brand icon if using custom style
Ensure the widget feels like a natural part of your site
Test across different pages to ensure consistency

User Experience

Position the widget where it's noticeable but not intrusive
Use contrasting colors for good visibility
Ensure the widget doesn't block important content
Test with different user personas and use cases
Consider your target audience's preferences and behavior

Performance Considerations

Avoid overly complex animations that slow loading
Optimize any custom images or logos for web
Test widget loading speed on different devices
Monitor how the widget affects overall page performance
Use built-in themes when possible for better optimization

Accessibility & Mobile

Ensure sufficient color contrast for readability
Test with screen readers and keyboard navigation
Make touch targets large enough for mobile users
Verify widget works across all device sizes
Consider users with disabilities in your design choices

Advanced Configuration Customize Your Widget