Installation

yarn add @hoory/react

This can work on next.js as well, follow the instructions below

Getting started

Simply put this hook in your app layout or main file, and it will load the embedded chat on your website.

Also, you can pass additional options as second parameter to useHoory hook and control the widget.

const api: API = useHoory("WEBSITE_TOKEN", options: Options);

type API = {
  baseUrl: string
  darkMode: DarkMode
  hasLoaded: boolean
  hideMessageBubble: boolean
  isOpen: boolean
  lazyLoad: boolean
  launcherTitle: string
  locale: Locales
  position: BubblePosition
  resetTriggered: boolean
  showPopoutButton: boolean
  type: WidgetType
  useBrowserLanguage: boolean
  forceManualLinkManagement: boolean
  escapeUnreadView: boolean
  autoOpenUnreadConversation: boolean
  websiteToken: string
  widgetStyle: WidgetType
  setUser: (
    userUniqueIdentifier: string,
    userAttributes?: {
      name?: string
      avatar_url?: string
      email?: string
      identifier_hash?: string
      phone_number?: string
      description?: string
      country_code?: string
      city?: string
      company_name?: string
      social_profiles?: {
        twitter?: string
        linkedin?: string
        facebook?: string
        github?: string
      }
    }
  ) => void
  popoutChatWindow: () => void
  removeLabel: (label: string) => void
  reset: () => void
  deleteConversationCustomAttribute: (key: string) => void
  deleteCustomAttribute: (key: string) => void
  toggle: (state?: 'open' | 'open:last-conversation' | 'open:new-conversation' | 'close') => void
  toggleBubbleVisibility: (value: 'show' | 'hide') => void
  setConversationCustomAttributes: (attributes: Record<string, string>) => void
  setCustomAttributes: (attributes: Record<string, string>) => void
  setLabel: (label: string) => void
  setLocale: (locale: Locales) => void
}


type Options = {
  env?: "DEV" | "PROD";
  position?: 'left' | 'right';
  type?: 'standard' | 'expanded_bubble';
  launcherTitle?: string;
  hideMessageBubble: false;
  locale: 'en' | 'es' | 'fr' | 'de' | 'it' | 'pt' | 'ru' | 'zh' | ...
  useBrowserLanguage: boolean;
  darkMode: 'auto' | 'light';
  avatar: string;
  showPopoutButton: boolean;
};

Contributing Guidelines

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