CSS Styles: Make your Live Chat Link Resemble SmarterTools.com Live Chat Button
Idea shared by Andrea Rogers - October 16, 2014 at 2:42 PM
Completed
Employee Post

The following CSS will allow you to modify SmarterTrack’s live chat link on your company’s website to look like the current live chat button on the SmarterTools website. Please be aware that this code references “stlivechat21”. This number will need to be changed to the generated ID of your live chat link.

 

For information on determining what CSS to modify, please see the KB article Use "Inspect Element" to Determine CSS Modifications.

 

#stlivechat21 a { 
   z-index: 999; 
   position: fixed; 
   border-radius: 0 0 3px 3px; 
   -moz-border-radius: 0 0 3px 3px; 
   font-size: 14px; 
   left: 0; 
   top: 55%;
   text-decoration: none; 
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg); 
   -o-transform: rotate(-90deg); 
   -ms-transform: rotate(-90deg); 
   transform: rotate(-90deg); 
   -webkit-transform-origin: top left; 
   -moz-transform-origin: top left; 
   -o-transform-origin: top left; 
   -ms-transform-origin: top left; 
   transform-origin: top left; 
   box-shadow: -2px 2px 3px rgba(0,0,0,0.30); 
}

#stlivechat21 a:hover { 
   text-decoration: none 
}
#stlivechat21 #stlivechat21_online { 
   background-color: #76b30c; 
   color: white; 
   border: solid 1px #64970a; 
   border-top: 0px; 
}

#stlivechat21 #stlivechat21_online > span { 
       display: block; 
       padding: 6px 14px; 
}

#stlivechat21 #stlivechat21_online:hover { 
       text-decoration: none; 
       background-color: #7fbc1c; 
}

#stlivechat21 #stlivechat21_offline { 
   background-color: #76b30c; 
   color: white; 
   border: solid 1px #64970a; 
   border-top: 0px; 
}

#stlivechat21 #stlivechat21_offline > span { 
       display: block; 
       padding: 6px 14px; 
}

#stlivechat21 #stlivechat21_offline :hover { 
       text-decoration: none; 
       background-color: #7fbc1c; 
}

Andrea Rogers
Communications Specialist
SmarterTools Inc.
(877) 357-6278

www.smartertools.com

2 Replies

Reply to Thread
0
Is there an option to do this for STrack12 to get the chat tab to park against the left or right screen like when you get to the portal in st12 ?   This css does not work for 12, I did try and look at the css for the bar and managed to get it to turn, but the placement options seems to be an issue.
0
Hey Debby,

I'm not sure I understand the placement you're looking for. You say you'd like the chat icon to sit against the left or right of the screen. Are you referring to where it's at currently in this portal -- the orange/grey icon in the bottom right? SmarterTrack 12.x introduced the new live chat widget we're currently using which embeds live chat directly into your site. To begin using this, you would simply need to change your live chat link to use the "Embedded" live chat type.

Andrea Rogers
Communications Specialist
SmarterTools Inc.
(877) 357-6278

www.smartertools.com

Reply to Thread