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

# HotglueConfig

> HotglueConfig component reference

# Description

The `HotglueConfig` is a higher order component that must be included in order for the `@hotglue/widget` package to function correctly.

# Usage

Since the `HotglueConfig` is a provider, it should be included near the entrypoint of your React app. Below is an example of including in the `index.js` of a create-react-app structure.

```javascript index.js theme={null}
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import HotglueConfig from '@hotglue/widget';

ReactDOM.render(
  <HotglueConfig
    config={{
      apiKey: 'your-public-environment-api-key',
      envId: 'your-env-id'
    }}
  >
    <App />
  </HotglueConfig>,
  document.getElementById('root')
);

```

# Properties

## config

The `config` property is an object which is used to connect to your hotglue environment. The object takes the following parameters:

| Name      | Description                                                                                   | Required |
| --------- | --------------------------------------------------------------------------------------------- | -------- |
| `apiKey`  | Your public environment api key                                                               | true     |
| `envId`   | Your environment id Usually something like `dev.hotglue.acme.com`                             | true     |
| `options` | [An options object](https://docs.hotglue.com/docs/embed-hotglue-javascript-reference#options) | false    |

## Implementation notes

* The `<HotglueConfig>` component should live at a common ancestor of all the places in your code where you simultaneously use the widget. Multiple copies of the `<HotglueConfig>` component **can not** be mounted simultaneously.