Designing The Chat Window

Let us first consider the chat window.

You can see that there are three “components” in the chat window.

The top bar includes some custom information you want to add (your brand information usually).

The message window in the middle is where the chat messages are displayed.

At the bottom, we have the input box.


You can see quite clearly that my design is inspired by the one which Dialogflow’s web chat uses.

There is a top bar with a branding component, a middle message window and a bottom input box.

Page Load

So this chat window is actually a PHP page (I call it index.php to make it the default page for a given folder). When the page loads, I add a little sessionID into a hidden field as shown below:

<span style="display: none;" id="sessionId"> 
<?php echo $sessionID; ?> 

The HTML shown above is added to the index.php page so that when the page loads, it generates a unique ID and adds it into a hidden field on the page itself.

AJAX calls

When the user types a message into the input box and presses ENTER, I use AJAX to refresh the contents of the message window with the appropriate response from the bot. (Read further to see how that is implemented).