Skip to main content

Behavior Configuration

Control how your Focus Chat widget behaves and interacts with your website.

Basic Setup (quick)​

The simplest way to add Focus Chat to your page:

<!-- Your button -->
<button class="open-chat">Open Chat</button>

<!-- Focus Chat (invisible host) -->
<focus-chat 
  agent_card_url="https://your-agent.agents.inhotel.io/.well-known/agent-card.json"
  config='{
    "source_trigger_selector": ".open-chat"
  }'
>
</focus-chat>

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

What happens:

  • Clicking the button opens the chat
  • The <focus-chat> element stays invisible (it's just the host)
  • Streaming responses are enabled by default

Context Examples​

// For a blog post
{ "source_context": "article" }

// For a specific section
{ "source_context": "#main-content" }

// For product information
{ "source_context": ".product-info" }

// For FAQ sections
{ "source_context": ".faq-section" }

Customize the Experience​

Welcome Message​

Set a friendly greeting:

{
  "greeting": "👋 Hi! I'm here to help with your questions about our products."
}

Input Placeholder​

Customize what users see in the input field:

{
  "input_message_placeholder": "Ask me about pricing, features, or support..."
}

Performance & Advanced Features​

Streaming Responses​

Focus Chat streams responses by default for real-time conversation. If streaming fails, it automatically falls back to regular requests.

{
  "stream": true
}

Dynamic Context Updates​

For single-page applications, you can update context as users navigate:

function updateChatContext(section) {
  const chatWidget = document.querySelector('focus-chat');
  const config = JSON.parse(chatWidget.getAttribute('config'));
  config.source_context = `.${section}-content`;
  config.greeting = `I can help you with ${section}!`;
  chatWidget.setAttribute('config', JSON.stringify(config));
}

// Call when user navigates to a new section
updateChatContext('pricing');

Key Parameters (quick recap)​

  • source_trigger_selector: The button(s) or link(s) on your page that open the chat.
  • source_trigger: A human-readable label (optional) for analytics and tracking. Defaults to the element's text.
  • source_context: The page section you want the AI to be aware of (e.g. product info, article body, FAQ).

Together, these three options control what opens the chat, how it's labeled, and what context is sent to the AI.

Next Steps​