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, Connections } 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>
  );
}

​
Using the widget with Tailwind CSS or similar frameworks

If you’re using the widget alongside a CSS framework like Tailwind CSS, its base reset styles (Preflight) may affect the widget’s appearance.
To ensure the widget’s styles are applied correctly, import its stylesheet manually in your global CSS file: 
/* globals.css */
@import "@hotglue/widget/dist/widget-react.css";