palavyr-chat-widget

Demo Page

Usage

import Widget from 'palavyr-chat-widget';

const App = () => {
    return <Widget src={"https://www.some-url.com/"} resizable />
}

Description

This project holds a pure react component with few dependencies that can be used to load things in a launchable chat window.

There are essentially two use cases:

1. Loading an iframe - whereby you will provide a valid and compatible url (.e.g https://www.google.com is not a valid url)
2. Loading custom content - whereby you will provide a react component, which will then be rendered in the container.

API

Prop	Type	Default Value	Description
customLauncher?	AnyFunction	undefined	Function that is used to trigger the launcher toggle action
onToggle?	(widgetOpenState: boolean, setWidgetOpenState: React.Dispatch<React.SetStateAction) => void;)	undefined	Function that will fire when the launcher is clicked to toggle the widget
launcherOpenLabel	string	''	Label provided to the Launcher when it is open
launcherCloseLabel	string	''	Label provided to the Launcher when it is closed
launcherCloseImg	string	''	Image provided to the launcher when closed (shows up in the clickable launcher button)
launcherOpenImg	string	''	Image provided to launcher when open (shows up in the clickable launcher button)
resizable	boolean	true	When true, you can drag the left side of the widget
startOpen	boolean	false	When true, and fixedPosition is False, the widget will start in the open state
alternateContent?	AltContent	undefined	A Component that will be rendered instead of the iFrame. No styles are applied internally to the alternate component
fixedPosition	boolean	true	If true, the launcher will be visible and the widget will be fixed to the bottom left right corner (depending on the alignLeft value)
open?	boolean	undefined	prop used to control the state of the widget (open or closed state)
setOpen?	Dispatch<SetStateAction>	undefined	The dispatch hook for the open control prop (todo: remove this dependency)
alignLeft	boolean	false	If true, the widget aligns to the left side of the screen instead of the right
closeComponent?	React.ReactNode	undefined	Component rendered as the clickable button to open and close the widget when closed
openComponent?	React.ReactNode	undefined	Component rended as the clickable button to open and close the widget when opened
launchComponent?	React.ReactNode	undefined	Component rendered as the clickable button to open and close the widget when open
persistState	boolean	true	If true, the state of the container will be maintained (i.e. will not be unmounted) when the launcher is closed e.g. this is useful if you'd like to persist the same conversation across different pages (and the widget sits outside of the router)
containerStyles	React.CSSProperties	undefined	Styles applied ot the div that contains the iframe. (There is only one such outer div)
containerClassName	string (class names)	''	className applied ot the div that contains the iframe. (There is only one such outer div)
customSpinner	React.ReactNode or null	null	An optional component that is shown when the iframe is loading. A default spinner is used if this not provided.
IframeProps?	React's IFrame Props -- see below	undefined	Additional props that are specific to the React iframe element may be passed for further customization.
autoOpen?	number	undefined	When defined, this causes the widget to automatically open after the provided number of milliseconds
autoOpenCallback?	Any void function that takes no arguments, i.e. () => void	undefined	A function to call when the auto open event occurs
disableBounce?	boolean	false	Disable bounce animation behavior when using the default launcher componentoccurs
openImgProps?	React.ImgHTMLAttributes	{}	img element props passed to the default launcher image element when in the 'click to open' state occurs
closeImgProps?	React.ImgHTMLAttributes	{}	img element props passed to the default launcher image element when in the 'click to close' state occurs
launcherButtonAdditionalStyles?	React.CSSProperties	{}	Additional styles passed to the default launcher button
onEffect?	(widgetOpenState: boolean, setWidgetOpenState: SetState) => void;	undefined	Function to call on effect
onEffectDependencyArray?	Array	undefined	Dependency array for the useEffect provided for the onEffect callback. required if onEffect is supplied.

iframeProps: React.DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>

Package details

=== Tarball Details ===
name:          palavyr-chat-widget
version:       1.5.0
filename:      palavyr-chat-widget-1.5.0.tgz
package size:  22.3 kB
unpacked size: 125.2 kB
total files:   15