Customization

Learn how to customize the appearance and behavior of your Lingu widget through the dashboard.

Dashboard Customization

All visual customization is done through your Lingu Dashboard. This approach has several advantages:

• No code changes required - Update styles without redeploying
• Instant updates - Changes apply immediately to all websites
• Centralized management - One place to control all widgets
• Preview before publishing - See changes in real-time

Accessing Customization Settings

1. Log in to Lingu Dashboard
2. Navigate to Settings → Chatbot Settings
3. Configure your preferences
4. Save changes

Appearance Settings

Colors

Setting	Description	Example
Primary Color	Main accent color for buttons and highlights	#3B82F6 (blue)
Background Color	Chat window background	#FFFFFF (white)
Text Color	Primary text color	#1F2937 (dark gray)
Bot Message Background	Background for AI responses	#F3F4F6
User Message Background	Background for user messages	Primary color

Position

Control where the widget appears on the page:

Position	Description
bottom-right	Default, most common position
bottom-left	Alternative for RTL languages or preference
top-right	For unique layouts
top-left	For unique layouts

Size

Size	Dimensions	Best For
Small	350px × 450px	Mobile-first or minimal footprint
Medium	400px × 550px	Default, balanced size
Large	450px × 650px	Desktop-focused, detailed conversations

Theme

Theme	Description
Light	Clean white background
Dark	Modern dark background
System	Follows user's OS preference

Branding

Logo

Upload your company logo to display in the widget header:

• Recommended size: 120×40 pixels (PNG or SVG)
• Format: PNG, SVG, or JPG
• Placement: Top-left of the chat header

Brand Name

Display your company or product name in the widget header.

Welcome Message

The first message users see when opening the chat:

Hi there! I'm your AI assistant. How can I help you today?

Behavior Settings

Greeting Messages

Configure automatic greeting behavior:

Setting	Description
Initial Greeting	Message shown when chat opens
Return Visitor Greeting	Message for returning users
Inactivity Prompt	Message after user idle time

Fallback Responses

When the AI can't find a relevant answer:

I'm not sure about that, but I'd be happy to connect you with our support team!

Response Style

Style	Description
Professional	Formal, business-appropriate tone
Friendly	Casual, conversational tone
Concise	Brief, to-the-point answers
Detailed	Comprehensive explanations

Language

Set the default language for AI responses:

• English
• French
• Spanish (coming soon)
• More languages planned

CSS Overrides

While most styling is controlled via the dashboard, you can apply CSS overrides if needed:

/* Override widget button color */
#lingu-widget-root .lingu-fab {
  background-color: #FF5722 !important;
}

/* Override chat header */
#lingu-widget-root .lingu-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Hide widget on mobile */
@media (max-width: 768px) {
  #lingu-widget-root {
    display: none !important;
  }
}

Use Sparingly

CSS overrides may break with widget updates. Use dashboard settings when possible.

Isolated Styles

The widget uses isolated CSS that won't conflict with your site:

• All styles are scoped to .lingu-widget-container
• Uses Shadow DOM for complete isolation (where supported)
• High specificity selectors prevent style bleeding
• z-index: 999999 ensures visibility

Responsive Design

The widget is fully responsive by default:

• Desktop: Full-size chat window
• Tablet: Slightly smaller window
• Mobile: Nearly full-screen for better usability

Hiding on Mobile

If you need to hide the widget on mobile devices:

@media (max-width: 768px) {
  #lingu-widget-root {
    display: none !important;
  }
}

Accessibility

The widget includes built-in accessibility features:

• Keyboard navigation - Full keyboard support
• Screen reader support - ARIA labels and roles
• Focus management - Proper focus handling
• Color contrast - WCAG 2.1 AA compliant colors
• Reduced motion - Respects prefers-reduced-motion

Preview & Testing

Before going live:

1. Use the Preview feature in your dashboard
2. Test on different devices and screen sizes
3. Verify color contrast and readability
4. Check keyboard navigation
5. Test with screen readers if applicable

Testing Tips

Open your browser's DevTools and use the device emulator to test on different screen sizes.