npm package: @namiq/chat-widget
Description: Use to embed NamiQ chat widget to your web site.
Latest version: 0.1.48

## NamiQ Chat Widget

Use to embed NamiQ chat widget to your web site.

1.  **Installation**

    `npm install @namiq/chat-widget --save`
    or
    `yarn add @namiq/chat-widget`

2.  **Usage**

- Import
  ```typescript
  import NamiQChatWidget from '@namiq/chat-widget';
  ```
- Insert to HTML
  ```html
  <div id="chat-widget"></div>
  ```
- Init widget
  ```typescript
  NamiQChatWidget.init({
    selector: '#chat-widget',
    socketUrl: '<YOUR_SOCKET_URL>',
  } as any);
  ```
  **_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.

3.  **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:

```json
{
  "consumerName": "User full name",
  "consumerPhone": "User Phone",
  "consumerEmail": "User Email"
}
```