Skip to main content

Quick Start

This guide will walk you through creating your first Focus Chat widget in just a few minutes.

Step 1: Include the Library​

Add the Focus Chat script to your HTML. You can place it anywhere, but we recommend the <head> with the defer attribute so the browser fetches early and runs it after HTML parsing.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website with Focus Chat</title>
    <script defer src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
</head>
<body>
    <!-- Your page content -->
</body>
</html>

Step 2: Add the Chat Widget​

Insert the <focus-chat> element anywhere in your page:

<focus-chat 
  agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json"
>
</focus-chat>

Step 3: Customize the Greeting​

Add a custom greeting message:

<focus-chat 
  agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json"
  config='{"greeting": "👋 Welcome! How can I help you today?"}'
>
</focus-chat>

Step 4: Style Your Widget​

Customize the appearance to match your brand:

<focus-chat 
  agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json"
  config='{
    "greeting": "👋 Welcome! How can I help you today?",
    "header_background_color": "#2563eb",
    "user_message_background_color": "#2563eb",
    "send_button_background_color": "#2563eb"
  }'
>
</focus-chat>

Step 5: Test Your Widget​

Open your page in a browser and:

  1. Look for the chat widget
  2. Click to open the chat interface
  3. Send a test message
  4. Verify you receive a response

Complete Example​

Here's a complete working example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website with Focus Chat</title>
    <script defer src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
</head>
<body>
    <header>
        <h1>Welcome to Our Product</h1>
        <p>Learn about our amazing features below.</p>
    </header>

    <main>
        <section id="features">
            <h2>Product Features</h2>
            <p>Our product offers incredible capabilities...</p>
        </section>

        <!-- Chat widget with context -->
        <focus-chat 
          agent_card_url="https://a44b44de-d6cb-409e-a1ff-3bc28aa95b4e.agents.inhotel.io/.well-known/agent-card.json"
          config='{
            "greeting": "👋 Hi! I can help you learn about our product features.",
            "source_context": "#features",
            "header_background_color": "#059669",
            "user_message_background_color": "#059669",
            "title": "Product Assistant"
          }'
        >
        </focus-chat>
    </main>
</body>
</html>

What's Next?​

Great! You now have a working Focus Chat widget. Here are some next steps:

Need Help?​

If you run into any issues, check our Troubleshooting Guide.