Introduction:


Note: This content is not relevant for customers that use the LiveEngage platform.
Chat Buttons are the physical buttons which are located on your site. These are the buttons your visitor will click in order to initiate a chat session with your agents. In addition to the wide variety of standard chat button images available in the Button Library and Page Code Builder, LivePerson offers you the option of creating your own chat button images tailored to meet the design requirements of your site.
To see examples of Chat Buttons, take a look at our Standard Buttons.

Instructions:


 Implementing Custom Chat Buttons with the Button Library

  1. Create three chat button images, one for each chat status. Make sure to adhere to these LivePerson requirements:
    • LivePerson code requires three GIF image files, one for each chat status (online, offline, back in 5) .
    • The button images must be in GIF format.
    • The images may be any size you want, but all 3 must be the exact same size.
    • The images must be named according to specific naming conventions (shown in the table below).


      Status
      Chat Button File Name
      Example
      Online
      (There is at least one available agent to accept the chat) 

      reponline.gif

      RepOnline.gif
      Back in 5

      (Available agents have set their status to "Back in 5")

      repoccupied.gif

      RepOccupied.gif
      Offline/Away
      repoffline.gif

      RepOffline.gif
  2. Upload all of the chat button image files that you created into a directory on your Web server, for example https:\\www.YourWebsite\images\liveperson.
    Note: It is important that you name the images as specified in the table above, that the images are all the same size and they are all in the same folder. The LivePerson code looks for these specific file names when loading your chat buttons. Any minor error in the naming or location of these files will impair functionality.
  3. Log into the LivePerson Admin Console and select Visitor Experience > Chat.
  4. Go to the Buttons tab and click New Chat Button.
  5. Set up Button Settings and Button Position.
  6. In the Button Design section, select the Custom from the Graphic Source list.
  7. Insert the URL of the folder that contains your LivePerson images into the Image Folder URL field. The folder must contain 3 gif images with the correct names (specified in the table above).
  8. Click Save to Library. 
Tip: If you want to display a chat button only when agents are online, set the offline and occupied chat button images to be transparent or empty (zero size) GIF images.


Implementing Custom Chat Buttons with the Page Code Builder (for customers who don't have the Button Library)

  1. Create three chat button images, one for each chat status, as described in step 1 of the procedure above.
  2. Once you have created the graphics, upload all of the image files into a directory on your Web server, for example https:\\www.YourWebsite\images\liveperson.
    Note: It is important that you name the images as specified in the table above, that the images are all the same size and they are all in the same folder. The LivePerson code looks for these specific file names when loading your chat buttons. Any minor error in the naming or location of these files will impair functionality.
  3. Log into the LivePerson Admin Console and select Account Set Up > Page Code Builder.
  4. Select the type of button you would like to create and click Next.
  5. In the Select Design menu, select Custom from the Graphic Source drop-down menu.
  6. Insert the URL of the folder that contains your LivePerson images into the Image Folder URL field. The folder must contain 3 gif images with the correct names (specified in the table above).
  7. Clcik Apply. A preview of your images displays in the lower portion of the page.
    Note: If you have not created custom invitation images yet you will not see preview images in the Invitations Options tab. The chat buttons work without the invitation images.
  8. If you would like to customize your invitation button, add variables or edit the display options, continue with the remaining stages of the wizard.
  9. Click Finish to get the HTML tags. You will be presented with two types of code: Button Tag and Monitor Tag. The Button Tag defines which images will be displayed for your button. 
Tip: If you want to display a chat button only when agents are online, set the offline and occupied chat button images to be transparent or empty (zero size) GIF images.


Keywords: custom customize chat button images admin console core library code page builder transparent appear disappear offline occupied