如何在 Twilio Flex Webchat 中动态更改友好名称

Question

所以，我正在关注如何设置 Twilio Flex WebChat 的教程 here。虽然它确实有效，但我需要稍后更改友好名称。

我的应用程序的工作方式是在用户签名之前显示网络聊天，因为脚本位于 react 应用程序的 index.html 文件中。

我需要更改它，以便在他们登录后更新聊天中显示的名称。

这是我目前所拥有的，但它肯定行不通。假设我可以从本地存储中获取名称，并且登录内容有效。

componentDidMount() {
 //other stuff
this.initializeTwilio();
}

initializeTwilio() {
  const name = localStorage.getItem("firstName") +' '+ localStorage.getItem("lastName");
  const appConfig = {
    accountSid :"hidden",
    flexFlowSid: "hidden",
    context: {
      friendlyName: name
    }
  };
  Twilio.FlexWebChat.renderWebChat(appConfig);
}

我也试过这样做：

  let test = Twilio.FlexWebChat.Manager.create(appConfig);
  Twilio.FlexWebChat.ContextProvider.Manager = test;
  Twilio.FlexWebChat.renderWebChat(appConfig);

我也尝试过像这样编辑 MessagingCanvas：

 initializeTwilio =() => {
    const first = localStorage.getItem("firstName");
    let name ="";
    if(first){
      const last = localStorage.getItem("lastName");
      name = first +' '+ last;
    }
    else { 
      name = "Anonymous";
    }
    Twilio.FlexWebChat.MessagingCanvas.defaultProps.memberDisplayOptions = {
      yourDefaultName: name,
      yourFriendlyNameOverride: true
    }
    console.log(Twilio.FlexWebChat.MessagingCanvas.defaultProps);
}

这将更改控制台中的值，但不会更改聊天窗口中显示的名称。

我想我需要更新 appconfig 并重新渲染聊天窗口，但不知道该怎么做，可能有不同的方法来解决问题。我愿意接受这方面的启发。

Answer 1

我不知道您是否想准确显示代理人的姓名或其他内容。但这是我为了显示代理的友好名称而偶然发现的

MessagingCanvas: {
  memberDisplayOptions: {
    theirFriendlyNameOverride: true
  }
}

theirFriendlyNameOverride 标志一旦可用就会覆盖代理的默认友好名称

我的配置示例：

var appConfig = {
  accountSid: "xxxxxx",
  flexFlowSid: "xxxxx",
  componentProps: {
    MessagingCanvas: {
      memberDisplayOptions: {
        yourDefaultName: 'You',
        yourFriendlyNameOverride: false,
        theirFriendlyNameOverride: true
      }
    },
  },
  startEngagementOnInit: true,
};