LiveEngage - Using CSS To Modify Embedded Chat Buttons

LiveEngage, Tutorial

Update: With the new HTML engagements in LiveEngage, this method is now outdated. It is recommended that you use the supported method listed above.
The purpose of this tutorial is to show you how to use your own custom CSS to modify your embedded chat buttons from LiveEngage.

Currently in LiveEngage, the only options you have for an embedded button is to use an image or the few text styling elements that are available in the engagement studio. There is no way to use your own fonts, CSS, or HTML elements for your chat button, which can sometimes make it hard for your chat button to match the rest of the theme of your site.

For example, if the rest of the links on your site have hover effects, or if the font family of the text in the links is ‘Comic Sans MS’, your embedded chat button will not match the feel of your site. In order to fix this, you can use custom CSS on your site to modify the default styling of the button.

The embedded chat buttons have a class called ‘LPMlabel’, so by adding a CSS styling to the page with the !important attribute, it will override the default CSS.

In the first example, we are going to use CSS to change the font-family of the embedded chat button, and in the second example we are going to use CSS to add a hoover effect to the embedded chat button. 

Let's get started:

Example 1: Change the default font-family

Code:


Result:


Before
After
2015-07-14_0935.png
2015-07-14_0935_001.png
Example 2: Add Hover Effect

Code:


Result:


Before
After
2015-07-14_1016.png
Untitled.png
Summary: This tutorial showed you how to use custom CSS to modify the default styling of your embedded chat buttons.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.