Customize viWebChat for Your Chat Agents!

Chat Agent Screen Shot
Chat Agent Screen Shot

Our viWebChat application has a basic user interface (UI) straight out of the box. Although this UI can be used without any changes, most web 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 agent 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.

Chat With Us Right Now Screen Shot
Chat With Us Now Link

When you have a chat agent logged into viWebChat, a blue message is displayed at the bottom left of the screen. This "Chat With Us Now Link" is also customizable by changing the #chat-with-us selector in the /viwebchat/chat.css file. You can change the background color, the text color, or adjust the size and/or positioning of the item displayed on the screen.