@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
  • 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).
  • onToggleEnd- gets called after maximized state gets changed

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'
})

Updating theme

store.updateConfig({
  theme: {
    Message: {
      own: {
        Bubble: {
          css: {
            color: '#fff',
            background: '#aa8bd2',
          },
        },
      },
    },
    MinimizedBar: {
      css: {
        backgroundColor: '#fff',
        color: '#000',
      },
      Icon: {
        color: 'red',
      },
    },
    MinimizedBubble: {
      css: {
        backgroundColor: '#fff',
      },
      Icon: {
        color: 'red',
      },
    },
  },
})