Web Client code example (version 2 deprecated)

Note: Version 3 is now available. We recommend that you use version 3 for all new Web Clients, and that you upgrade any existing implementations to this version as soon as possible.

The HTML code for this simple web page is shown below:

The full code example is shown below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chat</title>
    <meta name="description" content="This is a demo client">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="[converse server]/public/slick/slick.css"/>
    <link rel="stylesheet" href="[convere server]/converseChatV2.css">
    <link rel="shortcut icon" href="images/pb_favicon.ico" type="image/x-icon" />
    <script src="[converse server]/converseChatV2.js" ></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    <script type="text/javascript" src="[converse server]/public/slick/slick.min.js"></script>
    <style>
       .chat-container {
            background-color: #ffffff;
            border: 1px solid #b0b0b0;
            height: 500px;
            width: 360px;
        }
    </style>
  </head>


<body>
   <div id="chatcontainer" class="chat-container"></div>
   <script type="text/javascript">
       var newChat;

       $(function() {
            var options = {
                 host: "[convere server]",
                 title : "Chat With Us",
                 placeholder : "Type a message...",
                 sendButtonTitle : "Send",
                 serverUserImage: "[converse server]/public/img/pb-circle-mark.png",
                 container : "#chatcontainer",
                 showCloseButton : false,
                 showSettingsButton: false,
                 hideIcon : "glyphicon-remove"
             }

             newChat = new converseChat(options);
             newChat.init(function() {
                 newChat.openBot("[TENANT ID]", "[BOT ID]", {
                     id : "TT00001",
                     first_name : "Friend",
                     last_name : "Any",
                     full_name : "Customer Any",
                     locale : "en_US"
                  });
              });

              newChat.show();
              setTimeout(function() {
                   newChat.sendPostBackSilent('start');
              }, 1000);
         });
     </script>
</body>
</html>
Note: For Web Clients, you will also need newChat.sendPostBackSilent('start'); where 'start' is the start word or phrase that runs the bot. This will silently trigger the first message or question in the bot.