Skip to main contentOnce you’ve created your widget integration, you can customize its appearance and behavior to perfectly match your brand and provide the best user experience. This guide will show you how to customize every aspect of your widget.
Step 1: Navigate to Your Integration
- Log into your Marketrix account at app.marketrix.ai
- Click “Integrations” in the left sidebar
- Click on your widget integration to open it
Step 2: Access Customization Settings
- Click “Customize” or “Edit Widget” button
- You’ll see the customization interface with various options
- Make your changes and save them
Appearance Customization
Primary Color:
- What it affects: Main widget color, header background, primary buttons
- How to change: Click the color picker and select your brand color
- Tips: Use your brand’s primary color for consistency
Secondary Color:
- What it affects: Accent elements, secondary buttons, highlights
- How to change: Click the color picker and select a complementary color
- Tips: Use a color that complements your primary color
Text Color:
- What it affects: All text in the widget
- How to change: Select a color that provides good contrast
- Tips: Use dark colors on light backgrounds, light colors on dark backgrounds
Background Color:
- What it affects: Widget background and message bubbles
- How to change: Choose a color that matches your website
- Tips: Use light colors for better readability
Font Family:
- What it affects: All text in the widget
- Options: System fonts, web fonts, custom fonts
- Tips: Use fonts that match your website’s typography
Font Size:
- What it affects: Text size throughout the widget
- Options: Small, Medium, Large
- Tips: Choose a size that’s readable on all devices
Font Weight:
- What it affects: Text boldness and emphasis
- Options: Light, Normal, Bold
- Tips: Use bold for headers and important text
Widget Size:
- What it affects: Overall widget dimensions
- Options: Small, Medium, Large
- Tips: Medium size works well for most websites
Widget Position:
- What it affects: Where the widget appears on your website
- Options: Bottom Right, Bottom Left, Top Right, Top Left
- Tips: Bottom right is most familiar to users
Widget Shape:
- What it affects: Widget border radius and shape
- Options: Square, Rounded, Very Rounded
- Tips: Rounded corners look more modern and friendly
Content Customization
Header Text:
- What it affects: The main title in your widget
- Examples: “How can we help you?”, “Chat with us”, “Need help?”
- Tips: Use a friendly, welcoming tone
Header Icon:
- What it affects: Icon displayed in the widget header
- Options: Default icons, custom icons, no icon
- Tips: Choose an icon that represents your brand or service
Greeting Message:
- What it affects: Initial message users see when opening the widget
- Examples: “Hello! I’m here to help. What can I do for you today?”
- Tips: Set a friendly tone and explain what the agent can help with
Greeting Tone:
- What it affects: The personality and style of the greeting
- Options: Professional, Friendly, Casual, Enthusiastic
- Tips: Match your brand’s personality and voice
Quick Action Chips
What they are: Pre-defined buttons that users can click for common actions
Enable Quick Actions:
- What it affects: Whether quick action chips are shown
- Options: Enable, Disable
- Tips: Enable for common user actions
Customize Quick Actions:
- What it affects: The specific actions available to users
- Examples: “Get Help”, “Track Order”, “Contact Support”, “View Products”
- Tips: Choose actions that are most relevant to your users
Behavior Customization
When to Show Widget:
- Always show: Widget is always visible
- Show after delay: Widget appears after a few seconds
- Show on scroll: Widget appears when user scrolls down
- Show on exit intent: Widget appears when user tries to leave
Tips: Always show for maximum accessibility, but consider your website’s user experience
Auto-open Settings:
- Don’t auto-open: Users must click to open (Recommended)
- Auto-open after delay: Opens automatically after a few seconds
- Auto-open on scroll: Opens when user scrolls down the page
Tips: Don’t auto-open to avoid being intrusive
Interaction Modes
Tell Mode (Answering Questions):
- Enable/Disable: Control whether this mode is available
- Customize: Set specific behavior for this mode
- Tips: Enable for customer support and information
Show Mode (Demonstrating Tasks):
- Enable/Disable: Control whether this mode is available
- Customize: Set specific behavior for this mode
- Tips: Enable for tutorials and guidance
Do Mode (Performing Actions):
- Enable/Disable: Control whether this mode is available
- Customize: Set specific behavior for this mode
- Tips: Enable for task automation and form filling
Advanced Customization
Custom CSS
What it is: Custom CSS code to further customize your widget’s appearance
How to use:
- Click “Advanced” or “Custom CSS” option
- Add your custom CSS code
- Preview the changes
- Save your customization
Tips: Use custom CSS for advanced styling, but test thoroughly
Custom JavaScript
What it is: Custom JavaScript code to add advanced functionality
How to use:
- Click “Advanced” or “Custom JavaScript” option
- Add your custom JavaScript code
- Test the functionality
- Save your customization
Tips: Use custom JavaScript for advanced features, but be careful with compatibility
Integration Settings
API Configuration:
- What it affects: How the widget connects to your agent
- Options: Standard, Custom, Advanced
- Tips: Use standard configuration unless you need custom features
Authentication Settings:
- What it affects: How the widget authenticates with your account
- Options: Standard, Custom, Advanced
- Tips: Use standard authentication unless you need custom security
Brand Customization
Logo and Branding
Widget Logo:
- What it affects: Logo displayed in the widget
- How to add: Upload your logo image
- Tips: Use a high-quality logo that’s readable at small sizes
Brand Colors:
- What it affects: Overall widget color scheme
- How to set: Use your brand’s color palette
- Tips: Maintain consistency with your website’s branding
Brand Voice
Tone and Style:
- What it affects: How your agent communicates
- Options: Professional, Friendly, Casual, Enthusiastic
- Tips: Match your brand’s personality and voice
Language and Terminology:
- What it affects: Specific words and phrases used
- How to customize: Update agent instructions
- Tips: Use terminology that matches your brand
Mobile Customization
Mobile-Specific Settings
Mobile Layout:
- What it affects: How the widget appears on mobile devices
- Options: Responsive, Mobile-optimized, Custom
- Tips: Use responsive design for best results
Mobile Behavior:
- What it affects: How the widget behaves on mobile
- Options: Standard, Touch-optimized, Custom
- Tips: Optimize for touch interactions
Touch Optimization
Touch Targets:
- What it affects: Size of clickable elements
- Options: Small, Medium, Large
- Tips: Use larger touch targets for better mobile experience
Touch Gestures:
- What it affects: How users interact with the widget
- Options: Standard, Enhanced, Custom
- Tips: Use standard gestures for familiarity
Testing Your Customizations
Preview Changes
Live Preview:
- What it does: Shows how your widget will look with changes
- How to use: Make changes and see them in real-time
- Tips: Use preview to test different options
Test on Different Devices:
- What it does: Shows how your widget looks on various devices
- How to use: Test on desktop, tablet, and mobile
- Tips: Ensure your widget works well on all devices
Validate Customizations
Check Functionality:
- What to verify: All features work correctly
- How to test: Test each interaction mode and feature
- Tips: Test thoroughly before deploying
Check Appearance:
- What to verify: Widget looks good and matches your brand
- How to test: Review on different devices and browsers
- Tips: Ensure consistent appearance across platforms
Common Customization Issues
Appearance Problems
Widget doesn’t match brand:
- Problem: Colors, fonts, or styling don’t match your brand
- Solutions: Update colors, fonts, and styling to match your brand
- Tips: Use your brand’s style guide for consistency
Widget looks unprofessional:
- Problem: Widget appearance doesn’t look polished
- Solutions: Use professional colors, fonts, and styling
- Tips: Keep design clean and simple
Functionality Issues
Customizations break functionality:
- Problem: Custom CSS or JavaScript breaks widget features
- Solutions: Review custom code and fix compatibility issues
- Tips: Test thoroughly after making custom changes
Widget doesn’t work on mobile:
- Problem: Widget doesn’t function properly on mobile devices
- Solutions: Check mobile-specific settings and test on mobile
- Tips: Use responsive design principles
Best Practices
Design Principles
Keep it simple:
- Don’t over-customize
- Focus on essential elements
- Maintain clean, professional appearance
- Ensure good usability
Match your brand:
- Use your brand colors and fonts
- Maintain consistent design language
- Include your logo and branding
- Match your website’s style
User Experience
Optimize for usability:
- Make widget easy to find and use
- Ensure clear, readable text
- Use appropriate sizing and positioning
- Test on different devices
Provide clear guidance:
- Use descriptive text and labels
- Explain what the agent can help with
- Provide clear instructions
- Set appropriate expectations
Next Steps
After customizing your widget, you’re ready to:
- Test your integration - Ensure everything works correctly
- Monitor performance - Track usage and effectiveness
- Gather user feedback - Improve based on user input
- Iterate and improve - Continuously enhance your widget
A well-customized widget that matches your brand and provides excellent user experience will significantly improve your customer support and user engagement.
Getting Help
If you need assistance with widget customization:
- Check the troubleshooting guide for common issues
- Review customization documentation for detailed information
- Test your customizations thoroughly before deploying
- Contact support for additional help
You’re now ready to create a widget that perfectly matches your brand and provides an excellent user experience! 🚀 
