@hotglue/widget

This package provide a React component in order to use the hotglue widget inside your web-app.

Installation

using npm

  npm install @hotglue/widget

or using yarn

  yarn add @hotglue/widget

Usage

1. Include HotglueConfig as a HoC provider in your code. Provide it your public apiKey and envId, as shown below:

// src/index.js

import HotglueConfig from '@hotglue/widget'
import App from './App'

<HotglueConfig
  config={{
    apiKey: 'your-public-environment-api-key',
    envId: 'your-env-id',
  }}
>
  <App />
</HotglueConfig>

2. Now you can launch the widget using the useHotglue hook:

// src/App.js

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

useHotglue hook

You can use the useHotglue hook to access several functions we export to help you implement a great user experience!

See the example below.

import { useHotglue } from '@hotglue/widget';

const App = (props) => {
  const { link } = useHotglue();

  const handleLink = () => {
    // Directly open widget to link the GitHub source
    link('test-user', 'nXqI5N1Ri', 'github');
  };

  return <button onClick={handleLink}>Link</button>;
};

export default App;

The useHotglue() hook currently supports the following functions:

• link
• setListener
• reconnect
• disconnect
• createJob
• getLinkedSources

To learn more about these functions, head to the widget docs.