Create the UI

Create the user interface for your web chat.

The following HTML defines a <section> that you will use to display:

  • The name of the currently logged-in user
  • The user's current status - that is, whether they are currently typing a message
  • The messages sent and received so far
  • A text area for your user to type a new message

The web page loads three scripts once the page body has rendered:

  • The nexmoClient.js file from the nexmo-client Node module
  • The chat.js file that will contain your application's code. Create this empty file in the project's root directory

Create a file named index.html in your project directory with the following contents:

<!DOCTYPE html>

    body {
      font: 13px Helvetica, Arial;

    #messages {
      width: 80%;

    form input[type=text] {
      font-size: 20px;
      height: 35px;
      padding: 0px;

    button {
      height: 35px;
      background-color: blue;
      color: white;
      width: 75px;
      position: relative;
      font-size: 15px;

    textarea {
      width: 85%;
      font-size: 20px;

    #messageFeed {
      font-size: 18px;
      padding-bottom: 20px;
      line-height: 22pt;
      height: 300px;
      overflow-y: auto;

    #status {
      height: 35px;
      font-size: 12px;
      color: blue;

    #send {
      width: 85%;

    #messages {
      display: none;


  <form id="login">
    <input type="text" id="username" name="username" value="" class="textbox">
    <button type="submit">Login</button>

  <section id="messages">
    <h1 id="sessionName"></h1>

    <div id="loadSection">
      <button id="loadMessages">
        Load Previous Messages
      &nbsp; &nbsp;<h3>Showing <span id="messagesCount"></span> starting at <span id="messageDate"></span></h3>

    <div id="messageFeed"></div>

      <textarea id="messageTextarea"></textarea>
      <button id="send">Send</button>
      <div id="status"></div>

  <script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
  <script src="./chat.js"></script>