Advanced API

Programmatic API

Control widget behavior directly through window global and core package APIs.

Framework Guides

Window global (script tag)

When using the script tag loader, window.CornerCue is available.

window.CornerCue.open(document.getElementById("my-trigger"), {
  projectId: "YOUR_PROJECT_ID",
  user: { id: "user_123", email: "john@example.com" },
  metadata: { plan: "pro" },
  defaultType: "bug",
});

window.CornerCue.close();
window.CornerCue.widget;

If floating button is enabled:

window.CornerCue.floatingButton;
window.CornerCue.floatingButton.hide();
window.CornerCue.floatingButton.show();
window.CornerCue.floatingButton.destroy();

Core package usage

import { CornerCueWidget } from "@cornercue/core";

const widget = new CornerCueWidget(
  {
    apiEndpoint: "https://api.cornercue.com/widget/ingest",
    zIndex: 2147483647,
    transitionDuration: 200,
    popoverGap: 8,
  },
  {
    onOpen: () => console.log("opened"),
    onClose: () => console.log("closed"),
    onSubmit: (payload) => console.log("submitting", payload),
    onSubmitSuccess: (payload) => console.log("success", payload),
    onSubmitError: (error, payload) => console.error("error", error, payload),
  },
);

widget.open(triggerElement, {
  projectId: "YOUR_PROJECT_ID",
  user: { id: "user_123" },
  metadata: { plan: "pro" },
});

widget.close();
widget.isWidgetOpen();
widget.destroy();

Floating button (programmatic)

import { FloatingButton, CornerCueWidget } from "@cornercue/core";

const widget = new CornerCueWidget();
const fab = new FloatingButton({
  position: "bottom-left",
  color: "#7c3aed",
  size: 56,
  offset: 24,
  tooltip: "Report a Bug",
  defaultType: "bug",
});

fab.onClick((btnEl) => {
  if (widget.isWidgetOpen()) {
    widget.close();
  } else {
    widget.open(btnEl, {
      projectId: "YOUR_PROJECT_ID",
      defaultType: fab.getDefaultType(),
    });
  }
});