SUSI web chat application is up and running now. It gives better answers for most of the questions that users ask. But for new users application does not display a welcome message or introduction about the application. It is a distraction for new users. So a new requirement arrived that is to show a welcome message for new users or give them a introduction about the application.
To give a introduction or to show a welcome message we need to identify new users. For that I used cookies.
I added a new dialog to show welcome message and introductory video. Then placed below code in the DialogSection.js file which contains codes about every dialog-box of the application.
<Dialog contentStyle={{ width: '610px' }} title="Welcome to SUSI Web Chat" open={this.props.tour} > width="560" height="315" src="https://www.youtube.com/embed/9T3iMoAUKYA" gesture="media" allow="encrypted-media" > <Close style={closingStyle} onTouchTap={this.props.onRequestCloseTour()} /> </Dialog>
We already have installed ‘universal-cookie’ npm module in our application so we can use this module to identify cookies.
I used this way to check whether user is new or not.
<DialogSection {...this.props} openLogin={this.state.showLogin} . . . onRequestCloseTour={()=>this.handleCloseTour} tour={!cookies.get('visited')} />
Now it shows dialog-box for each and every user we don’t need to display the welcome message to old users so we need to store a cookie in users computer.
I stored a cookie in users computer when user clicks on the close button of the welcome dialog-box.
Below function makes new cookie in users computer.
handleCloseTour = ()=>{ this.setState({ showLogin: false, showSignUp: false, showThemeChanger: false, openForgotPassword: false, tour:false }); cookies.set('visited', true, { path: '/' }); }
Below line sets a cookie and { path : ’/’ } makes cookie accessible on all pages.
References: