Tencent Cloud

Recent Pages

Web

最后更新时间：2024-04-01 18:08:50

步骤一：初始化 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>
成功触发外呼后，等待对方接听，依次触发相关事件。
外呼事件流程
﻿
﻿
﻿
﻿
﻿
﻿
﻿