# @debox-pro/chat-widget-html

Use `DeBoxChatWidget` with `HTML`

## Getting Started

1. Need to use `NPM`

```shell
npm install @debox-pro/chat-widget-html
```

2. Use DeBoxChatWidget

**Not Support SSR**

### init

```tsx
import { DeBoxChatWidget } from '@debox-pro/chat-widget-html' // Singleton

DeBoxChatWidget.init({
  projectId: string
  conversationId?: string
  zIndex?: string
  containerDomId?: string
  defaultOpen?: boolean // Whether to open the chat window by default (PC only), default is false
  destroyOnClose?: boolean // Whether to destroy the widget when closed, default is false
})
```

### destroy

```tsx
DeBoxChatWidget.destroy()
```

### setConversation

```tsx
DeBoxChatWidget.setConversation(id?: string, open?: boolean)
```

### toggleChat

```tsx
DeBoxChatWidget.toggleChat(open?: boolean)
```

### tag

If you want to know if the example has been initialized

```tsx
console.log(DeBoxChatWidget.tag)
```

### css

```css
debox-chat-widget {
  --debox-chat-bottom: 30px; /* Distance from bottom */
  --debox-chat-right: 30px; /* Distance from right */
  --debox-chat-bubble-width: 60px; /* Bubble size */
  --debox-chat-height: 600px; /* Window height */
  --debox-chat-width: 375px; /* Window width */
  --debox-chat-scale: 1; /* Overall UI scale */
}
```

## Examples

...