@hotglue/widget
TypeScript icon, indicating that this package has built-in type declarations

1.4.70 • Public • Published

hotglue

@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>
  1. 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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.4.70
    486
    • latest

Version History

Package Sidebar

Install

npm i @hotglue/widget

Weekly Downloads

854

Version

1.4.70

License

none

Unpacked Size

4.62 MB

Total Files

13

Last publish

Collaborators

  • hassansyyid