Embed hotglue

Embed hotglue into your web app

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>

(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>
Demo application with hotglue widget installed