Chat Window Customization
Last Update: Aug 10, 2011.            Document ID: 346281
   
 

In addition to the wide variety of standard chat window images available in the Window Editor, LivePerson offers you the option to create your own chat window images tailored to meet the design requirements of your site.


Guidelines to Creating Customized Chat Windows


There are four different possible windows which can be presented to your visitor:


  • Chat Window - Window which pops up when a chat is established.
  • Offline Survey Window - Displayed if no operator is available to accept the chat.
  • Pre-chat Survey Window (Optional) - Displayed when visitor is prompted with pre-chat questions.
  • Exit Survey Window (Optional) - Displayed when visitor clicks the "close" button at the end of a chat.

You can customize the background color, dimensions, submit, email, print and close buttons as well as the image on the right hand side of each of the above windows.

Note: In order to achieve the aforementioned customization options, your Window Skin must be set to "Classic" or "Modern". Windows set to the "Legacy" skin will have limited customization options.

To check whether you are currently using the Classic Window skin open the Admin Console and direct yourself to Visitor Experience >> Chat >> Window Editor. Once you are in the window editor check that your Window Skin is set to Classic Look and not Legacy Look. Please note that if you change your window from Legacy to Classic Look or vice versa then it will remove any custom window settings you have implemented.


Implementation of a Custom Chat Window Image


Step 1: Create a series of up to four different images. We recommend that you create the image with default dimensions: Height 218 pixels, Width 106 pixels and use either GIF or JPG files.


Note: You can create images with larger or smaller dimensions. Should you choose to do so, you may need to resize the chat window in order to accommodate the new dimensions. In contrast to chat buttons and invitations, Chat Window images are not restricted by naming conventions and can be named as you please.

Examples of images:


Chat Window
Pre Chat Survey Window
Offline Survey Window
Exit Survey Survey
Chat Window
Pre Chat
Offline
Exit

Hint: Use Active Content - include active content in the chat window such as streaming music, videos, news, stock tickers. Click here to learn how to set up an Active Chat Window.

Step 2: Once you have designed the graphics or the active content page, upload the files to your web server.


Step 3: Use the Chat Window Editor to customize the chat window. You will find the Window Editor in the Admin Console, under Visitor Experience >> Chat >> Window Editor >> Branding. Then Select Image Type to be Custom and insert the image URL where the custom image is stored into the Image URL field.


If you would like to apply this same custom image to all other windows then enable the option Apply the branding image to all window types.


If you would like to insert different custom image URL's for other window options then change the drop down menu Window Type to the next window type you would like to edit and follow the same steps as above.


When specifying the location for the files, you must enter the entire URL including the file name, for example:


http://www.YourWebSite.com.com/images/active_window.gif
http://www.YourWebSite.com/images/leave_message.gif

Note: Remember to include "www" if that is part of your URL.

We recommend you place these images in the same directory as your customized buttons if you are using any.


Note: If you are using the secure option for the chat window (SSL), you must use "https" for the URL, for example:

https://www.YourWebSite.com.com/images/active_window.gif

 

Related Entries