> ## 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.

# React Setup

> Using the Widget with React

You can install the hotglue widget via npm:

```bash theme={null}
npm i @hotglue/widget@beta
```

Next, you can pass your [environment ID](/api-reference/overview#environment-id) and [public API key](/api-reference/overview#api-key) into the `useHotglue` hook to initialize the SDK and access the various functions:

```jsx theme={null}
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](/widget-v3/reference/setCredentialsValidator) reference.

## Using the Widget

To allow the hotglue Widget to render in your DOM, you can include the `<Widget/>` component anywhere in a mounted component:

```jsx theme={null}
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/>`:

```jsx theme={null}
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:

```css theme={null}
/* globals.css */
@import "@hotglue/widget/dist/widget-react.css";
```