Configuration Parameters

Complete reference for all Focus Chat configuration parameters.

Parameter Categories

UI Styling Parameters

Control the visual appearance of your chat widget.

Behavior Parameters

Configure how the chat widget behaves and interacts.

Message Parameters

Customize greeting and placeholder text.

UI Styling Parameters

Typography

Parameter	Type	Default	Description
font_family	String	System default	Font family for all UI elements
title_font_weight	String	"500"	Font weight for the title
title_font_size	String	"16px"	Font size for the title
message_font_size	String	"15px"	Font size for chat messages
input_font_size	String	"15px"	Font size for input field

Example:

{
  "font_family": "Inter, system-ui, sans-serif",
  "title_font_weight": "600",
  "title_font_size": "18px",
  "message_font_size": "16px",
  "input_font_size": "16px"
}

Header Styling

Parameter	Type	Default	Description	Alternative Names
header_color	String	"white"	Text color for header	title_color
header_background_color	String	"#465EA4"	Background color of header	title_background_color, color
header_icon_hover_background_color	String	"#34457A"	Hover color for header icons	header_icon_hover_color
title	String	"Ask a question"	Chat window title	-

Example:

{
  "title": "Customer Support",
  "header_color": "white",
  "header_background_color": "#1f2937",
  "header_icon_hover_background_color": "#374151"
}

Body and Background

Parameter	Type	Default	Description
body_background_color	String	"#F0F0F0"	Background color of chat body
branding_color	String	"#424242"	Color for "Powered by" text

Example:

{
  "body_background_color": "#f9fafb",
  "branding_color": "#6b7280"
}

Message Styling

Parameter	Type	Default	Description	Alternative Names
assistant_message_background_color	String	"#FBFBFB"	Background color for AI messages	assistant_message_bg_color, assistant_message_color
assistant_message_color	String	"#0F0F0F"	Text color for AI messages	-
user_message_background_color	String	"#465EA4"	Background color for user messages	user_message_bg_color
user_message_color	String	"white"	Text color for user messages

Example:

{
  "assistant_message_background_color": "#ffffff",
  "assistant_message_color": "#111827",
  "user_message_background_color": "#3b82f6",
  "user_message_color": "white"
}

Input Field Styling

Parameter	Type	Default	Description	Alternative Names
input_background_color	String	"white"	Background color of input field	input_color
input_text_color	String	"#0F0F0F"	Text color in input field	-
input_message_placeholder	String	"Ask me anything..."	Placeholder text	new_message_placeholder
input_message_placeholder_color	String	"#A6A6A6"	Placeholder text color	-

Example:

{
  "input_background_color": "white",
  "input_text_color": "#111827",
  "input_message_placeholder": "Type your message here...",
  "input_message_placeholder_color": "#9ca3af"
}

Send Button Styling

Parameter	Type	Default	Description	Alternative Names
send_button_background_color	String	"#465EA4"	Background color of send button	-
send_button_hover_background_color	String	"#34457A"	Hover background color	send_hover_background_color

Example:

{
  "send_button_background_color": "#3b82f6",
  "send_button_hover_background_color": "#2563eb"
}

Behavior Parameters

Streaming Configuration

Parameter	Type	Default	Description	Alternative Names
stream	Boolean	true	Enable streaming responses	streaming

Example:

{
  "stream": true
}

Context Configuration

Parameter	Type	Default	Description
source_context	String	None	CSS selector for context extraction
source_trigger_selector	String	None	CSS selector for trigger elements
source_trigger	String	Auto-detected	Human-readable trigger label
source_channel	String	Auto-detected	Override source channel

Example:

{
  "source_context": ".product-details",
  "source_trigger_selector": ".help-button",
  "source_trigger": "Product Help Button",
  "source_channel": "product-support"
}

Message Parameters

Greeting Configuration

Parameter	Type	Default	Description
greeting	String	"👋 Hi there! How can I help you today?"	Initial greeting message

Example:

{
  "greeting": "🌟 Welcome! I'm here to help you succeed."
}

Parameter Validation

Type Validation

• String parameters: Accept any string value
• Boolean parameters: Accept true, false, "true", "false"
• Numeric parameters: Accept numbers or numeric strings

Color Values

Color parameters accept:

• Hex colors: #ff0000, #f00
• RGB/RGBA: rgb(255, 0, 0), rgba(255, 0, 0, 0.5)
• HSL/HSLA: hsl(0, 100%, 50%)
• Named colors: red, blue, transparent
• CSS variables: var(--brand-color)

CSS Selectors

Context and trigger selectors must be valid CSS selectors:

• ID selectors: #my-element
• Class selectors: .my-class
• Element selectors: article
• Complex selectors: .main-content .article-body

Configuration Examples

Minimal Configuration

{
  "greeting": "Hello! How can I help?"
}

Brand Colors Only

{
  "header_background_color": "#3b82f6",
  "user_message_background_color": "#3b82f6",
  "send_button_background_color": "#3b82f6"
}

Complete Styling

{
  "title": "Support Chat",
  "greeting": "👋 Welcome! How can we help you today?",
  "font_family": "Inter, system-ui, sans-serif",
  "title_font_weight": "600",
  "title_font_size": "18px",
  "message_font_size": "16px",
  "input_font_size": "16px",
  "header_color": "white",
  "header_background_color": "#1f2937",
  "header_icon_hover_background_color": "#374151",
  "body_background_color": "#f9fafb",
  "assistant_message_background_color": "#ffffff",
  "assistant_message_color": "#111827",
  "user_message_background_color": "#3b82f6",
  "user_message_color": "white",
  "input_background_color": "white",
  "input_text_color": "#111827",
  "input_message_placeholder": "Type your message...",
  "input_message_placeholder_color": "#9ca3af",
  "send_button_background_color": "#3b82f6",
  "send_button_hover_background_color": "#2563eb",
  "branding_color": "#6b7280"
}

Context-Aware Configuration

{
  "greeting": "I can help you with this page content!",
  "source_context": ".main-content",
  "source_trigger_selector": ".help-button",
  "source_trigger": "Help Button",
  "source_channel": "page-help",
  "stream": true
}

CSS Variables Integration

{
  "header_background_color": "var(--brand-primary)",
  "user_message_background_color": "var(--brand-primary)",
  "send_button_background_color": "var(--brand-primary)",
  "send_button_hover_background_color": "var(--brand-primary-hover)"
}

Parameter Inheritance

Default Values

All parameters have sensible defaults. Unspecified parameters use default values.

Override Hierarchy

1. Inline config: Highest priority
2. Script config: Medium priority
3. Default values: Lowest priority

Example Override

<!-- Script config -->
<script id="base-config" type="application/json">
{
  "greeting": "Hello from script!",
  "header_background_color": "#3b82f6"
}
</script>

<!-- Inline config overrides script -->
<focus-chat 
  config='{"greeting": "Hello inline!", "stream": false}'
>
</focus-chat>

Result: greeting becomes "Hello inline!", header_background_color remains "#3b82f6", stream becomes false.

Validation and Error Handling

Invalid Parameters

• Invalid colors: Fall back to default
• Invalid selectors: Ignored with console warning
• Invalid JSON: Entire config ignored with error
• Wrong types: Type coercion attempted

Debug Information

Enable debug mode to see parameter validation:

// Check browser console for validation messages
console.log('[InHotel] Config loaded:', config);
console.log('[InHotel] Invalid parameter:', paramName);

Best Practices

Performance

• Minimize configuration size: Only specify needed parameters
• Use CSS variables: For dynamic theming
• Cache configurations: In script tags for reuse

Maintainability

• Use consistent naming: Stick to primary parameter names
• Document custom configs: Add comments in script tags
• Test thoroughly: Verify all parameters work as expected

Accessibility

• Sufficient contrast: Ensure readable text colors
• Font sizes: Use appropriate sizes (16px+ for inputs)
• Color combinations: Test with color blindness simulators

Migration Guide

From v0.1.0 to v0.2.0

• All parameters backward compatible
• New styling parameters available
• Alternative names still supported

Deprecation Policy

• Alternative parameter names maintained indefinitely
• New features use primary names only
• Deprecation warnings in console (if any)

Next Steps

• Explore browser support
• See styling examples