网页聊天挂件

前置条件

使用挂件之前，请确保具备以下条件：

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

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

<!-- 将以下代码片段放于你的网页内，建议放于 body 底部 -->
<script
  data-host-id="1"
  data-auto-reg="true"
  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>

配置项说明：

配置键	默认值	备注
id	""	指定挂件 ID
host-id	1	指定访客和谁聊天
auto-reg	true	true: 访客自动注册，无需任何输入项，false: 需要输入邮箱地址
login-token	""（空字符串）	用自有平台账号系统自动登录 Voce 的 token。如非对接自有平台请不要填写，对接方式详见:第三方登录
title	(vocecaht 实例名称)	聊天弹窗顶部自定义标题
logo	(vocechat 实例 logo 地址)	聊天弹窗顶部自定义 logo 图标地址
theme-color	#1fe1f9	挂件主题色
close-width	52(px)	挂件关闭态的宽度
close-height	52(px)	挂件关闭态的高度
open-width	380(px)	挂件打开态的宽度
open-height	680(px)	挂件打开态的高度
position	right	挂件的位置，居左 (left) 或居右 (right)
welcome	你好，很高兴认识你	自定义欢迎语，可包含 html 代码片段，比如加个超链接代码：<a href="mailto:co tact@example.com">联系我</a>，或者图片<img src="xxx"/>
* 所有的配置项目都是可选的，并以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。

线上实例

👏🏻👏🏻👏🏻

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

前置条件​

使用 widget​

分享链接，直接对话​

线上实例​

柴柴的个人博客​

杨二的个人站点​

石磊的个人站点​

Tom 的个人小站​

前置条件

使用 widget

分享链接，直接对话

线上实例

柴柴的个人博客

杨二的个人站点

石磊的个人站点

Tom 的个人小站