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>