Customizing Agent Appearance

Connect allows you to customize the appearance of your agents using custom CSS. This feature lets you align the agent's visual style with your brand or website design.

Custom CSS Capabilities

With the custom CSS feature, you can modify various aspects of the agent interface:

• Color schemes
• Typography
• Spacing and layout
• Button and input styling
• Chat bubble appearance
• Animation effects

How to Add Custom CSS

1. From your Connect dashboard, navigate to your agent's settings page
2. Go to the "Appearance" or "Customization" section
3. Find the "Custom CSS" file upload option
4. Create and upload a CSS file with your custom styles

CSS Selectors and Structure

The Connect agent interface uses the following CSS class structure for styling:

/* Root variables for theme colors */
:root {
  --primary: #0056b3;
  --primary-light: #007bff;
  --primary-dark: #004494;
  --text: #212529;
  --border: #dee2e6;
}

/* Main container */
.app { }

/* Messages container */
.agent-messages { }

/* Message styles */
.message.user { }
.message.assistant { }

/* Message sender label */
.message-sender { }

/* Message content */
.message-content { }

/* Input form */
.agent-form { }
.agent-input { }
.send-button { }

/* Code blocks */
.code-block-wrapper { }
.code-block { }

Example Custom CSS

Here's an example of a custom CSS file:

:root {
  --primary: #0056b3;
  --primary-light: #007bff;
  --primary-dark: #004494;
  --secondary: #6c757d;
  --success: #28a745;
  --danger: #dc3545;
  --warning: #ffc107;
  --info: #17a2b8;
  --light-bg: #f8f9fa;
  --dark-bg: #343a40;
  --text: #212529;
  --text-light: #6c757d;
  --border: #dee2e6;
}

.app {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
  color: var(--text);
}

.agent-messages {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 1.5rem;
}

.message.user {
  background-color: #e9f0f8;
  border-radius: 12px 12px 0 12px;
  padding: 1rem 1.25rem;
  max-width: 85%;
  align-self: flex-end;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.message.assistant {
  background-color: white;
  border: 1px solid #e9ecef;
  border-radius: 12px 12px 12px 0;
  padding: 1rem 1.25rem;
  max-width: 85%;
  align-self: flex-start;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.agent-input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  background-color: white;
  color: black !important;
  border-radius: 6px;
}

.send-button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

Best Practices

When customizing your agent with CSS:

1. Test Across Devices: Ensure your styling works on desktop and mobile
2. Maintain Readability: Keep text contrast high for accessibility
3. Be Selective: Change only what's necessary to match your brand
4. Keep File Size Small: Optimize your CSS for performance
5. Use the Inspector: Browser developer tools can help identify class names

Tips for Common Customizations

Changing Colors

/* Define custom colors in root variables */
:root {
  --primary: #3366cc; /* Your brand color */
  --primary-light: #5588ee;
  --primary-dark: #224488;
}

/* Apply to buttons and interactive elements */
.send-button {
  background: var(--primary);
  color: white;
}

/* Style user messages */
.message.user {
  background-color: var(--primary-light);
  color: white;
}

Typography Adjustments

/* Change overall font family */
.app {
  font-family: 'Your Brand Font', sans-serif;
}

/* Style message content */
.message-content {
  font-size: 16px;
  line-height: 1.6;
}

/* Style code blocks */
.code-block {
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.875rem;
}

By using these customization options with the correct class names, you can create a more cohesive experience that aligns with your brand while maintaining the functionality of the Connect platform.