We've had some great feedback and suggestions for our new embedded live chat widget. One of the most common questions is how to customize the chat widget to change the online and offline text and how to modify the colors and location of the chat. Well, we're happy to say that all of these are configurable right in the javascript snippet that you include in your site.
Here are a couple examples of different colors and text you can use for your Live Chat Widget:
Bottom Aligned, Gray:
Top Aligned, Green:
Top Aligned, Green, Spanish:
Here's the code snippet that we've included in our site. We'll discuss the most commonly modified parameters below:
<!-- OggChat Tab Button : Contact Us for Help Customizing -->
<script type="text/javascript">
<div id="oggchat"></div>
<div id="oggwindowholder"><span style="display:none"></span></div>
<script type="text/javascript">
var page ={/*Modify or uncomment the variables below to customize*/
'tab_align':'top',/*Fixed location of Tab Button, valid values are top, bottom, left, right*/
'tab_margin_right':'45px',/*When tab is top or bottom, the right margin*/
'popup_margin_right':'40px',/*The right margin of popup chat window*/
'popup_margin_top':'30px',/*The top margin of popup chat window*/
'tab_bg_color':'green',/*Tab Background Color*/
'tab_hover_color':'red',/*Tab Hover Color*/
'website':'www.oggchat.com',/*Your Domain Name*/
'p':'30',/*Proactive Chat Timer in Seconds*/
'online_text':'Need Help? Click to Chat!',/*Custom Text to display in tab when online*/
'offline_text': 'Offline - Leave a message',/*Custom Text to display in tab when offline*/
'font_family':'Arial',/*When using text, font to use*/
'font_size':'11pt',/*When using custom text, font size*/
'font_color':'#FFFFFF', /*When using custom text, font color*/
'host':'oggchat2.icoa.com',
'cid':'',
'act':''
};
(function() {function oggchat(){
var base = (("https:" == document.location.protocol) ? "https://oggchat2.icoa.com" : "http://oggchat2.icoa.com");
var s = document.createElement('script');s.type = 'text/javascript';s.async = true;s.src = base+'/js/oggwindow.js';
var x = document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);};
if (window.attachEvent)window.attachEvent('onload', oggchat);else window.addEventListener('load', oggchat, false);
})();
</script>
First, you can change the online and offline messages to whatever text in whatever language you like. Just modify the value of the online_text and offline_text javascript variables. Please make sure that if use single quotes within the text, that you escape them with a backslash.
Next, you can change the location of the chat widget to the top or bottom of the web browser. Valid values for the tab_align key are either 'top' or 'bottom'. You can move the tab to the left or the right by using the tab_margin_right value or the tab_margin_left. These values represent the right or left padding in pixels for the tab layer.
To change the the colors of the embedded chat tab, you can pick the colors you want with the tab_bg_color and tab_hover_color values. You can use either browser supported colors such as 'red', 'green', or 'blue' or choose a Hex color such as '#999999'.
Change the location of the embedded popup chat window by using the popup_margin_right, and popup_margin_top values. These values will shift the chat window from the right margin of the web browser and from the top margin of the browser. You can also use the popup_margin_bottom key to shift the chat widget from the bottom of the browser window.
The automatic proactive chat timer can also be set directly from the embedded javascript. The value should be set as a number only that represents the seconds to wait until the proactive chat request is initiated. A value of '0' will disable the proactive chat invitations.
We hope that this will get you well on your way to incorporating an OggChat Live Chat widget on your website. If you haven't signed up yet, you can sign up for a free trial at http://www.oggchat.com
