Customize viWebChat for Your Visitors!

Chat Visitor Screen Shot Phase 1 Chat Visitor Screen Shot Phase 2

Our viWebChat application has a basic user interface (UI) straight out of the box. Although this UI can be used without any changes, most website administrators will want to customize the application to make it look like it is an integrated part of their site. There are certain customizations that can be done by anyone who has basic knowledge of html, css, and jquery. Follow the steps below or click here to watch us customize the visitor chat page in viWebChat for a demo site.

The best place to start would be to swap out the "Visual Interface" logo with your own website logo. Follow these steps to change the logo:

  1. Copy your logo image into the /viwebchat/images folder.
  2. Reference your logo file in the /viwebchat/chat.html and /viwebchat/chat-agent.html files.

    Change:
    <img class="logo" src="images/visualinterface_logo_creme_maroon.png" alt="logo">

    To:
    <img class="logo" src="images/[yourimagefilename]" alt="logo">

Next, change the background color of the header to match the color of the header of your website. To do this, you must edit the /viwebchat/chat.css file. Change the background-color property of the #header selector.

You may also change the chat footer and Submit button as you wish.

The Chat Visitor screen is the screen your visitors will see when they click on the "Chat with us right now" link. First they have to "login". This is done by entering their name and clicking the join button, however, you can customize this part to a certain extent.

There is a hidden textbox control called "txtHandle". The contents of this control is passed to the chat agent through the server when a new user connects to that agent. You may want some additional information on each visitor when the connect with an agent, such as which company they represent, their biographical information, or you may want them to choose a product they are interested in from a list box. All of these customizations are fairly easy to do with viWebChat.

To demonstrate how to make these changes, let's customize a site called "True Life Comics". This is a political cartoon site, so it would make sense to have the user provide not only his name, but also his political affiliation. We will allow the user to select from a dropdown box to make it easier. Since political affiliations can be considered sensitive information by some users and they may not want to provide this information, we will also include an option called "I prefer not to say".

The original code from /viwebchat/chat.html is shown here:

<div id="userSettings" class="user-settings">
<input type="text" id="txtName" class="chat-textbox-name" placeholder="Enter your name here" />
<input type="button" id="btnJoin" value="Join" onclick="return createHandle();" />

<!-- This hidden textbox allows you to customize this screen somewhat. For example, lets say you have a retail store and you want to provide support to customers. You may want to ask for the product they are interested, along with their name. You could add a listbox and list out your products so they could select one, and then on the "Join" button you could call a function that combines the Name and their product into a "handle". The Handle will be the value you see next to each chat message you receive on the chat-agent screen. -->
<input type="text" id="txtHandle" class="chat-textbox-name" hidden="hidden" />
</div>

As you can see from the code above, the standard installation of viWebChat contains a textbox for the visitor to enter his name and a button for the visitor to "join" the chat. There is a second textbox that is hidden and the visitor never sees called "txtHandle". This texbox contains the value that will be displayed to the chat agent to represent this visitor. We will use this hidden textbox to pass in the visitor's selected political affiliation.

The new code in /viwebchat/chat.html looks like this (the code that was added or modified is highlighted in yellow):

<div id="userSettings" class="user-settings">
<input type="text" id="txtName" class="chat-textbox-name" placeholder="Enter your name here" />
<select id="selParty">
<option value="">I prefer not to say</option>
<option value="I">Independent</option>
<option value="D">Democrat</option>
<option value="R">Republican</option>
</select>

<input type="button" id="btnJoin" value="Join" onclick="return createHandle();" />

<!-- This hidden textbox allows you to customize this screen somewhat. For example, lets say you have a retail store and you want to provide support to customers. You may want to ask for the product they are interested, along with their name. You could add a listbox and list out your products so they could select one, and then on the "Join" button you could call a function that combines the Name and their product into a "handle". The Handle will be the value you see next to each chat message you receive on the chat-agent screen. -->
<input type="text" id="txtHandle" class="chat-textbox-name" hidden="hidden" />
</div>

The html changes we've made so far add a select box to the UI to allow a visitor to specify his party affiliation. Next, we need to take the value the visitor selects, and pass that into the chat server. The way we do this is to make some slight modifications to /viwebchat/scripts/chathandle.js. The chathandle.js file is responsible for building the value of the hidden textbox "txtHandle". The value of this textbox gets passed along to the chat server.

The code changes are pretty simple:

  1. We add a new variable like this:

    var selParty = $('#selParty');
  2. We check to see if the visitor selected a party affiliation and if so, append it to the visitor's name in the "txtHandle" hidden textbox. This causes the visitor's party affiliation to be displayed along with thier name in the chat agent's visitors list.

    // Add party only if the user chose a party
    if(selParty.val().length > 0) {
    // Create a handle - use the name the visitor entered
    txtHandle.val(txtName.val() + ' (' + selParty.val() + ')');
    } else {
    // Create a handle - use the name the visitor entered
    txtHandle.val(txtName.val());
    };

TrueLifeComics Screen Shot Phase 1 TrueLifeComics Screen Shot Phase 2

As you can see from the screen shots above, adding the code to /viwebchat/chat.html and /viwebchat/scripts/chathandle.js allows us to pass along the name AND party affiliation to the chat server. This allows our chat agent to know more about the visitor he is chatting with. You could very easily swap out the party affiliation drop down with a list of products your company is marketing online and force the visitor to select the one they are interested in when joining the chat. This will help you tailor your messages to that visitor!