React Setup

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,
  setCredentialsValidator,
} = useHotglue({
  tenantId: "<OPTIONAL TENANT ID FOR PREFETCHING>",
  environmentId: "<ENV ID>",
  apiKey: "<PUBLIC API KEY>",
});

setCredentialsValidator<{ api_key: string }>(async (oldConfig, newConfig) => {
  if (!newConfig.api_key) {
    return {
      success: false,
      errorMessage: "API key is required",
    };
  }

  return { success: true };
});

For custom validation before credentials are submitted, call setCredentialsValidator. The generic passed to setCredentialsValidator<TConfig>() types oldConfig and newConfig in the validator. See the full setCredentialsValidator reference. 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>
  );
}

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";

Embedded Widget

Using the Widget

Using the Connections Component

Using the widget with Tailwind CSS or similar frameworks

​Using the Widget

​Using the Connections Component

​Using the widget with Tailwind CSS or similar frameworks

Using the Widget

Using the Connections Component

Using the widget with Tailwind CSS or similar frameworks