Install the widget
Get started with embedding hotglue
When you first enter hotglue, an environment will automatically be created for you, and the embed instructions will be displayed as shown below.


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>
Updated about 2 months ago