@hoory/react NPM

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: "auto" | "light";
  hasLoaded: boolean;
  hideMessageBubble: boolean;
  launcherTitle: string;
  locale: 'en' | 'es' | 'fr' | 'de' | 'it' | 'pt' | 'ru' | 'zh' | ...
  position: "left" | "right";
  resetTriggered: boolean;
  showPopoutButton: boolean;
  type: "standard" | "expanded_bubble";
  useBrowserLanguage: boolean;
  websiteToken: string;
  widgetStyle: "standard" | "expanded_bubble";
  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: (open?: boolean) => void;
  toggleBubbleVisibility: (visible?: boolean) => 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;
};