HALF.done Aiflow JS 库

用于嵌入 HALF.done aiflow 的前端库 Aiflow.

安装

Using npm

执行命令如下:

npm install @halfwork.cn/js

在 HTML 代码中粘贴

<script type="module">
  import Aiflow from 'https://cdn.jsdelivr.net/npm/@halfwork.cn/[email protected]/dist/web.js'

  Aiflow.initStandard({
    aiflow: '工作流ID',
  })
</script>

<aiflow-standard style="width: 100%; height: 600px; "></aiflow-standard>

标准模式

您可以通过单击工作流编辑器中的“服务集成”选项中的“Javascript插件”按钮来获取标准的HTML和Javascript代码。在那里，您可以更改容器尺寸。如下是代码示例:

<script type="module">
  import Aiflow from 'https://cdn.jsdelivr.net/npm/@halfwork.cn/[email protected]/dist/web.js'

  Aiflow.initStandard({
    aiflow: '工作流ID',
  })
</script>

<aiflow-standard style="width: 100%; height: 600px; "></aiflow-standard>

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

弹窗模式

您可以通过单击工作流编辑器中的“服务集成”选项中的“Javascript插件”按钮来获取标准的HTML和Javascript代码。在那里，您可以更改容器尺寸。如下是代码示例:

<script type="module">
  import Aiflow from 'https://cdn.jsdelivr.net/npm/@halfwork.cn/[email protected]/dist/web.js'

  Aiflow.initPopup({
    aiflow: 'my-aiflow',
    apiHost: 'http://localhost:3005',
    autoShowDelay: 3000,
  })
</script>

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

打开或关闭弹出窗口

您可以使用以下命令:

Aiflow.open()

Aiflow.close()

Aiflow.toggle()

例如，您可以将这些命令绑定到按钮元素上:

<button onclick="Aiflow.open()">联系我们</button>

按钮模式

您可以通过单击工作流编辑器中的“服务集成”选项中的“Javascript插件”按钮来获取标准的HTML和Javascript代码。在那里，您可以更改容器尺寸。如下是代码示例::

<script type="module">
  import Aiflow from 'https://cdn.jsdelivr.net/npm/@halfwork.cn/[email protected]/dist/web.js'

  Aiflow.initBubble({
    aiflow: 'my-aiflow',
    previewMessage: {
      message: '我有一个问题要问你!',
      autoShowDelay: 5000
    },
    theme: {
      button: { backgroundColor: '#0042DA', iconColor: '#FFFFFF' },
      previewMessage: { backgroundColor: '#ffffff', textColor: 'black' },
      chatWindow: { backgroundColor: '#ffffff' },
    },
  })
</script>

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

打开或关闭预览消息

您可以使用以下命令:

Aiflow.showPreviewMessage()

Aiflow.hidePreviewMessage()

打开或关闭工作流

您可以使用以下命令:

Aiflow.open()

Aiflow.close()

Aiflow.toggle()

例如，您可以将这些命令绑定到按钮元素上:

<button onclick="Aiflow.open()">联系我们</button>

其他配置

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

Aiflow.initStandard({
  aiflow: 'my-aiflow',
  prefilledVariables: {
    'Current URL': 'https://my-site/account',
    'User name': 'HALF.done',
  },
})

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