When you first enter hotglue, an environment will automatically be created for you, and the embed instructions will be displayed as shown below.

3024 — hotglue environment dashboard with embed instructions

Installation (React)

Install the @hotglue/widget package

If your project is built in React, you can install the @hotglue/widget package.

using npm

  npm install @hotglue/widget

or using yarn

  yarn add @hotglue/widget

Launch the widget

First you must include the HotglueConfig provider as a higher order component in your React app. For example, in index.js:

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')
);

Now you can launch the widget using the useHotglue hook:

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;

You can also use the Connections component if you want to use the widget inline rather than in a modal.

Installation (Vanilla JavaScript)

Include the widgetv2 script

The first step of embedding hotglue is to add the widget to your web app. Simply copy the code generated from the hotglue environment dashboard into your HTML head tag.

The embed code follows the following format:

<script src="https://hotglue.xyz/widgetv2.js"></script>
<script>
    HotGlue.mount({
        "api_key": "YOUR-API-KEY",
        "env_id": "YOUR-ENV-ID"
    });
</script>

If you'd like to use async script loading and are having errors with the HotGlue.mount function, you can use the following sample:

<script>
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    head.appendChild(script);

    script.type = "text/javascript";
    script.async = true;
    script.onload = function () {
      HotGlue.mount({
        "api_key": "YOUR-API-KEY",
        "env_id": "YOUR-ENV-ID"
      });
    };
    script.src = "https://hotglue.xyz/widgetv2.js";
</script>

Launch the widget

Now that the hotglue widget is installed in your web app, open the widget by calling HotGlue.open(<tenant id>)

<script>
    function launchHG() {
        // change "test-user-id" to the id of the current user
        HotGlue.open('test-user-id', {});
    }
</script>
<button onclick="launchHG()">
    <span>Open hotglue widget</span>
</button>