Skip to main content

Context Awareness Example

Agent Grid Example

This demo exposes every Focus Chat config parameter and uses camelCase keys to show the alternative to snake_case. Two chat widgets share the same agent card but are scoped to separate source contexts (.loyalty-silver and .loyalty-gold), so each assistant only “sees” the content of its own loyalty section. Because both widgets talk to the same agent with session memory, a user can ask about Silver in the Silver chat, then open the Gold chat and still reference the prior Silver conversation; answers persist across the two widgets.

<!DOCTYPE html>
<html>
<head></head>
<body>

  <!-- Top controls -->
  <section>
    <button id="chat-silver" type="button">Silver Member Chat</button>
    <button id="chat-gold" type="button">Gold Member Chat</button>

    <!-- Silver theme -->
    <focus-chat
      agentCardUrl="https://75fa98e7-9278-47a0-8ce8-5b8523789930.agents.inhotel.io/.well-known/agent-card.json"
      config='{
        "fontFamily":"Apple Chancery, Snell Roundhand, cursive",
        "headerColor":"#111827",
        "headerBackgroundColor":"#C0C6CC",
        "headerIconHoverBackgroundColor":"#9AA3AD",
        "title":"Loyalty Support (Silver)",
        "titleFontWeight":"700",
        "titleFontSize":"24px",
        "bodyBackgroundColor":"#F5F7FA",
        "messageFontSize":"18px",
        "assistantMessageColor":"#292929",
        "assistantMessageBackgroundColor":"#FFFFFF",
        "userMessageColor":"#111827",
        "userMessageBackgroundColor":"#E5E7EB",
        "inputFontSize":"22px",
        "inputColor":"#111827",
        "inputBackgroundColor":"#F0F2F5",
        "inputMessagePlaceholder":"Ask me anything about your loyalty benefits…",
        "sendButtonBackgroundColor":"#C0C6CC",
        "sendButtonHoverBackgroundColor":"#9AA3AD",
        "greeting":"Hi! I’m your Loyalty Concierge. How can I help with your benefits today?",
        "sourceChannel":"web",
        "sourceContext":".loyalty-silver",
        "sourceTriggerSelector":"#chat-silver",
        "sourceTrigger":"A Silver tier member needs help with their benefits.",
        "brandingColor":"#9AA3AD",
        "stream":true
      }'>
    </focus-chat>

    <!-- Gold theme -->
    <focus-chat
      agentCardUrl="https://75fa98e7-9278-47a0-8ce8-5b8523789930.agents.inhotel.io/.well-known/agent-card.json"
      config='{
        "fontFamily":"Apple Chancery, Snell Roundhand, cursive",
        "headerColor":"#111827",
        "headerBackgroundColor":"#D4AF37",
        "headerIconHoverBackgroundColor":"#B78F1E",
        "title":"Loyalty Support (Gold)",
        "titleFontWeight":"700",
        "titleFontSize":"24px",
        "bodyBackgroundColor":"#FFFDF6",
        "messageFontSize":"18px",
        "assistantMessageColor":"#292929",
        "assistantMessageBackgroundColor":"#FFFFFF",
        "userMessageColor":"#111827",
        "userMessageBackgroundColor":"#F6E8B1",
        "inputFontSize":"22px",
        "inputColor":"#111827",
        "inputBackgroundColor":"#FFF8E1",
        "inputMessagePlaceholder":"Ask me anything about your loyalty benefits…",
        "sendButtonBackgroundColor":"#D4AF37",
        "sendButtonHoverBackgroundColor":"#B78F1E",
        "greeting":"Hi! I’m your Loyalty Concierge. How can I help with your benefits today?",
        "sourceChannel":"web",
        "sourceContext":".loyalty-gold",
        "sourceTriggerSelector":"#chat-gold",
        "sourceTrigger":"A Gold tier member needs help with their benefits.",
        "brandingColor":"#B78F1E",
        "stream":true
      }'>
    </focus-chat>
  </section>

  <!-- Silver details -->
  <section>
    <div class="loyalty-silver">
      <h1>Loyalty Program - Silver</h1>
      <p>Silver benefits: earn 8 points per CHF on eligible room spend plus a 10% tier bonus; priority check-in from 14:00; late checkout to 13:00 when available; standard Wi-Fi included; one welcome drink voucher per stay; 10% parking discount at participating properties. Qualification: 8 nights or CHF 800 eligible spend per calendar year. Benefits apply on direct bookings (website/app/call center); award nights receive all on-property benefits, and incidentals still earn points.</p>
    </div>
  </section>

  <!-- Gold details -->
  <section>
    <div class="loyalty-gold">
      <h1>Loyalty Program - Gold</h1>
      <p>Gold benefits: earn 12 points per CHF on eligible room spend plus a 25% tier bonus; space-available 1-category room upgrade at check-in (up to Deluxe); complimentary daily breakfast for up to 2 adults in the restaurant (or a CHF 15 pp breakfast credit where buffet is unavailable); late checkout to 14:00 guaranteed Fri–Sun and subject to availability Mon–Thu; premium Wi-Fi; welcome amenity (snack or 250 bonus points). Qualification: 25 nights or CHF 3,500 eligible spend per calendar year; up to 5 unused nights roll over to the next year. Direct bookings required for benefits; award stays receive on-property perks and earn points on incidentals.</p>
    </div>
  </section>

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

Next Steps​