安装

npm install @halfwork.cn/react

标准模式

import { Standard } from '@halfwork.cn/react'

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

此代码正在创建一个宽度为 100% 和 高度为600px的容器

弹窗模式

import { Popup } from '@halfwork.cn/react'

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

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

打开或关闭弹出窗口

您可以使用以下命令:

import { open } from '@halfwork.cn/react'

open()

import { close } from '@halfwork.cn/react'

close()

import { toggle } from '@halfwork.cn/react'

toggle()

按钮模式

import { Bubble } from '@halfwork.cn/react'

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 秒后显示预览消息

打开或关闭预览消息

您可以使用以下命令:

import { showPreviewMessage } from '@halfwork.cn/react'

Aiflow.showPreviewMessage()

import { hidePreviewMessage } from '@halfwork.cn/react'

Aiflow.hidePreviewMessage()

打开或关闭聊天窗口

您可以使用以下命令:

import { open } from '@halfwork.cn/react'

open()

import { close } from '@halfwork.cn/react'

close()

import { toggle } from '@halfwork.cn/react'

toggle()

其他配置

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

import { Standard } from '@halfwork.cn/react'

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。因此，无需手动将查询参数传输到机器人嵌入配置