javascript - 如何动态更改 Twilio Flex Webchat 中的友好名称

Question

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

我的应用程序的工作方式是，它在用户登录之前显示网络聊天，因为脚本位于 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);
}

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

我认为我需要更新应用程序配置并重新渲染聊天窗口，但不确定如何执行此操作，并且可能有不同的方法来解决问题。我愿意在这一点上得到启发。

Answer 1

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

MessagingCanvas: {
  memberDisplayOptions: {
    theirFriendlyNameOverride: true
  }
}

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

我的配置示例:

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