Customization

Want your LivePerson buttons to better match the look and feel of your web site? This guide provide you with information needed to create your own graphic to customized your LivePerson service.

All the graphics can be static or animated .GIF, the look and voice of the buttons are all yours.

Chat Buttons | Chat Invitations | Chat Window

Chat Buttons

These three (3) .GIFs may be any size you want, but all 3 must be the exact same size.

The file names must follow the naming convention specifed in the table below.

To see some examples of the Buttons, take a look at our Standard Buttons.

Operator Status Buttons
Status	Meaning	File Name	Example
online	available	reponline.gif
offline	no site operator available	repoffline.gif
occupied	not available, will be back in 5 minutes	repoccupied.gif

Implementation

Once you created the graphics, upload all the image files in a directory on your Web server, for example at http://www.YourWebsite/images/custom/liveperson/

Use our Tag Generator to create the tags. You will find the Tag Generator in the admin center, under Account Set Up

Copy and Paste the tags into your Web pages.

Chat Invitations

The combined images below form the Chat Invitation. The top image is the main chat invitation and the bottom is "Close". The chat invitation uses a rollover (image changes when the mouse pointer "rollsover" the graphic).

The four (4) .GIFs can be any size you want, but all 4 must have the exact same width. In the example below, the "Close button" has transparent space on both sides to give it the same width as the graphic above it.

The file names must follow the naming convention specifed in the table below.

Status	Meaning	File Name	Example
off	no mouse over	need_help_off.gif
off	no mouse over	close_off.gif
on	mouse over	need_help_on.gif
on	mouse over	close_on.gif
Combined, the image looks like this (mouse over it)

Implementation

Once you created the graphics, upload all the image files in a directory on your Web server, for example at http://www.YourWebsite/images/liveperson/

Use our Tag Generator to create the tags. You will find the Tag Generator in the admin center, under Account Set Up

Copy and Paste the tags into your Web pages.

 

Chat Window

There are two states for the chat window corresponding to the button states of online and offline:

• Chat Window which pops up when an operator is available
• Leave a Message Window which pops up when no operator is available

For each state of the chat window you can customize the background color as well as the image in the right side of the window.

Use an image - use a GIF or JPG image with the following dimensions.

• Height: 180 pixels
• Width: 85 pixels

Examples of images:

Active Window	Leave a  Message

Use Active Content - include active content in the chat window like streaming music, videos, news, stock tickers.

» Click Here to learn how to set up an Active Chat Window.

Implementation

Once you have designed the graphics or the active content page, upload the files on your web server.

Use the Chat Window configurator to customize the chat window. You will find the Chat Window configurator in the admin console under Visitor Experience > Chat > Chat Window tab.

When specifying the location for the files, you must include the URL including the file name, for example:
http://www.YourWebSite.com.com/images/active_window.gif
http://www.YourWebSite.com/images/leave_message.gif
We recommend you place them in the same directory as your customized buttons.

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