嵌入Angular的Amazon Connect CCP登录后默认打开软电话页问题

已在Angular项目中通过Amazon Connect Stream API嵌入CCP，当前登录后默认跳转至主页标签，可通过以下步骤修改为直接打开软电话标签：

1. 修正CCP配置中的重复字段 #

首先移除配置中重复的region字段，避免配置冲突：

ccpUrl: environment.amazoneConnecDomain + environment.amazonConnecUrl,
loginPopup: false,
softphone: {
  allowFramedSoftphone: true,
  disableRingtone: false
},
loginOptions: this.getLoginOption(),
region: 'ap-southeast-2', // 仅保留一个region配置项
ccpAckTimeout: 5000,
ccpSynTimeout: 1000,
ccpLoadTimeout: 100000

2. 监听CCP初始化事件，主动切换到软电话标签 #

在Angular组件的CCP初始化逻辑中，监听CCP加载完成事件，调用API切换标签：

import { Connect } from 'amazon-connect-streams';

// 初始化CCP的方法
initCCP() {
  const ccpContainer = document.getElementById('ccp-container');
  const ccpConfig = {
    ccpUrl: environment.amazoneConnecDomain + environment.amazonConnecUrl,
    loginPopup: false,
    softphone: {
      allowFramedSoftphone: true,
      disableRingtone: false
    },
    loginOptions: this.getLoginOption(),
    region: 'ap-southeast-2',
    ccpAckTimeout: 5000,
    ccpSynTimeout: 1000,
    ccpLoadTimeout: 100000
  };

  Connect.initCCP(ccpContainer, ccpConfig)
    .then(ccpInstance => {
      // 监听CCP初始化完成事件
      ccpInstance.on(Connect.EventType.INITIALIZED, () => {
        // 切换到软电话标签，固定ID为'softphone'
        ccpInstance.setActiveTab('softphone');
      });
    })
    .catch(err => console.error('CCP初始化异常:', err));
}

关键说明 #

• Connect.EventType.INITIALIZED事件会在CCP完全加载、登录流程完成后触发，此时调用切换标签API才能确保生效
• setActiveTab方法接受标签固定ID作为参数，软电话标签的ID为softphone

内容的提问来源于stack exchange，提问作者SaqibOctave