Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.hotglue.com/llms.txt

Use this file to discover all available pages before exploring further.

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 tenantId = "MY-TENANT-ID";
  const { openWidget } = useHotglue({
    tenantId,
    environmentId: process.env.NEXT_PUBLIC_HOTGLUE_ENV_ID,
    apiKey: process.env.NEXT_PUBLIC_HOTGLUE_PUBLIC_KEY,
    jwtToken: '<TENANT SCOPED JWT>'
  });

  return (
    <div>
      <Widget />
      <button onClick={() => openWidget(tenantId)}>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,
    jwtToken: '<TENANT SCOPED JWT>'
  });

  return (
    <div>
      <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";