Skip to content
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

Closed
l4nos opened this issue Feb 16, 2022 · 1 comment
Closed

Lack of documentation #29

l4nos opened this issue Feb 16, 2022 · 1 comment
Assignees
Labels
documentation Improvements or additions to documentation

Comments

@l4nos
Copy link

l4nos commented Feb 16, 2022

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.

@l4nos l4nos added the enhancement New feature or request label Feb 16, 2022
@walaszczykm
Copy link
Collaborator

walaszczykm commented Feb 16, 2022

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 @livechat/widget-react package directly explains how the LiveChatWidget should be used inside React application.

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 LiveChatWidget which accepts a set of props described in the documentation: README.md#props. Props are split into two categories: Configuration and Event handlers.

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 LiveChatWidget component are properly reactive and you can steer the behavior of the widget by simply changing their values, the same way as you do with many other React components.

An example implementation of controlled widget visibility comes down to the concept of Controlled Component documented directly on official React docs. Properties of LiveChatComponent being used are also described in the project's documentation: visibility, onVisibilityChanged.

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

@walaszczykm walaszczykm added documentation Improvements or additions to documentation and removed enhancement New feature or request labels Feb 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

2 participants