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

# Overview

> Using the hotglue widget with React

This section is a reference for all steps involved with using the hotglue widget after [installing the widget](https://docs.hotglue.com/docs/embed-hotglue#installation-react) using the [@hotglue/widget](https://www.npmjs.com/package/@hotglue/widget) package.

To start, you will need to utilize the `HotglueConfig` component near the entrypoint of your React app:

<Card title="HotglueConfig" icon="react" href="hotglue-config">
  `HotglueConfig` is a higher order component that must be included in order for the `@hotglue/widget` package to function correctly.
</Card>

After that, you can utilize `useHotglue` or `Connections` to display the widget in your app:

<CardGroup cols={2}>
  <Card title="useHotglue" icon="square-1" href="use-the-widget">
    The `useHotglue` is the primary way of using the `@hotglue/widget` package outside of the inline `Connections` component. Use this to launch the widget and access utility functions.
  </Card>

  <Card title="Connections" icon="square-2" href="inline-component">
    The `Connections` React component is an inline version of the widget. Rather than opening a modal in your app, the Connections component allows for a more native experience.
  </Card>
</CardGroup>