小组件 API
适合开发者,或任何希望通过自己的按钮唤起聊天的人。
安装中
<script src="https://keyda.in/business/widget.js"
data-key="kb_live_your_key_here" async></script>The script tag needs only src and data-key. Everything else — colours, position, greeting, language — comes from your dashboard so you never have to redeploy your site to change them.
The widget is drawn in the language set on Install → Language your bot speaks: its button, placeholders and notices, and the direction of the layout (Arabic and Urdu are right-to-left). The strings arrive with the widget's configuration, so there is no second request and nothing to translate on your side.
模式
悬浮(默认)。 角落里的启动按钮,点击可打开聊天面板。
内联模式。在页面上放置一个空容器,聊天窗口将自动填入其中:
<div data-keyda-bot style="height:520px"></div>容器需要设置高度。在内联模式下,聊天窗口始终可见,因此无需执行打开或关闭操作。
JavaScript API
脚本加载后可在 window.KeydaBot 上使用:
| 电话 | 功能介绍 |
|---|---|
KeydaBot.open() | 打开聊天面板 |
KeydaBot.close() | 关闭它 |
KeydaBot.toggle() | 打开或关闭 |
KeydaBot.expand() | 使面板与窗口同高,最大宽度可达760像素 |
KeydaBot.shrink() | 返回标准卡片 |
KeydaBot.isOpen | true 聊天窗口可见时 |
KeydaBot.isExpanded | 面板展开时显示 true |
KeydaBot.clientId | 此页面正在使用的 Client ID |
示例 — 通过你自己的“与我们聊天”按钮打开聊天:
<button onclick="KeydaBot.open()">Chat with us</button>脚本采用异步加载,因此页面加载后的短时间内
window.KeydaBot 可能尚不存在。请将处理程序绑定到点击事件,而不是在页面解析时直接调用。它在你的页面上的行为表现
- 面板会打开在启动按钮的上方,启动按钮保持原位并变为关闭控件。再次点击它、点击标头中的 ✕ 或按 Escape 键即可关闭聊天。
- 访客可以从标题栏展开面板——面板会扩展至窗口高度且宽度最大可达 760px,浏览器会记住此选择。在手机上,面板默认已占满全屏,因此不会显示该控制按钮。
- Your logo size setting changes the logo, not the button: the launcher keeps its size and the logo grows inside it. Button size (Install → Appearance) is what resizes the button itself — small, medium or large — whatever shape it is.
- Four button shapes: a pill with your label, a round bubble, a rounded square, and a chat bubble with a tail. The tail sits on the side facing your page.
- 所有内容均渲染在 shadow root 内部,因此您的 CSS 无法破坏小部件,小部件的 CSS 也不会影响您的网站。
- 面板仅在访客打开时加载,因此不会拖慢您的网页速度。
- 访客如果再次访问,24 小时内的对话将会延续,之后将开启新对话。
- 如果无法连接助手,微件会显示一条简短消息,绝不会在你的页面中抛出错误。