@shenyin/embedded-call-widget

安装

npm install @shenyin/embedded-call-widget

ESM

适用于 Vue / React / 现代 bundler；默认不需要传 runtimeUrl。

import { createCallButton } from '@shenyin/embedded-call-widget'

createCallButton({
  mount: '#call-button',
  apiBaseUrl: 'https://your-gateway.example/proxy/',
  siteKey: 'your-site-key',
  text: '值班员',
  callerInfo: { nickname: '访客示例', stStatus: '状态示例' },
  advanced: {
    visitorBusinessKey: 'your-visitor-business-key'
  }
})

IIFE

适用于 script / CDN / 自托管静态资源；默认按脚本相对路径推断 runtime。

<div id="call-button"></div>
<script src="https://cdn.jsdelivr.net/npm/@shenyin/[email protected]/embedded-call-widget.iife.js"></script>
<script>
  EmbeddedCallWidget.createCallButton({
    mount: '#call-button',
    apiBaseUrl: 'https://your-gateway.example/proxy/',
    siteKey: 'your-site-key',
    text: '值班员',
    callerInfo: { nickname: '访客示例', stStatus: '状态示例' },
    advanced: {
      visitorBusinessKey: 'your-visitor-business-key'
    }
  })
</script>

参数

• 必填：mount、apiBaseUrl、siteKey
• 可选：text、callerInfo、businessKey、advanced.visitorBusinessKey、displayName、runtimeUrl、runtimeModuleLoader、transportBaseUrl、accessToken、debug、draggable
• text：访客主动拨打面板中的呼叫对象名，默认 值班员
• draggable：是否允许电话图标在屏幕范围内拖动，默认 true；若 mount 元素没有有效定位，电话图标会默认以内联样式固定在页面右上角：position: fixed; top: 4px; right: 18px; z-index: 888;
• callerInfo：平台端展示的访客补充信息，形如 { nickname: '访客示例', stStatus: '状态示例' }
• 回调：onStateChange、onStandbyReady、onIncomingCall、onCallAnswered、onCallRejected、onCallMissed
• runtimeUrl：主要给 IIFE / CDN / 自托管静态资源；ESM import 误传时默认忽略
• 若站点启用了接入令牌，正式接入应由代理层注入 X-Embedded-Call-Access-Token；不要把 token 明文写进初始化配置
• 默认普通模式：挂载后只显示电话图标，后台自动准备待机能力
• 调试模式门禁：只有 debug=true 且真实链路中的 X-Embedded-Call-Access-Token 已通过服务端校验时，才展示调试面板