Loading the Widget

Docuworm is delivered as a hosted ES module.

<script type="module">
  import "https://cdn.docuworm.ai/docuworm.js";
</script>

That import registers <docuworm-chat> and helper APIs.

Vanilla JavaScript (baseline)

<button id="open-chat">Open Chat</button>

<docuworm-chat
  access-token="worm_xxx_your_token"
  thread-ref="case_12345"
  theme="dark"
></docuworm-chat>

<script type="module">
  import {
    openWidget,
    waitForThreadId,
  } from "https://cdn.docuworm.ai/docuworm.js";

  const widget = document.querySelector("docuworm-chat");

  document.getElementById("open-chat")?.addEventListener("click", async () => {
    openWidget(widget);
    const threadId = await waitForThreadId({ element: widget });
    console.log("Thread ready:", threadId);
  });
</script>

React

import { useRef } from "react";
import {
  openWidget,
  waitForThreadId,
} from "https://cdn.docuworm.ai/docuworm.js";

export function SupportChat() {
  const widgetRef = useRef<HTMLElement | null>(null);

  async function openChat() {
    if (!widgetRef.current) return;
    openWidget(widgetRef.current);
    const threadId = await waitForThreadId({ element: widgetRef.current });
    console.log("Thread ready:", threadId);
  }

  return (
    <>
      <button onClick={openChat}>Open Chat</button>

      <docuworm-chat
        ref={widgetRef}
        access-token={import.meta.env.VITE_DOCUWORM_TOKEN}
        thread-ref="case_12345"
        theme="dark"
      />
    </>
  );
}

Vue 3

<template>
  <button @click="openChat">Open Chat</button>
  <docuworm-chat
    ref="widget"
    :access-token="token"
    thread-ref="case_12345"
    theme="dark"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  openWidget,
  waitForThreadId,
} from "https://cdn.docuworm.ai/docuworm.js";

const widget = ref<HTMLElement | null>(null);
const token = import.meta.env.VITE_DOCUWORM_TOKEN;

async function openChat() {
  if (!widget.value) return;
  openWidget(widget.value);
  const threadId = await waitForThreadId({ element: widget.value });
  console.log("Thread ready:", threadId);
}
</script>

Svelte

<script lang="ts">
  import {
    openWidget,
    waitForThreadId,
  } from "https://cdn.docuworm.ai/docuworm.js";

  let widget: HTMLElement | null = null;
  const token = import.meta.env.VITE_DOCUWORM_TOKEN;

  async function openChat() {
    if (!widget) return;
    openWidget(widget);
    const threadId = await waitForThreadId({ element: widget });
    console.log("Thread ready:", threadId);
  }
</script>

<button on:click={openChat}>Open Chat</button>

<docuworm-chat
  bind:this={widget}
  access-token={token}
  thread-ref="case_12345"
  theme="dark"
/>

Production notes

• Load with type="module".
• Ensure the element exists before calling helpers against it.
• Trigger thread creation (open widget, upload, or add sources) before waiting for thread ID.
• Always use a stable thread-ref in authenticated app flows.
• Keep tokens in environment/secret management, not source code.