@hoory/embed NPM

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");