Controlling the Widget

Docuworm can be controlled through helper exports or directly on the element instance.

Helper functions

import {
  openWidget,
  closeWidget,
  toggleWidget,
} from "https://cdn.docuworm.ai/docuworm.js";

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

openWidget(widget);
closeWidget(widget);
toggleWidget(widget);

If element is omitted, helpers target the first docuworm-chat element on the page.

Element methods

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

widget?.open?.();
widget?.close?.();
widget?.toggle?.();

Custom launcher (Vanilla)

<button id="chat-open">Support Chat</button>
<docuworm-chat access-token="worm_xxx" thread-ref="case_12345"></docuworm-chat>

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

  const widget = document.querySelector("docuworm-chat");
  document.getElementById("chat-open")?.addEventListener("click", () => {
    openWidget(widget);
  });
</script>

Keyboard shortcut pattern

import { toggleWidget } from "https://cdn.docuworm.ai/docuworm.js";

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

document.addEventListener("keydown", (event) => {
  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
    event.preventDefault();
    toggleWidget(widget);
  }
});

Framework equivalents

React

const ref = useRef<HTMLElement | null>(null);
<button onClick={() => ref.current && openWidget(ref.current)}>Open</button>;

Vue

const widget = ref<HTMLElement | null>(null);
function open() {
  if (widget.value) openWidget(widget.value);
}

Svelte

let widget: HTMLElement | null = null;
<button on:click={() => widget && openWidget(widget)}>Open</button>

See also

• Loading the Widget
• Framework Recipes
• Embed API Reference