JavaScript reference

Using the hotglue widget with plain JavaScript

After installing the widget using plain JavaScript, you can reference the HotGlue (or window.HotGlue) object and all the utility functions included in the widget.

This page is a reference of all the functions accessible from the HotGlue object exposed by the widgetv2.js script.

open

Usage

HotGlue.open(user id, options)

Parameters

NameTypeDescription
user idstringID of current user of your application.
optionsobjectsoption objects

Description

Launches the hotglue widget for user with specified options.


close

Usage

HotGlue.close()

Description

Closes the hotglue widget.


preload

Usage

HotGlue.preload(user id, flow id)

Parameters

NameTypeDescription
user idstringID of current user of your application.
flow idstringID of flow you wish to connect. Every flow in hotglue has an ID which can be found from the admin panel or API.

Description

Preloads the relevant user/flow data for usage with the HotGlue.link function.


link

Usage

HotGlue.link(user id, flow id, source, preloaded, options)

Parameters

Name

Type

Description

user id

string

ID of current user of your application.

flow id

string

ID of flow you wish to connect. Every flow in hotglue has an ID which can be found from the admin panel or API.
source

source

string

ID of source you wish to connect – typically just the name of the source in lowercase. Full catalog is accessible via API.

Ex. salesforce

preloaded

boolean

Mark this flag as true if you used the HotGlue.preload function to improve load time. Defaults to false

options

object

Object containing options to configure the form:

{
  "helperText": "Need help finding credentials? [Read the docs](https://docs.hotglue.xyz)"
}

Description

If specified source is not linked, this will open a popup window for user to login
If specified source is linked, this will open the hotglue widget under specified flow so user can manage the source.


reconnect

Usage

HotGlue.reconnect(user id, flow id, entity id, options)

Parameters

Name

Type

Description

user id

string

ID of current user of your application.

flow id

string

ID of flow you wish to reconnect. Every flow in hotglue has an ID which can be found from the admin panel or API.
source

entity id

string

ID of source or target you wish to connect – typically just the name of the source in lowercase. Full catalog is accessible via API.

Ex. salesforce

options

object

Object containing options to configure the form:

{
  "isTarget": false
}

Description

Used to reconnect an OAuth entities. Note for non-OAuth sources or targets, this will have no effect. In order to reconnect a target, you must pass the isTarget parameter to the options object.


disconnect

Usage

HotGlue.disconnect(user id, flow id, entity id, options)

Parameters

Name

Type

Description

user id

string

ID of current user of your application.

flow id

string

ID of flow you wish to disconnect. Every flow in hotglue has an ID which can be found from the admin panel or API.
source

entity id

string

ID of source or target you wish to disconnect – typically just the name of the source in lowercase. Full catalog is accessible via API.

Ex. salesforce

options

object

Object containing options to configure the form:

{
  "isTarget": false
}

Description

Used to disconnect an entity (source or target). Note you must pass the isTarget parameter to the options object if disconnecting a linked target.


setListener

Usage

HotGlue.setListener(listener)

Parameters

Name

Type

Description

listener

object

Object containing all listeners. See list of available events below.
ex.
{onSourceLinked: (source, flow) => console.log(JSON.stringify(source))}

Description

Updates current listener configuration to specified listener object


getLinkedSources

Usage

HotGlue.getLinkedSources(flow id, user id)

Parameters

NameTypeDescription
flow idstringID of flow to query
user idstringID of user to query

Response

🚧

Returns a Promise which must be awaited or assigned a callback to extract relevant data

[{
    "tap": "salesforce",
    "domain": "salesforce.com",
    "label": "Salesforce",
    "icon": "https://s3.amazonaws.com/other.hotglue.xyz/images/salesforce.svg",
    "tap_url": "https://login.salesforce.com/services/oauth2/authorize?response_type=code&client_id=...",
    "auth_url": "https://login.salesforce.com/services/oauth2/token",
    "type": "oauth",
    "description": "Enable your customers to sync CRM data (Leads, Sales, etc.) directly from Salesforce using hotglue.",
    "client_id": "...",
    "fieldMap": {}
}]

Description

Convenience function wrapping the hotglue API to check if user has linked sources.


createJob

Usage

HotGlue.createJob(flow id, user id)

Parameters

NameTypeDescription
flow idstringID of flow
user idstringID of user

Response

🚧

Returns a Promise which must be awaited or assigned a callback to extract relevant data

{
    "job_id": "lmaEbA",
    "env_id": "dev.example-env.hotglue.xyz",
    "job_name": "test_job:_V-vgdlLN",
    "tenant": "default",
    "started_by": "default",
    "flow": "l8odS2mce",
    "s3_root": "default/flows/l8odS2mce/jobs/lmaEbA",
    "start_time": "2020-12-30T18:01:01.828266+00:00",
    "state": {},
    "tap": "quickbooks:sandbox",
    "status": "ETL_FAILED",
    "message": "ETL error...",
    "last_updated": "2020-12-30T20:31:00.081282+00:00"
}

Description

Convenience function wrapping the hotglue API to run a job for the user.


hasMounted

Usage

HotGlue.hasMounted()

Description

Returns true if the widget has mounted and is ready for use. false otherwise.


Additional parameters

Detailed descriptions of parameters mentioned above are listed here.

options

📘

All parameters in the options object are optional

Name

Type

Description

filter

object

Object specifying any filters to apply
ex.
{flowFilter: (flow) => return flow.name === "Sales"}

listener

object

Object specifying any listeners to apply
ex.
{onSourceLinked: (source, flow) => console.log(JSON.stringify(source))}

localization

object

A localization object to override text in the widget

demo

boolean

Launch in demo mode, which prevents linking/unlinking

breadcrumbs

boolean

Enable/disable usage of breadcrumbs

multipleSources

boolean

Allow tenants to link multiple sources in each flow

hideBackButtons

boolean

Hides the back buttons in the widget.
Usually used for the linkfunction

flow

string

Instead of showing list of flows, will open to this flow_id instead

jwtToken

string

JWT token created with your private signing key

helperText

string

Override the helper text on the connection screen of the widget
Supports markdown.


listener

List of available events in hotglue, which are passed as standard JavaScript functions.

onWidgetOpen

Signature ()

onWidgetClose

Signature ()

onPopupClose

Signature (id, flow_id)

NameTypeDescription
idstringID of source/target being linked
flow idstringID of flow being linked

onTargetLinked

Signature (target, flow_id)

NameTypeDescription
targetobjectThe target that has been linked. Follows same response structure as linked targets API
flow idstringID of flow that has been linked

onSourceLinked

Signature (source, flow_id)

NameTypeDescription
sourceobjectThe source that has been linked. Follows same response structure as ​linked sources API
flow idstringID of flow that has been linked

onSourceLinkCanceled

Signature (tap, flow_id)

NameTypeDescription
tapstringID of source
flow idstringID of flow

onSourceUnlinked

Signature (source, flow_id)

NameTypeDescription
sourceobjectThe source that has been unlinked. Follows same response structure as ​ linked sources API
flow idstringID of flow that has been unlinked

onStartJob

Signature (tap_id, flow_id, user_id)

NameTypeDescription
tap_idstringID of source the job is running for
flow_idstringID of flow source is linked under
user_idstringID of user who started job

localization

Object specifying localization overrides for text in the widget.

{
    "startingScreen": {
        "header": "Add a Title Here",
        "subtitle": "Put some caption here"
    },
    "connectSourceScreen": {
        "instructionText": "Link your account below",
        "connectDataButtonText": "Link my account now",
        "saveConfigurationButtonText": "Save my configuration"
    },
    "copySourceScreen": {
        "header": "Duplicate the same setup from this flow?",
        "actionButton": "No, I'll use a different account"
    },
    "quickActions": {
        "runJobsTitle": "Run Jobs",
        "runJobsSubtitle": "Some instructions for your users to run jobs",
        "editFieldMapTitle": "Field Map Editor",
        "editFieldMapSubtitle": "Some instructions for your users to edit Field Map",
        "reconnectTitle": "Reconnect Source",
        "reconnectSubtitle": "Some instructions for your users to reconnect the source",
        "editScheduleTitle": "Edit Time of Sync",
        "editScheduleSubtitle": "Some instructions for your users to edit sync schedule",
        "unlinkTitle": "Unlink Source",
        "unlinkSubtitle": "Some instructions for your users to unlink the source"
    },
    "jobHistory": {
        "noJobsCaption": "Add text to guide user/s to run jobs!"
    },
    "searchSource": {
        "searchSourceText": "Search App",
        "noSourceCaption": "Add text if there is no source upon search",
        "noSourceAvailableCaption": "There are no source for this flow, try add on the dashboard"
    },
    "searchTarget": {
        "searchTargetText": "Search Target App",
        "noTargetCaption": "Add text if there is no target upon search",
        "noTargetAvailableCaption": "There are no target for this flow, try add on the dashboard"
    }
}

Did this page help you?