-
Notifications
You must be signed in to change notification settings - Fork 8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Lack of documentation #29
Comments
Hello @syn6UK 👋 Please use provided issue templates and do not skip the proposed structure. They are defined for the purpose to point what information we need in order to properly take care of your request. Link for reference: Feature request. Answering your question. The documentation for The main goal of the Chat Widget Adapters project is to provide a framework-aware implementation for using our Chat Widget without the need to directly access our JS API. But the JS API is an option that is always available to you if you wish to integrate the widget that way. Being a framework-aware implementation each adapter integrates the Chat Widget with a framework-specific reactivity model and best practices. In the case of React, we expose the component Using React's definition/approach to how the UI should be rendered it's most commonly represented as: The UI is a result of component function being called with passed properties. That way we should always render Chat Widget in the same state while the same properties are provided. All of the props available on An example implementation of controlled widget visibility comes down to the concept of Controlled Component documented directly on official React docs. Properties of import * as React from 'react'
import { LiveChatWidget } from '@livechat/widget-react'
import type { WidgetState, EventHandlerPayload } from '@livechat/widget-react'
function App() {
const [visibility, setVisibility] = React.useState<WidgetState['visibility']>('minimized')
function handleSelectChange(event: React.ChangeEvent<HTMLSelectElement>) {
setVisibility(event.target.value as WidgetState['visibility'])
}
function handleVisibilityChanged({ visibility }: EventHandlerPayload<'onVisibilityChanged'>) {
setVisibility(visibility)
}
return (
<main>
<div>
<label htmlFor="visibility">Widget visibility: </label>
<select id="visibility" value={visibility} onChange={handleSelectChange}>
<option>minimized</option>
<option>maximized</option>
<option>hidden</option>
</select>
</div>
<LiveChatWidget license="12332502" visibility={visibility} onVisibilityChanged={handleVisibilityChanged} />
</main>
)
} Here is a video showcasing the example: chat-widget-adapters-controlled-visibility.mov |
I am trying to figure out how on earth to programatically trigger the window to open from a button click. We are using React with next.js and the livehcat component is being rendered in the app,.tsx file, but how do you access the methods on that widget? Your documentation gives no clues to this.
The text was updated successfully, but these errors were encountered: