@livechat/chat-widget v0.4.6
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
asinitialState
props
- will be passed to the rootApplication
componentonAnimationEnd
- gets called when animation endsonClick
- gets called whenever user clicks on minimize button (to maximize) or a minimized widget (to minimize). You can return a promise from youronClick
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'
agentMessageColorBackground: '#fffff',
agentMessageColorText: '#424d57',
backgroundColor: '#e9eef4',
minimizedColorBackground: '#ffffff',
minimizedColorIcon: '#4384F5',
minimizedColorText: '#000000',
visitorMessageColorText: '#ffffff',
visitorMessageColorBackground: '#4384f5',
titlebarBackgroundColor: '#ffffff',
titlebarText: '#424d57',
systemMessageColor: '#424d57',
agentbarBackgroundColor: '#fff',
agentbarText: '#424d57',
customJson: '',
})
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago