合从文档中心

Appearance

在 Vue 与 Nuxt 项目中安装 ​

接入代码是一段 script 标签，不需要装 npm 包。聊天窗是页面级的，加载一次就一直在，不要放进会随路由反复挂载的组件里。

Vue 项目：加在 index.html ​

在项目入口的 index.html 里，把接入代码加在 </body> 之前。用 Vite 创建的项目在根目录，用 Vue CLI 创建的项目在 public/index.html。

html
<!-- index.html -->
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script async
    src="https://assets.aihecong.com/sdk/hecong.js"
    data-channel-id="0190a1b2-c3d4-7e5f-8a9b-0c1d2e3f4a5b">
  </script>
  <script>
    window.hecong = window.hecong || function (c) { (window.hecong.q = window.hecong.q || []).push(c) }
  </script>
</body>

Nuxt 项目：在 app.vue 里加载一次 ​

Nuxt 没有可以直接编辑的入口 HTML，而聊天窗依赖浏览器环境，不能在服务端执行。在 app.vue 里等页面挂载后加载一次：

vue
<!-- app.vue：整个应用只执行一次的位置 -->
<script setup>
onMounted(() => {
  window.hecong = window.hecong || function (c) { (window.hecong.q = window.hecong.q || []).push(c) }
  const s = document.createElement('script')
  s.async = true
  s.src = 'https://assets.aihecong.com/sdk/hecong.js'
  s.dataset.channelId = '0190a1b2-c3d4-7e5f-8a9b-0c1d2e3f4a5b'
  document.body.appendChild(s)
})
</script>

两段示例里的渠道编号是演示用的，换成你在工作台复制到的那个。

装好之后 ​

部署后打开网站，页面上出现聊天按钮就装好了。

本地开发时按钮不出现的，先看渠道有没有填授权域名，见本地开发与域名限制。

示例里那行占位函数照原样保留：之后在组件里调 window.hecong(cb) 传客户身份、打开聊天窗时，不用管接入脚本有没有加载完，写法见 React 与 Vue 接入示例。

下一步 ​