Overview
When you first enter hotglue, an environment will automatically be created for you, and the embed instructions will be displayed as follows


hotglue environment dashboard with setup instructions
Add the widget
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
The embed code follows the following format:
<script src="https://hotglue.xyz/widget.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/widget.js";
</script>
(React) Install hotglue-elements
If your project is built in React, you can install the hotglue-elements package.
npm install --save hotglue-elements
Then you can add the Connections
component
import React, {Component} from 'react'
import {Connections} from 'hotglue-elements'
import 'hotglue-elements/dist/index.css'
class IntegrationsPage extends Component {
render() {
// the tenant prop is used to pass the id of the current user
return <Connections tenant="test-user-id" />
}
}


Sample integrations page powered by hotglue-elements
(Standard JS) Launch the widget
Now that the hotglue widget is installed in your web app, open the widget by calling HotGlue.show(<user id>)
The user id you provide should be unique to the current user of your web app. hotglue will automatically add this user and keep track of any data they connect.
<script>
function launchHG() {
// change "test-user-id" to the id of the current user
HotGlue.show('test-user-id', {});
}
</script>
<button onclick="launchHG()">
<span>Open hotglue widget</span>
</button>
Updated 6 months ago