Use the Chat SDK with plain HTML and JavaScript

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Chat</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p id="status"></p>
    <ol id="messages" aria-live="polite"></ol>
    <form id="composer">
      <input placeholder="Type a message…" autocomplete="off" />
      <button type="submit">Send</button>
    </form>

    <script src="https://platform.typewise.app/client-sdk/typewise.global.js"></script>
    <script>
      const chat = Typewise.createClient({ clientId: "YOUR_CLIENT_ID" });

      const status = document.getElementById("status");
      const list = document.getElementById("messages");
      const composer = document.getElementById("composer");
      const input = composer.querySelector("input");

      chat.subscribe((state) => {
        status.textContent = state.conversation?.isHandledByHuman
          ? "A team member joined"
          : `Connection: ${state.connection}`;

        const items = state.messages.map((message) => {
          const item = document.createElement("li");
          item.className = `${message.role} ${message.status}`;
          item.textContent = message.text;
          return item;
        });

        if (state.activity.kind !== "idle") {
          const item = document.createElement("li");
          item.className = "activity";
          item.textContent =
            state.activity.kind === "agent_typing"
              ? "Typing…"
              : state.activity.kind === "waiting_for_agent"
                ? "Reviewing…"
                : state.activity.text || "Thinking…";
          items.push(item);
        }

        list.replaceChildren(...items);
        list.scrollTop = list.scrollHeight;
      });

      composer.addEventListener("submit", (event) => {
        event.preventDefault();
        const text = input.value.trim();
        if (!text) return;
        input.value = "";
        chat.sendMessage(text).catch(() => {});
      });

      chat.resume().catch((error) => console.warn("[typewise]", error));
    </script>

  </body>
</html>