小组件 API

适合开发者，或任何希望通过自己的按钮唤起聊天的人。

安装中

<script src="https://keyda.in/business/widget.js"
        data-key="kb_live_your_key_here" async></script>

该 script 标签只需要 src 和 data-key。其余的一切 — 颜色、位置、问候语、语言 — 都来自您的控制面板，因此您无需重新部署网站即可修改这些设置。

小组件会以安装 → 机器人所使用的语言中设置的语言显示：按钮、输入提示、通知文字，以及布局方向（阿拉伯语和乌尔都语为从右到左）。这些文本会随小组件的配置一同下发，因此不会产生额外请求，您也无需自行翻译任何内容。

模式

悬浮（默认）。 角落里的启动按钮，点击可打开聊天面板。

内联模式。在页面上放置一个空容器，聊天窗口将自动填入其中：

<div data-keyda-bot style="height:520px"></div>

容器需要设置高度。在内联模式下，聊天窗口始终可见，因此无需执行打开或关闭操作。

JavaScript API

脚本加载后可在 window.KeydaBot 上使用：

示例 — 通过你自己的“与我们聊天”按钮打开聊天：

<button onclick="KeydaBot.open()">Chat with us</button>

它在你的页面上的行为表现

• 面板会打开在启动按钮的上方，启动按钮保持原位并变为关闭控件。再次点击它、点击标头中的 ✕ 或按 Escape 键即可关闭聊天。
• 访客可以从标题栏展开面板——面板会扩展至窗口高度且宽度最大可达 760px，浏览器会记住此选择。在手机上，面板默认已占满全屏，因此不会显示该控制按钮。
• 您的 Logo 大小 设置只会改变 Logo，而不会改变按钮：启动器保持原有大小，Logo 会在其内部放大。按钮大小（安装 → 外观）才是用来调整按钮本身尺寸的设置 — 小、中或大 — 无论是哪种形状。
• 四种按钮形状：带文字标签的胶囊形、圆形气泡、圆角方形，以及带尾巴的聊天气泡。尾巴指向您的页面一侧。
• 所有内容均渲染在 shadow root 内部，因此您的 CSS 无法破坏小部件，小部件的 CSS 也不会影响您的网站。
• 面板仅在访客打开时加载，因此不会拖慢您的网页速度。
• 如果访客在 24 小时内返回，对话会继续；超过这段时间则会重新开始。重新打开面板会恢复原有的对话线程 — 包括文件，以及一个仍在等待回答的欢迎流程问题。
• 输入框中的回形针图标可让访客为一条消息附加最多三张图片或文档（大小与类型详见限制与安全）。图片会在浏览器中先缩小后再上传，因此一张 1200 万像素的照片上传时体积只有几百 KB。在安装中关闭文件功能后，该按钮就会消失。
• 欢迎流程以普通聊天气泡的形式运行：选项会显示为气泡下方的按钮，可选步骤会出现“跳过”按钮，输入框的占位文字则会变成当前问题。已完成的流程会在访客的浏览器中记住 30 天。
• 如果无法连接助手，微件会显示一条简短消息，绝不会在你的页面中抛出错误。

在应用 SDK 中

同一套聊天在每个 SDK 中运行，因此附件和欢迎流程无需发版即可进入您的应用 — 但有一个例外。从网页视图中打开文件选择器需要由宿主应用来完成。iOS、React Native 和 Ionic 包已经做到了这一点；Android 和 Flutter 需要 SDK 0.1.4 或更高版本。在更早的版本中，小组件会识别出所处的外壳环境，并隐藏回形针图标，而不是显示一个点了没有反应的按钮。