Skip to main content
Skip to main contentSkip to navigation
Back to Guides

Customize Chatbot Personality

Configure your chatbot's tone, style, and response patterns to match your brand and communication preferences.

Customization Categories

Appearance

  • Launcher button style and position
  • Chat widget theme and colors
  • Custom CSS for advanced styling
  • Brand logo integration

Personality

  • Tone and communication style
  • Response length and detail level
  • Professional vs casual language
  • Industry-specific terminology

Language

  • Primary language selection
  • Multi-language support
  • Regional language variants
  • Custom language packs

Responses

  • Welcome messages
  • Fallback responses
  • Error handling messages
  • Custom response templates

Step-by-Step Customization

1

Navigate to Chatbot Editor

Go to your dashboard and select the chatbot you want to customize.

2

Access Customization Settings

Click on the 'Customize' or 'Settings' tab in the chatbot editor.

3

Configure Appearance

Set your brand colors, logo, and visual styling preferences.

4

Define Personality

Configure tone, communication style, and response preferences.

5

Set Language Options

Choose primary language and enable multi-language support if needed.

6

Test and Preview

Use the live preview to test your customization changes.

7

Save and Deploy

Save your changes and deploy the updated chatbot.

Best Practices

Brand Consistency

  • • Match your website's color scheme
  • • Use consistent terminology and tone
  • • Include your brand logo when possible
  • • Align with your company's voice guidelines

User Experience

  • • Keep responses clear and concise
  • • Use friendly, approachable language
  • • Provide helpful error messages
  • • Test with your target audience

Plan-Specific Customization

Free Plan

  • • Basic color customization
  • • Standard welcome message
  • • Single language support
  • • Basic error responses

Starter Plan

  • • Custom branding (remove watermark)
  • • Multi-language support (3 languages)
  • • Custom welcome messages
  • • Advanced appearance settings

Pro+ Plans

  • • Custom CSS styling
  • • Advanced personality settings
  • • 8+ languages (Business) / Unlimited (Enterprise)
  • • White-label options

Testing Your Customization

Preview Mode

Use the live preview in the chatbot editor to test your changes before deploying.

→ Pro tip: Test on different devices and browsers to ensure consistency.

User Testing

Test with actual users to ensure the personality and responses feel natural and helpful.

→ Test Script:
// Test different conversation scenarios
const testScenarios = [
  "Hello, I need help with my order",
  "What are your business hours?",
  "I have a complaint about your service",
  "Can you tell me about your products?"
];

// Test with different user types
const userTypes = [
  { type: "new_customer", questions: ["What do you do?", "How much does it cost?"] },
  { type: "returning_customer", questions: ["Where's my order?", "I need to change my subscription"] },
  { type: "technical_user", questions: ["API documentation?", "Integration options?"] }
];

Iterative Improvements

Monitor analytics and user feedback to continuously improve your chatbot's personality and responses.

→ Monitor These Metrics:
  • • User satisfaction ratings
  • • Conversation completion rates
  • • Average response time
  • • Common user questions (identify gaps)

Practical Examples

→ Custom CSS Examples

Paste this CSS into the Custom CSS field in your chatbot's Appearance settings. It applies inside the chat widget iframe — CSS on your host page won't affect the widget.

→ Brand-Aligned Chat Widget:
/* Gradient header with white text */ .cbp-header { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; } /* Custom user message bubbles */ .cbp-message-user { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; color: #fff !important; border-radius: 16px 16px 4px 16px; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3); } /* Custom bot message bubbles */ .cbp-message-bot { background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important; border: 1px solid #e2e8f0; border-radius: 16px 16px 16px 4px; color: #334155; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* Rounded input field */ .cbp-input input { border: 2px solid #e2e8f0; border-radius: 24px; font-size: 16px; } .cbp-input input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }

→ The launcher button (floating circle) is styled via the Primary Color picker, not Custom CSS.

API Configuration Examples

→ Update Chatbot Appearance:
// Update chatbot appearance settings const updateAppearance = async (chatbotId, apiKey) => { const appearanceSettings = { primaryColor: '#6366f1', // Indigo secondaryColor: '#8b5cf6', // Purple textColor: '#1f2937', // Gray-800 backgroundColor: '#ffffff', // White borderRadius: '16px', // Rounded corners customCss: ` .cbp-chatbot { font-family: 'Inter', sans-serif; } .cbp-message-user { font-weight: 500; } `, showBranding: false // Remove TalkBuildr branding }; const response = await fetch(`/api/chatbots/${chatbotId}/appearance`, { method: 'PUT', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify(appearanceSettings) }); return await response.json(); }; // Update chatbot personality const updatePersonality = async (chatbotId, apiKey) => { const personalitySettings = { tone: 'professional', // professional, casual, friendly responseLength: 'medium', // short, medium, long languageStyle: 'formal', // formal, informal industryFocus: 'technology', // Helps with context customInstructions: 'Always offer to help with technical questions and provide detailed explanations.' }; const response = await fetch(`/api/chatbots/${chatbotId}/personality`, { method: 'PUT', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify(personalitySettings) }); return await response.json(); };

→ Use these API calls to programmatically update your chatbot's appearance and personality settings.

→ Multi-Language Setup

→ Enable Multi-Language Support:
// Enable multiple languages for your chatbot const configureLanguages = async (chatbotId, apiKey) => { const languageSettings = { primaryLanguage: 'en', // English as primary supportedLanguages: [ 'en', // English 'es', // Spanish 'fr', // French 'de', // German 'nl', // Dutch 'it', // Italian 'pt', // Portuguese 'zh', // Chinese 'ja', // Japanese 'ko' // Korean ], autoDetectLanguage: true, // Automatically detect user language fallbackLanguage: 'en' // Fallback if detection fails }; const response = await fetch(`/api/chatbots/${chatbotId}/languages`, { method: 'PUT', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify(languageSettings) }); return await response.json(); }; // Test language detection const testLanguageDetection = async (chatbotId, apiKey, testMessage) => { const response = await fetch('/api/chat/detect-language', { method: 'POST', headers: { 'Authorization': `Bearer ${apiKey}`, 'Content-Type': 'application/json' }, body: JSON.stringify({ chatbotId, message: testMessage }) }); const result = await response.json(); console.log('Detected language:', result.detectedLanguage); console.log('Confidence:', result.confidence); return result; };

🌍 Configure multi-language support to reach international audiences and improve user experience.