@hoory/react

Hoory Inbox on react

Installation

``bash
yarn add @hoory/react
`

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

$3

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.

`typescript
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) => void
setCustomAttributes: (attributes: Record) => 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