## 安装

```bash
npm install @halfwork.cn/nextjs
```

## 标准模式

```tsx
import { Standard } from '@halfwork.cn/nextjs'

const App = () => {
  return (
    <Standard
      aiflow="lead-generation-copy-3luzm6b"
      style={{ width: '100%', height: '600px' }}
    />
  )
}
```

将创建一个宽度为 100% 和  高度为600px的容器

## 弹窗模式

```tsx
import { Popup } from '@halfwork.cn/nextjs'

const App = () => {
  return <Popup aiflow="lead-generation-copy-3luzm6b" autoShowDelay={3000} />
}
```

此代码将在 3 秒后自动触发弹出窗口.

### Open or Close a popup

您可以使用以下命令:

```js
import { open } from '@halfwork.cn/nextjs'

open()
```

```js
import { close } from '@halfwork.cn/nextjs'

close()
```

```js
import { toggle } from '@halfwork.cn/nextjs'

toggle()
```

## 按钮模式

```tsx
import { Bubble } from '@halfwork.cn/nextjs'

const App = () => {
  return (
    <Bubble
      aiflow="lead-generation-copy-3luzm6b"
      previewMessage={{
        message: 'I have a question for you!',
        autoShowDelay: 5000,
        avatarUrl: 'https://avatars.githubusercontent.com/u/16015833?v=4',
      }}
      theme={{
        button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
        previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
      }}
    />
  )
}
```

此代码将显示气泡，并在 5 秒后显示预览消息

### 打开或关闭预览消息

您可以使用以下命令:

```js
import { showPreviewMessage } from '@halfwork.cn/nextjs'

Aiflow.showPreviewMessage()
```

```js
import { hidePreviewMessage } from '@halfwork.cn/nextjs'

Aiflow.hidePreviewMessage()
```

### 打开或关闭聊天窗口

您可以使用以下命令:

```js
import { open } from '@halfwork.cn/nextjs'

open()
```

```js
import { close } from '@halfwork.cn/nextjs'

close()
```

```js
import { toggle } from '@halfwork.cn/nextjs'

toggle()
```

## 其他配置

您可以通过添加“prefilledVariables”选项在嵌入代码中预填充机器人变量值。下面是一个示例：

```tsx
import { Standard } from '@halfwork.cn/nextjs'

const App = () => {
  return (
    <Standard
      aiflow="lead-generation-copy-3luzm6b"
      style={{ width: '100%', height: '600px' }}
      prefilledVariables={{
        'Current URL': 'https://my-site/account',
        'User name': 'John Doe',
      }}
    />
  )
}
```

它将用“https：my-siteaccount”预填充“当前URL”变量，用“John Doe”预填充“用户名”变量。有关变量的更多信息：[here]（editorvariables）。请注意，如果您的网站 URL 包含查询参数（即 https：halfwork.cn？User%20name=John%20Doe），变量将自动注入 aiflow。因此，无需手动将查询参数传输到机器人嵌入配置。
