@hoory/embed

Hoory Business Embed UI

Installation

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.

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.

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:

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

API

Controller functions:

Function	Description
showButton	to show toggle button
hideButton	to hide toggle button
openChat	to open chat frame
closeChat	to close chat frame
setUserInfo	to set user information after an async action

Callback functions:

Callback Function	Description
onChatOpen	will be called after chat open
onChatClose	will be called after chat close
onShowButton	will be called after toggle button shown
onHideButton	will be called after toggle button goes hidden
onChatInit	will be called after chat initialized
onScriptLoad	will be called after hoory embed scripts are loaded

Contributing Guidelines

Read through our Contributing guidelines to learn about our submission process, coding rules and more