Embeddable Widget

<script type="module" src="https://your-backend.example/widget.js"></script>
<agent-chat title="Support" color="#6366f1"></agent-chat>

<agent-chat
  title="Support"
  color="#6366f1"
  greeting="Hi! How can I help you today?"
  mode="floating"
  position="bottom-right">
</agent-chat>

<agent-chat
  title="Assistant"
  color="#7c3aed"
  mode="inline">
</agent-chat>

<script>
  window.agentChatConfig = {
    title: "Support",
    color: "#6366f1",
    greeting: "Hi! How can I help?",
    mode: "floating"
  };
</script>
<script type="module" src="https://your-backend.example/widget.js"></script>

export function SupportChat() {
  return <agent-chat title="Support" color="#6366f1" mode="floating" />;
}

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

<agent-chat title="Support" color="#6366f1"></agent-chat>

document.querySelector("agent-chat").addEventListener("agent-chat:answer", (e) => {
  console.log(e.detail.answer);        // final text response
  console.log(e.detail.visited);       // routing path, e.g. ["router", "router/orders_agent"]
  console.log(e.detail.used_tools);    // tools called during this run
});