@namiq/chat-widget v0.1.48
NamiQ Chat Widget
Use to embed NamiQ chat widget to your web site.
Installation
npm install @namiq/chat-widget --save
oryarn add @namiq/chat-widget
Usage
- Import
import NamiQChatWidget from '@namiq/chat-widget';
- Insert to HTML
<div id="chat-widget"></div>
- Init widget
Important Chat widget only work in client side. If you are using server sider rendering (SSR) please wrap widget to forece it render in client side.NamiQChatWidget.init({ selector: '#chat-widget', socketUrl: '<YOUR_SOCKET_URL>', } as any);
- Options
Props/params | Default value | Description |
---|---|---|
selector | undefined | Where chat widget will be render. |
initPayload | undefined | Payload sent to server when conversation starts |
socketUrl | undefined | Socket URL |
apiKey | undefined | Request API key |
socketPath | /socket.io | Socket Path |
showCloseButton | true | Show close button in header |
showFullScreenButton | false | Show full screen button in header |
hideWhenNotConnected | true | Hide widget when server is not available |
language | en | Widget text language (not bot language) |
defaultProductID | -1 | Product ID send to server when conversation starts |
logoUrl | NamiQ Logo URL | Logo URL |
mainColor | #3366ff | Primary color |
conversationBackgroundColor | #ffffff | Background of conversation area |
userTextColor | #FBFBFF | Color of message from user |
userBackgroundColor | #6F54FF | Background of message from user |
assistTextColor | #0D0054 | Color of message from bot or agent |
assistBackgroundColor | #EDEAFF | Background of message from bot or agent |
Method | Params | Description |
---|---|---|
openChat | None | Open Chat widget programmatic. |
closeChat | None | Close Chat widget programmatic. |
toggleChat | None | Toggle Chat widget programmatic. |
hideChat | None | Hide Chat widget programmatic. |
toggleInputDisabled | None | Toggle Disable Chat Input programmatic. |
showChat | None | Show Chat widget programmatic. |
setProductId | id | Update Product ID value. |
openBanner | html | Open widget banner by provide a HTML string or plaintext. |
#Login Object:
{
"consumerName": "User full name",
"consumerPhone": "User Phone",
"consumerEmail": "User Email"
}
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago