@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 { useHoory } from "@hoory/embed";
import "./styles.css";

export default function App() {
  const { isInitialized } = useHoory("WORKSPACE_SLUG");
  return (
    <div className="App">
      <h1>Hoory is {isInitialized ? "isInitialized" : "not isInitialized"}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </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");

Contributing Guidelines

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