Skip to main content

Agent Grid Example

Agent Grid Example

This example renders a grid of agents using each card's iconUrl and name. Each tile is a trigger with IDs like fc-trigger-1, and each Focus Chat instance binds via sourceTriggerSelector to its matching trigger. Suitable for agent catalogs, staff directories, event participant grids, speaker or trainer lineups, consultant marketplaces, and multi-property brand assistants.

<!DOCTYPE html>
<head>
  <style>
    .agent-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      max-width: 720px;
      margin: 18px auto;
    }
    .agent-trigger {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 8px;
      background: #f7f7f7;
      cursor: pointer;
    }
    .agent-avatar {
      width: 72px;
      height: 72px;
      object-fit: cover;
      border-radius: 50%;
      display: block;
    }
    .agent-name {
      font-size: 14px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="agent-grid" class="agent-grid"></div>

  <script src="https://embed.agents.inhotel.io/focus-chat/latest/focus-chat.min.js"></script>
  <script>
    const agentCardUrls = [
      "https://74e282fb-88c6-4a93-96fe-5270a793576a.agents.inhotel.io/.well-known/agent-card.json",
      "https://db1a4b67-81e7-498f-badd-5a85843d6fd7.agents.inhotel.io/.well-known/agent-card.json",
      "https://5953cd7b-5286-47e2-a28c-6bd0f86ec5b5.agents.inhotel.io/.well-known/agent-card.json"
    ];

    const gridEl = document.getElementById("agent-grid");

    agentCardUrls.forEach(async (url, index) => {
      const triggerId = `agent-trigger-${index + 1}`;

      const button = document.createElement("button");
      button.type = "button";
      button.id = triggerId;
      button.className = "agent-trigger";
      gridEl.appendChild(button);

      try {
        const res = await fetch(url);
        const card = await res.json();

        const img = new Image();
        img.className = "agent-avatar";
        img.src = card.iconUrl || "";
        img.alt = card.name || "Agent";

        const nameEl = document.createElement("div");
        nameEl.className = "agent-name";
        nameEl.textContent = card.name || "Agent";

        button.append(img, nameEl);
      } catch {
        button.textContent = "Agent";
      }

      const fc = document.createElement("focus-chat");
      fc.setAttribute("agentCardUrl", url);
      fc.setAttribute("config", JSON.stringify({ sourceTriggerSelector: `#${triggerId}` }));
      document.body.appendChild(fc);
    });
  </script>
</body>
</html>

User Experience Guidelines​

  1. Clear Purpose: Each widget should have a distinct purpose
  2. Contextual Placement: Place widgets near relevant content
  3. Consistent Branding: Maintain brand consistency across widgets

Next Steps​