💅 Styling your AI Assistant

​

Visual Customization

​

Brand Customization

​

Colors and Theme

1. Primary Colors
   • Choose colors that match your brand
   • Set primary, secondary, and accent colors
   • Ensure good contrast for accessibility
2. Theme Options
   • Light theme for professional appearance
   • Dark theme for modern look
   • Auto theme that adapts to user preference

​

Logo and Branding

1. Logo Upload
   • Upload your company logo
   • Choose logo placement and size
   • Ensure logo is visible and clear
2. Brand Elements
   • Add your company name
   • Include tagline or description
   • Match your website’s design language

​

Chat Widget Styling

​

Widget Appearance

​

Animation and Behavior

1. Entrance Animation
   • Slide in from side
   • Fade in effect
   • Bounce animation
   • Custom animations
2. Typing Indicators
   • Enable/disable typing animation
   • Customize typing speed
   • Add typing sound effects

​

Conversation Styling

​

Message Appearance

1. Message Bubbles
   • User message styling
   • Assistant response styling
   • Different colors for each type
   • Rounded or square corners
2. Text Formatting
   • Font family and size
   • Text color and weight
   • Line spacing and alignment
   • Link and button styling

​

Interactive Elements

1. Buttons and Cards
   • Suggested response buttons
   • Quick action buttons
   • Product cards
   • Image galleries
2. Input Field
   • Placeholder text
   • Send button styling
   • Character limits
   • Auto-complete suggestions

​

Advanced Customization

​

CSS Customization

/* Custom chat widget styling */
.neuraltalk-widget {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Custom message styling */
.neuraltalk-message {
  font-family: 'Your Font', sans-serif;
}

​

JavaScript Customization

// Custom event handlers
window.addEventListener('neuraltalk:message', function(event) {
  console.log('New message:', event.detail);
});

​

Mobile Responsiveness

​

Mobile Optimization

• Touch-friendly buttons: Ensure buttons are large enough for touch
• Responsive design: Adapts to different screen sizes
• Mobile-specific features: Swipe gestures, mobile keyboards
• Performance: Optimized for mobile networks

​

Testing on Devices

1. Test on Multiple Devices
   • iPhone and Android phones
   • Tablets and iPads
   • Different screen sizes
   • Various browsers
2. User Experience Testing
   • Easy to use on mobile
   • Fast loading times
   • Clear visual hierarchy
   • Accessible design

​

Accessibility

​

WCAG Compliance

• Color Contrast: Ensure sufficient contrast ratios
• Keyboard Navigation: Support keyboard-only navigation
• Screen Readers: Compatible with assistive technologies
• Focus Indicators: Clear focus states for navigation

​

Inclusive Design

• Font Sizes: Readable text sizes
• Color Blindness: Don’t rely solely on color
• Motor Impairments: Large touch targets
• Cognitive Load: Clear, simple interface

​

Preview and Testing

​

Live Preview

1. Real-time Preview
   • See changes instantly
   • Test on different devices
   • Preview with sample conversations
2. A/B Testing
   • Test different designs
   • Compare user engagement
   • Optimize based on data

​

Quality Assurance

• Cross-browser Testing: Chrome, Firefox, Safari, Edge
• Device Testing: Desktop, tablet, mobile
• Performance Testing: Load times and responsiveness
• User Testing: Get feedback from real users

​

Best Practices

​

Design Principles

1. Consistency
   • Match your website’s design
   • Use consistent colors and fonts
   • Maintain brand identity
2. Simplicity
   • Clean, uncluttered interface
   • Easy to understand navigation
   • Clear call-to-action buttons
3. Professionalism
   • High-quality visuals
   • Polished animations
   • Error-free implementation

​

Next Steps

• Human Handover Setup
• Lead Collection
• Sharing Assistant