# @hotglue/widget

> React elements to embed hotglue integrations into your web-app.

Latest version **1.5.26** (published 2026-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hotglue/widget
pnpm add @hotglue/widget
yarn add @hotglue/widget
bun add @hotglue/widget
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.5.26 |
| Published | 2026-07-13 |
| First published | 2022-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 30 |
| Unpacked size | 5.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | hotglue |
| Maintainers | hassansyyid, ddasouza, liorb-d |

## Links

- npm: https://www.npmjs.com/package/@hotglue/widget
- npm.io page: https://npm.io/package/@hotglue/widget

## Dependencies (30)

- [dayjs](https://npm.io/package/dayjs.md) ^1.11.11
- [redux](https://npm.io/package/redux.md) ^5.0.1
- [formik](https://npm.io/package/formik.md) ^2.2.9
- [moment](https://npm.io/package/moment.md) ^2.29.3
- [shortid](https://npm.io/package/shortid.md) ^2.2.15
- [date-fns](https://npm.io/package/date-fns.md) ^2.28.0
- [reselect](https://npm.io/package/reselect.md) ^5.1.1
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.2.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [cron-parser](https://npm.io/package/cron-parser.md) ^2.13.0
- [moment-mini](https://npm.io/package/moment-mini.md) ^2.24.0
- [react-redux](https://npm.io/package/react-redux.md) ^9.2.0
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^3.1.0
- [cron-builder](https://npm.io/package/cron-builder.md) ^0.3.0
- [react-window](https://npm.io/package/react-window.md) ^1.8.6
- [redux-logger](https://npm.io/package/redux-logger.md) ^3.0.6
- [@mui/material](https://npm.io/package/@mui/material.md) ^6.4.0
- [webfontloader](https://npm.io/package/webfontloader.md) ^1.6.28
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0
- [@date-io/moment](https://npm.io/package/@date-io/moment.md) ^1.3.13
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.14.0
- [@hotglue/common](https://npm.io/package/@hotglue/common.md) 1.1.4
- [markdown-to-jsx](https://npm.io/package/markdown-to-jsx.md) ^7.1.3
- [moment-timezone](https://npm.io/package/moment-timezone.md) ^0.5.27
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^6.4.0
- [@mui/x-date-pickers](https://npm.io/package/@mui/x-date-pickers.md) ^7.23.6
- [react-google-button](https://npm.io/package/react-google-button.md) ^0.7.2
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.9
- [purgecss-webpack-plugin](https://npm.io/package/purgecss-webpack-plugin.md) ^4.0.3
- [react-virtualized-auto-sizer](https://npm.io/package/react-virtualized-auto-sizer.md) ^1.0.6

## Recent versions

- 1.5.26 (latest) — 2026-07-13
- 3.1.14 (beta) — 2026-09-22
- 3.1.13 — 2026-09-11
- 3.1.12 — 2026-09-09
- 3.1.11 — 2026-09-03
- 3.1.10 — 2026-08-24
- 3.1.9 — 2026-08-04
- 3.1.8 — 2026-07-24
- 3.1.7 — 2026-07-13
- 3.1.6 — 2026-07-10
- 1.5.25 — 2026-06-24
- 3.1.4 — 2026-06-12
- 3.1.3 — 2026-06-03
- 3.1.2 — 2026-05-18
- 3.1.1 — 2026-04-08
- … 143 more at https://npm.io/package/@hotglue/widget/versions

## README

<p align="center">
  <img src="https://hotglue.com/_next/static/image/src/assets/img/logos/hotglue-2.8b408e668c10caf47944e6aba1bf1c25.svg" width="300px" alt='hotglue'/>
</p>

## `@hotglue/widget`

This package provide a React component in order to use the [hotglue](https://hotglue.com) widget inside your web-app.

## Installation

using npm

```sh
  npm install @hotglue/widget
```
or using yarn

```sh
  yarn add @hotglue/widget
```

## Usage

1. Include `HotglueConfig` as a HoC provider in your code. Provide it your public `apiKey` and `envId`, as shown below:

```jsx
// src/index.js

import HotglueConfig from '@hotglue/widget'
import App from './App'

<HotglueConfig
  config={{
    apiKey: 'your-public-environment-api-key',
    envId: 'your-env-id',
  }}
>
  <App />
</HotglueConfig>
```

2. Now you can launch the widget using the `useHotglue` hook:

```jsx
// src/App.js

import { useHotglue } from '@hotglue/widget';

const App = (props) => {
  const { openWidget } = useHotglue();

  return <div>
    <button onClick={() => openWidget("test-user")}>Open widget</button>
  </div>
}

export default App
```

---

## `useHotglue` hook

You can use the `useHotglue` hook to access several functions we export to help you implement a great user experience!

See the example below.

```jsx
import { useHotglue } from '@hotglue/widget';

const App = (props) => {
  const { link } = useHotglue();

  const handleLink = () => {
    // Directly open widget to link the GitHub source
    link('test-user', 'nXqI5N1Ri', 'github');
  };

  return <button onClick={handleLink}>Link</button>;
};

export default App;
```

The `useHotglue()` hook currently supports the following functions:
- link
- setListener
- reconnect
- disconnect
- createJob
- getLinkedSources

To learn more about these functions, head to the [widget docs](https://docs.hotglue.com/docs/widget).

---
_Source: https://npm.io/package/@hotglue/widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
