How to Dynamically change the friendly name in Twilio Flex Webchat

Question

So, I am following along the tutorial here on how to setup Twilio Flex WebChat. While it certainly works, I need to change the friendly name later on.

The way my app works, it shows the webchat before users sign since the scripts are in the index.html file of the react app.

I need to change it so that after they login it will update the name displayed in the chat.

This is what I have so far, but it certainly doesn't work. Assume I can get the names from local storage, and login stuff works.

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);
}

I have also tried doing this:

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

I have also tried editing the MessagingCanvas like so:

 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);
}

This will change the value in the console but not the displayed name in the chat window.

I think I need to update the appconfig and re-render the chat window, but not sure how to do it and there may be a different way to solve the problem. I am open to being enlightened on this one.

have you tried `config = { chatFriendlyName: 'you' }`? I think some of their docs is not up-to-date. [config](https://www.twilio.com/docs/flex/flex-webchat-basic-configuration) shows `config.context.friendlyName` while the table shows `config.chatFriendlyName` — seanplwong, Sep 06 '19 at 16:34
@seanplwong, certainly haven't tried it. Is the correct approach still to re-render the webchat? Basically I know how to set it initially, but need change it dynamically after it the initial setup. — Alexander Ryan Baggett, Sep 06 '19 at 17:18
I'm not familiar with twilio in fact, i just took a quick look in the doc and found sth not consistent. Maybe you could try create a new ContextProvider as illustrated in [the example](https://github.com/twilio/flex-webchat-ui-sample/blob/master/src/App.js). Or you could play around with `manager.chatClient`, [the doc](https://media.twiliocdn.com/sdk/js/chat/releases/3.0.2/docs/User.html) shows there is a `friendlyName` attribute, but note that even if the state is updated, the ui might not — seanplwong, Sep 06 '19 at 17:41
Hi @AlexanderRyanBaggett were you able to solve this? If so how? I have similiar requirement where I have to change config after user logs in (basically remove the pre-engagement form). Not able to achieve this. calling `FlexWebChat.renderWebChat(appConfig)` again throws error `default store already exists`. Do you have any idea how to achieve this. Thanks. — Kishore Barik, Nov 27 '19 at 07:30

Stanislau Buzunko · Answer 1 · 2019-09-11T15:29:16.573

0

I don't know whether you want to show exactly agent's name or something else. But here is what i found by accident in order to display agent's friendlyName

MessagingCanvas: {
  memberDisplayOptions: {
    theirFriendlyNameOverride: true
  }
}

theirFriendlyNameOverride flag overrides default friendly name of an agent once it's available

example of my config:

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

edited Sep 11 '19 at 15:29

answered Sep 10 '19 at 08:32

Stanislau Buzunko

1,630
1
15
27

I have tried setting the value in MessagingCanvas. It updates an object, but not the actual displayed name. – Alexander Ryan Baggett Sep 10 '19 at 20:01
this is default settings props. twilio will override themselves. – Stanislau Buzunko Sep 11 '19 at 15:25
@AlexanderRyanBaggett this is in case you want to display agents friendly name, not custom whatever you want – Stanislau Buzunko Sep 11 '19 at 15:26
@AlexanderRyanBaggett added example of my config, this config does the thing i want. maybe you need something else – Stanislau Buzunko Sep 11 '19 at 15:30

score 0 · Answer 2 · answered Nov 11 '22 at 08:28

I had this situation I managed to make a workaround I'm fetching data from the URL inside the configurations file webchat-appConfig.js and then set friendlyName value from the parameter value

first to get the url of the route :
const queryString = window.location.search;

and then use URLSearchParams to convert the URL as key and value :
const urlParams = new URLSearchParams(queryString);

asume that the link you start the WebChatUi with : localhost:3000/userName=Muhammed

put them together and should be like that :

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
var appConfig = {
    //  change the your AccountSid
    accountSid: "A**************************",
    // change to your Flex Flow SID
    flexFlowSid: "FO*******************",
    colorTheme: {
        overrides: brandedColors
    },
    context: {
        friendlyName: urlParams.get('userName')
    },
}

How to Dynamically change the friendly name in Twilio Flex Webchat

2 Answers2