Skip to main content

Configuration Overview

Focus Chat is highly configurable through the config attribute, allowing you to customize both appearance and behavior to match your specific needs.

Configuration Methods​

There are several ways to configure your Focus Chat widget:

1. Inline JSON Configuration​

The most common method is to pass configuration as a JSON string:

<!DOCTYPE html>
<html>
  <body>
    <!-- Trigger button -->
    <button id="chat-btn" type="button">Open Chat</button>

    <!-- Focus Chat widget -->
    <focus-chat
      agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json"
      config='{
        "greeting": "Hello! How can I help you?",
        "header_background_color": "#2563eb",
        "stream": true,
        "source_trigger_selector": "#chat-btn"
      }'
    >
    </focus-chat>

    <!-- Script -->
    <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
  </body>
</html>

2. Script Tag Configuration​

For larger configurations with many parameters or when you need better organization, use a script tag:

<!DOCTYPE html>
<html>
  <body>
    <!-- Trigger button -->
    <button id="chat-btn" type="button">Open Chat</button>

    <!-- Focus Chat script -->
    <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>

    <!-- Configuration JSON -->
    <script id="chat-config" type="application/json">
    {
        "greeting": "Welcome! How can I assist you today?",
        "header_background_color": "#10b981",
        "user_message_background_color": "#10b981",
        "send_button_background_color": "#10b981",
        "font_family": "Inter, sans-serif",
        "source_context": ".main-content",
        "source_trigger_selector": "#chat-btn"
    }
    </script>

    <!-- Focus Chat widget -->
    <focus-chat 
      agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json"
      config="#chat-config"
    >
    </focus-chat>
  </body>
</html>

3. CSS Variables​

Use CSS custom properties for dynamic theming:

<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --brand-primary: #7c3aed;
        --brand-primary-hover: #6d28d9;
      }
    </style>
  </head>
  <body>
    <!-- Trigger button -->
    <button id="chat-btn" type="button">Open Chat</button>

    <!-- Focus Chat widget -->
    <focus-chat 
      agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json"
      config='{
        "header_background_color": "var(--brand-primary)",
        "header_icon_hover_background_color": "var(--brand-primary-hover)",
        "source_trigger_selector": "#chat-btn"
      }'
    >
    </focus-chat>

    <!-- Script -->
    <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
  </body>
</html>

Configuration Categories​

Focus Chat configuration is organized into several categories:

UI Styling​

Control the visual appearance of your chat widget:

  • Colors and backgrounds
  • Fonts and typography
  • Layout and spacing

Learn more about UI Styling →

Behavior Settings​

Configure how the chat widget behaves:

  • Streaming responses
  • Context extraction
  • Trigger elements

Learn more about Behavior Settings →

Agent Configuration​

Set up your AI agent's profile and capabilities:

  • Agent metadata
  • Capabilities and features
  • Provider information

Learn more about Agent Configuration →

Next Steps​