🎨 Chatbot Style Dashboard

Real-time customization of the chatbot in inline mode

← Back to Test Page

🎛️ Quick Presets

🎨 Colors

Primary Color

Secondary Color

Background Color

Button Color

Button Text Color

📝 Content & Branding

Header Text

Logo URL

Show Logo

Logo Aspect

Logo Border Radius

Opening Message

Suggestions (comma-separated)Show Suggestions

⚙️ Settings

Tenant

Corner Position

Z-Index

Allow Resize

💾 Import/Export

👀 Live Preview (Inline Mode)

The chatbot is embedded in the container below. Changes are applied in real-time.

Loading chatbot... (Container #0)

🔍 Current Override Values

opening_message: null

opening_message_suggestions: null

show_suggestions: true

header_text: Truste Chat

logo_url: null

show_logo: true

logo_border_radius: full

corner: bottom-right

Check browser console for ChatView debug logs

⚠️ Live Update Behavior

Opening Message & Suggestions: Only update before any user messages are sent

Header & Logo: Update in real-time

Colors & Styling: Update in real-time

Corner Position & Animations: Update in real-time (fixed mode slides from side, inline mode scales from corner)

Once conversation starts, clear cache to test opening message changes

📋 Integration Code

Use this code to implement the current configuration:

<!-- Container for inline mode -->
<div id="truste-chatbot-container"></div>

<!-- Widget script -->
<script>
  window.TrusteChatbot.init({
    tenantId: '8386c1ef-7979-4e40-9074-e51fa1cd9f2b',
    inline: true,
    overrides: {
      style: {
        primaryColor: '#4F46E5',
        secondaryColor: '#6B7280',
        backgroundColor: '#FFFFFF',
        buttonColor: '#4F46E5',
        buttonTextColor: '#FFFFFF',
        logoBorderRadius: 'full',
        zIndex: 9999
      },
      header_text: 'Truste Chat',
      allow_resize: true,
      show_suggestions: true,
      show_logo: true,
      corner: 'bottom-right',
      logoAspect: 'square'
    }
  });
</script>