← Back to home

Embed SDK

@hiloop/elements

Drop-in web components for embedding Hiloop interaction cards in any page. Works in React, Vue, Angular, plain HTML — no framework required.

CDN quickstart

The fastest way — no build tools needed. Include two tags in your page:

HTML 
<link rel="stylesheet" href="https://cdn.hiloop.ai/elements/hiloop-elements.css">
<script type="module" src="https://cdn.hiloop.ai/elements/hiloop-elements.js"></script>

<!-- Approval card -->
<hiloop-approval-card
  agent-name="OpsBot"
  title="Approve customer refund?"
  description="Order #12345 — €49.99"
  options='["Approve","Reject","Escalate"]'
  priority="high"
  deadline-at="2026-03-01T10:00:00Z">
</hiloop-approval-card>

<script>
  document.querySelector("hiloop-approval-card")
    .addEventListener("respond", (e) => console.log("response:", e.detail));
</script>

npm install

Install 
npm install @hiloop/elements
TypeScript / ESM 
// Register all custom elements
import "@hiloop/elements";

// Include compiled Tailwind styles in your global CSS
import "@hiloop/elements/css";

React example

ApprovalCard.tsx 
import { useEffect, useRef } from "react";
import "@hiloop/elements";
import "@hiloop/elements/css";

function ApprovalCard({ item }) {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const handler = (e) => console.log("responded:", e.detail);
    el.addEventListener("respond", handler);
    return () => el.removeEventListener("respond", handler);
  }, []);

  return (
    <hiloop-approval-card
      ref={ref}
      agent-name={item.agentName}
      title={item.title}
      description={item.description}
      options={JSON.stringify(item.options ?? ["Approve", "Reject"])}
      priority={item.priority}
      deadline-at={item.deadlineAt}
    />
  );
}

Load live interactions from the API

TypeScript 
import HiloopClient from "@hiloop/sdk";
import "@hiloop/elements";
import "@hiloop/elements/css";

const client = new HiloopClient({ apiKey: "hlp_your_key" });

const { items } = await client.listInteractions({ status: "pending" });

for (const item of items) {
  const card = document.createElement("hiloop-interaction-card");
  card.setAttribute("type", item.type);
  card.setAttribute("agent-name", item.agentName ?? "Agent");
  card.setAttribute("title", item.title ?? "");
  card.setAttribute("status", item.status);
  if (item.priority) card.setAttribute("priority", item.priority);
  if (item.deadlineAt) card.setAttribute("deadline-at", item.deadlineAt);

  card.addEventListener("respond", async (e) => {
    await client.respond(item.id, { response: e.detail });
    card.setAttribute("status", "responded");
  });

  document.getElementById("cards").appendChild(card);
}

Content blocks

All cards support a blocks attribute — a JSON array of composable rich content rendered above the action area.

HTML 
<hiloop-approval-card
  agent-name="DeployBot"
  title="Deploy v3.0 to production?"
  blocks='[
    {"blockType":"text","data":{"content":"Deployment affects 12 services."}},
    {"blockType":"stat","data":{"label":"Tests passing","value":"1,493"}},
    {"blockType":"stat","data":{"label":"Rollback time","value":"< 2 min"}},
    {"blockType":"code","data":{"language":"bash","code":"kubectl rollout history deploy/api"}}
  ]'
  options='["Deploy now","Schedule for off-hours","Cancel"]'>
</hiloop-approval-card>

Supported block types: text, code, table, stat, kv, list, steps, chart, metric_grid, accordion, button_group, qa, alert, header.

All elements

Element Description
<hiloop-approval-card> Approval request with configurable response options (Approve, Reject, Escalate…)
<hiloop-chat-card> Inline conversation with send input and message history
<hiloop-payment-card> Payment authorization — shows amount and approve/reject buttons
<hiloop-form-card> Form rendered from content blocks (QA block type)
<hiloop-review-card> Code or document review request
<hiloop-notification-card> Read-only alert or announcement
<hiloop-question-card> Free-text question with a text input
<hiloop-progress-card> Task progress bar with optional milestone list
<hiloop-voice-call-card> Incoming call notification (answer / decline)
<hiloop-scheduled-call-card> Scheduled call invitation (confirm / reschedule)
<hiloop-broadcast-card> Broadcast or announcement (read-only)
<hiloop-interaction-card> Unified element — set the `type` attribute to select the card

Dark mode

Cards automatically switch to dark mode when the .dark class is present on any ancestor element.

HTML 
<div class="dark">
  <hiloop-approval-card agent-name="Bot" title="Dark mode preview"></hiloop-approval-card>
</div>

See also