如何在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);
}

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

我认为我需要更新appconfig并重新渲染聊天窗口，但不确定如何执行此操作，可能有另一种解决问题的方法。我很乐意对此有所启发。

Answer 1

我不知道您是否要确切显示座席的姓名或其他名称。但是，这是我偶然发现的，目的是显示座席的friendlyName

MessagingCanvas: {
  memberDisplayOptions: {
    theirFriendlyNameOverride: true
  }
}

theirFriendlyNameOverride标志会覆盖座席的默认友好名称

我的配置示例：

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