npm package: @hoory/embed
Description: Hoory script embedder
Latest version: 1.0.82

<p align="center">
  <img src="https://avatars.githubusercontent.com/u/85837820?s=200&v=4?v=1615277229" alt="hoory-logo" width="200px" height="200px"/>
  <br>
  <b>Hoory Business Embed UI</b>
  <br>
</p>

## Installation
```bash
yarn add @hoory/embed
```

### Getting started
Simply put this hook in your app `layout` or `main` file, and it
will load the embedded chat on your website.
```js
import { useEffect } from "react";
import { useHoory } from "@hoory/embed";

export default function App() {
  const { isScriptLoaded, isChatInitialized } = useHoory("SLUG");

  useEffect(() => {
    if (isScriptLoaded) {
      window.hoory.openChat();
    }
  }, [isScriptLoaded]);

  return (
    <div className="App">
      <h1>Hoory script is {isScriptLoaded ? "isInitialized" : "not isInitialized"}</h1>
    </div>
  );
}
```

Also, you can pass additional options as second parameter to `useHoory` hook and
control the widget.
```typescript
type Options = {
  env?: "DEV" | "PROD";
  forceCacheClean?: boolean;
  initializeHidden?: boolean;
  forceChatInit?: boolean;
  user?: {
    firstName?: string;
    lastName?: string;
    email?: string;
    avatar?: string;
  };
  onChatOpen?: () => void;
  onChatClose?: () => void;
  onShowButton?: () => void;
  onHideButton?: () => void;
  onChatInit?: () => void;
  onScriptLoad?: () => void;
};

const api = useHoory('SLUG', options);  
```


on the other hand, you can use the object returned from this hook
in order to control the widget:

```js
const {
  isScriptLoaded,
  isChatInitialized,
  // Functions
  showButton,
  hideButton,
  openChat,
  closeChat,
  setUserInfo,
  // Listeners
  onChatOpen,
  onChatClose,
  onShowButton,
  onHideButton,
  onChatInit,
  onScriptLoad,
} = useHoory("WORKSPACE");
```

## API

<h3>Controller functions:</h3>

<table style="width: 100%; border: 1px solid #a6a6a6">
<thead>
  <th style="padding: 12px;text-align: left;border-bottom: 1px solid #a6a6a6;background: #f1f1f1;">
    Function
  </th>
  <th style="padding: 12px;text-align: left;border-bottom: 1px solid #a6a6a6;background: #f1f1f1;">
    Description
  </th>
</thead>
<tbody>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      showButton
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      to show toggle button
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      hideButton
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      to hide toggle button
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      openChat
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      to open chat frame
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      closeChat
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      to close chat frame
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      setUserInfo
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      to set user information after an async action
    </td>
  </tr>
</tbody>
</table>

<hr />

<h3>Callback functions:</h3>

<table style="width: 100%;border: 1px solid #a6a6a6;">
<thead>
  <th style="padding: 12px;text-align: left;border-bottom: 1px solid #a6a6a6;background: #f1f1f1;">
    Callback Function
  </th>
  <th style="padding: 12px;text-align: left;border-bottom: 1px solid #a6a6a6;background: #f1f1f1;" >
    Description
  </th>
</thead>
<tbody>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      onChatOpen
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      will be called after chat open
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      onChatClose
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      will be called after chat close
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      onShowButton
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      will be called after toggle button shown
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      onHideButton
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      will be called after toggle button goes hidden
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      onChatInit
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      will be called after chat initialized
    </td>
  </tr>
  <tr>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      onScriptLoad
    </td>
    <td style="padding: 8px;border-bottom: 1px solid #eaeaea">
      will be called after hoory embed scripts are loaded
    </td>
  </tr>
</tbody>
</table>


## Contributing Guidelines

Read through our [Contributing guidelines](https://github.com/orgs/hoory-com/teams/hoory-business/discussions/1) to learn about our submission process, coding rules and more