跳到主要内容

网页聊天挂件

前置条件

使用挂件之前,请确保具备以下条件:

  • 完成 vocechat 的部署(部署流程请参考:安装部署 VoceChat
  • 域名支持 https (如果挂载的宿主网页没有使用 https,可以使用 http)
  • 完成 vocechat 的初始化流程
  • 允许公共注册(Setting --> Overview) 开启公共注册

使用 widget

以部署实例域名为https://vocechat.yourdomain.com为例:

<!-- 将以下代码片段放于你的网页内,建议放于 body 底部 -->
<script
data-host-id="1"
data-auto-reg="false"
data-login-token=""
data-close-width="52"
data-close-height="52"
data-open-width="380"
data-open-height="680"
data-position="right"
data-welcome="自定义欢迎语"
src="https://vocechat.yourdomain.com/widget.js"
async
></script>

配置项说明:

配置键默认值备注
host-id1指定访客和谁聊天
auto-regfalsetrue: 访客自动注册,无需任何输入项,false: 需要输入邮箱地址
login-token""(空字符串)自有账号生成的登录 token,详见:第三方登录
theme-color#1fe1f9挂件主题色
close-width52(px)挂件关闭态的宽度
close-height52(px)挂件关闭态的高度
open-width380(px)挂件打开态的宽度
open-height680(px)挂件打开态的高度
positionright挂件的位置,居左 (left) 或居右 (right)
welcome你好,很高兴认识你自定义欢迎语
* 所有的配置项目都是可选的,并以data-开头

如果你想更精确控制挂件的样式,可以借助 widget 元素的 ID,自行写 CSS 样式,加到自己的 html 或者 css 文件中,如下示例:

<style>
#VOCECHAT_WIDGET {
left:10px /* left position */
bottom: 5px /* bottom position */
}
</style>

分享链接,直接对话

Widget 支持嵌入的同时,也支持直接链接访问,还是以部署实例域名为https://vocechat.yourdomain.com为例,该 Widget 直接访问的地址为: https://vocechat.yourdomain.com/widget.html?host=1

线上实例

杨二的个人站点

石磊的个人站点

Tom 的个人小站

👏🏻👏🏻👏🏻

欢迎联系我们贡献线上实例