Skip to main content
You can install the hotglue widget via npm: 
npm i @hotglue/widget@beta
Next, you can pass your environment ID and public API key into the useHotglue hook to initialize the SDK and access the various functions: 
const {
  openWidget,
  setListeners,
  link,
  unlink,
  relink,
  runJob,
  getJobStatus,
  setLocalization,
  setTenantMetadata,
} = useHotglue({
  tenantId: "<OPTIONAL TENANT ID FOR PREFETCHING>",
  environmentId: "<ENV ID>",
  apiKey: "<PUBLIC API KEY>",
});

​
Using the Widget

To allow the hotglue Widget to render in your DOM, you can include the <Widget/> component anywhere in a mounted component: 
import { useHotglue, Widget } from "@hotglue/widget";

export default function WidgetLauncher() {
  const { openWidget } = useHotglue({
    tenantId: "MY-TENANT-ID",
    environmentId: process.env.NEXT_PUBLIC_HOTGLUE_ENV_ID,
    apiKey: process.env.NEXT_PUBLIC_HOTGLUE_PUBLIC_KEY,
  });

  return (
    <div>
      <Widget />
      <button onClick={openWidget}>Open Widget</button>
    </div>
  );
}

​
Using the Connections Component

You can additionally render the inline Connections component with <Connections/>: 
import { useHotglue, Widget } from "@hotglue/widget";

export default function WidgetLauncher() {
  useHotglue({
    tenantId: "MY-TENANT-ID",
    environmentId: process.env.NEXT_PUBLIC_HOTGLUE_ENV_ID,
    apiKey: process.env.NEXT_PUBLIC_HOTGLUE_PUBLIC_KEY,
  });

  return (
    <div>
      <Widget />
      <Connections />
    </div>
  );
}
⌘I