@livechat/chat-widget

Chat Widget

Installation

npm install --save @livechat/chat-widget

Preview

In order to embed chat widget's preview in your application, you can import preview function from special entry point (@livechat/chat-widget/preview) and call it with target element, like this:

import preview from '@livechat/chat-widget/preview'

const store = preview({
  target: document.getElementById('chat-widget-preview'),
})

In return you will get a special store object on which you will be able to call methods in order to manipulate store's data, current shown view, etc. It is a @livechat/chat-store's instance - for full API you can look into its documentation.

Besides target you can also pass in state and props.

• state - will be passed in to the @livechat/chat-store as initialState
• props - will be passed to the root Application component
  • onAnimationEnd - gets called when animation ends
  • onClick - gets called whenever user clicks on minimize button (to maximize) or a minimized widget (to minimize). You can return a promise from your onClick to delay actual state change until your promise resolves (useful if you need to i.e. resize containing element before changing state).

Enable feature

Available features:

• agentAvatar
• emailTranscript
• facebookButton
• googlePlusButton
• rating
• twitterButton

store.updateFeature('rating', { enabled: false })

store.updateFeature('facebookButton', {
  enabled: true,
  path: 'https://www.facebook.com/livechatpany',
})

Show mobile view

store.setApplicationState({ mobile: true })

Updating minimized type

store.updateConfig({
  minimizedType: 'bar', // or 'circle'
})

set RTL language type

store.setApplicationState({ rtl: true })

Updating theme

store.updateTheme({
  name: 'smooth', // name: 'modern'
  agentMessageBackgroundColor: '#fffff',
  agentMessageColorText: '#424d57',
  backgroundColor: '#e9eef4',
  minimizedColorBackground: '#ffffff',
  minimizedColorIcon: '#4384F5',
  minimizedColorText: '#000000',
  visitorMessageColorText: '#ffffff',
  visitorMessageBackgroundColor: '#4384f5',
  titlebarBackgroundColor: '#ffffff',
  titlebarText: '#424d57',
  systemMessageColor: '#424d57',
  agentbarBackgroundColor: '#fff',
  agentbarText: '#424d57',
  customJson: '',
})