有奖捉虫:云通信与企业服务文档专题,速来> HOT

步骤一:初始化 SDK

请参见 初始化SDK
注意
后续步骤需要在 tccc.events.ready 事件成功后才能执行。

步骤二:实现点击按钮触发SDK外呼

Vue
React
原生JS
<template>
<button @click="sdkCall">一键外呼</button>
</template>
<script>
export default {
data() {
phoneNumber: '19999999999' // 请替换为真实外呼号码
},
methods: {
sdkCall() {
window.tccc.Call.startOutboundCall({
phoneNumber: this.phoneNumber,
}).then((res) => {
this.sessionId = res.data.sessionId;
}).catch((err) => {
const error = err.errorMsg;
})
}
}
}
</script>
import { useState } from 'react';
export function CallButton() {
const [phoneNumber, setPhoneNumber] = useState('19999999999') // 请替换为真实外呼号码

function sdkCall(phoneNumber) {
window.tccc.Call.startOutboundCall({
phoneNumber,
}).then((res) => {
this.sessionId = res.data.sessionId;
}).catch((err) => {
const error = err.errorMsg;
})
}

return (
<button onClick={sdkCall}>一键外呼</button>
)
}
<button id="call">一键外呼</button>
<script>
function sdkCall(phoneNumber) {
window.tccc.Call.startOutboundCall({
phoneNumber, // 外呼号码
phoneDesc: 'Tencent' //备注文案,将会在通话条上替代号码的显示
}).then((res) => {
// 外呼成功,并获取外呼ID,后续可用作查询关联录音、服务记录信息
const sessionId = res.data.sessionId
}).catch((err) => {
// 外呼失败,获取失败原因并提示
console.error(err.errMsg)
})
}
// 监听按钮的点击事件,并触发外呼方法
document.getElementById('call').addEventListsner('click', () => {
// 请替换为真实外呼号码
sdkCall('19999999999');
})
</script>
成功触发外呼后,等待对方接听,依次触发相关事件。

外呼事件流程