title: How to Dynamically change the friendly name in Twilio Flex Webchat
body: <p>So, I am following along the tutorial <a href="https://www.twilio.com/docs/flex/installing-and-using-flex-webchat#option-1" rel="nofollow noreferrer">here</a> on how to setup Twilio Flex WebChat. While it certainly works, I need to change the friendly name later on.</p>
  
  <p>The way my app works, it shows the webchat <strong>before</strong> users sign since the scripts are in the index.html file of the react app.</p>
  
  <p>I need to change it so that <strong>after</strong> they login it will update the name displayed in the chat.</p>
  
  <p>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.</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>I have also tried doing this: </p>
  
  <pre><code>  let test = Twilio.FlexWebChat.Manager.create(appConfig);
    Twilio.FlexWebChat.ContextProvider.Manager = test;
    Twilio.FlexWebChat.renderWebChat(appConfig);
  </code></pre>
  
  <p>I have also tried editing the MessagingCanvas like so:</p>
  
  <pre><code> initializeTwilio =() =&gt; {
      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);
  }
  </code></pre>
  
  <p>This will change the value in the console but not the displayed name in the chat window.</p>
  
  <p><a href="https://i.stack.imgur.com/leZZj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/leZZj.png" alt="Screenshot of it not working"></a>      </p>
  
  <p>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.</p>