The OggFlow Javascript API let's you customize various aspects of the OggFlow Live Chat Widget including passing custom variables to your agents, and showing or hiding the chat widget based on custom parameters.
Callback method that is notified once the OggFlow chat widget script has finished loading. Use this method for passing custom parameters back to OggFlow or performing custom scripting in the client after the script is asynchronously loaded
<script type="text/javascript">
function onOggFlowReady()
{
var customVariables = [
{ name: 'member_id', value: '1234' },
{ name: 'name', value: 'John Doe' },
{ name: 'email', value: 'test@test.com' },
{ name: 'page', value: 'checkout.html' }
];
OggFlowAPI.setCustomVariables(customVariables);
};
</script>
Allows you to pass any number of custom variables from the client page to OggFlow. This allows you to dynamically send context data such as member id's, checkout items, and current page information as a post on the initial chat initiation invite to the agent. You can also use this to prepopulate name, email, or phone number on the initial form. Very useful for impressing your visitors!
<script type="text/javascript">
function onOggFlowReady()
{
var customVariables = [
{ name: 'member_id', value: '1234' },
{ name: 'name', value: 'John Doe' },
{ name: 'email', value: 'test@test.com' },
{ name: 'page', value: 'checkout.html' }
];
OggFlowAPI.setCustomVariables(customVariables);
};
</script>
Use this method to open the chat widget box from a link, image click, or javascript custom action.
<a onclick="OggFlowAPI.showChatWidget(); return false;" href="#">
Click here to chat!
</a>
Use this method to hide the chat widget box from a link, image click, or javascript custom action.
<a onclick="OggFlowAPI.hideChatWidget(); return false;" href="#">
Close the chat widget
</a>
The OggFlow Live Chat widget supports simple customization using CSS. This can be used to change colors, default messages, and sizing of the chat widget. Below are the CSS customizations you can use to modify all of the visitor facing messages. Simply add these CSS styles to the same page as your chat widget code. This is how you can create multi-language chat widgets as well as customize the messages for your business.
When overriding the CSS, please be sure to add your custom styles after the included chat widget code in your page.
<html>
<head>
<link id="oggfeedbackcss" type="text/css" rel="stylesheet" href="https://oggfeedback.icoa.com/oggfeedbackcss/yourchatkeyhere">
<script type="text/javascript" language="javascript" src="https://oggfeedback.icoa.com/oggfeedback/oggfeedback.nocache.js"></script>
<!-- Make sure your custom styles appear after the oggfeedbackcss above, -->
<!-- so they will correctly override defaults -->
<style>
/*Default online chat button text */
.oggchat_button_text_div:after {
content: "Need Help? Click to Chat!";
}
/*Default offline chat button text */
.oggchat_button_text_offline_div:after {
content: "Offline - Leave a Message";
}
/*Initial greeting once the chat is opened */
.oggchat_content_form_area_top_text:after {
content: "Thanks for contacting us!";
}
/*Greeting once offline chat is opened */
.oggchat_content_form_area_top_text_offline:after {
content: "We're not available right now. Please leave a message.";
}
/*Proactive chat message greeting */
.oggchat_content_form_area_top_text_proactive:after {
content: "Hello, Can we help you?";
}
/* Message displayed after the close chat link is clicked */
.oggchat_transcript_form_area_top_text:after {
content: "Your session has ended. Would you like a transcript of the chat?";
}
/* Message displayed after a transcript has been sent */
.oggchat_transcript_form_area_closed_text:after {
content: "Thanks for using OggFlow!";
}
/* Link text for not sending a transcript */
.oggchat_transcript_form_area_no_thanks:after {
content: "No Thanks";
}
/* Link text to open new chat session after one is closed */
.oggchat_transcript_form_area_closed_new_session:after {
content: "Start a new chat";
}
/* Button text to start a chat */
.oggchat_content_form_submit_button:after {
content: 'Start Chat';
}
/* Start chat button width */
.oggchat_content_form_submit_button {
width: 85px !important;
}
/* Button text for offline message */
.oggchat_content_form_submit_button_offline:after {
content: 'Leave Message';
}
/* Button text for sending a transcript */
.oggchat_transcript_form_submit_button:after {
content: 'Send it to me';
}
/* Default message when holding for an agent */
.oggchat_content_chat_header_no_agent:after {
content: "Waiting...";
}
/* Remove the countdown for waiting for an agent */
.oggchat_content_chat_header_countdown {
display:none;
}
/* Link text for closing a chat */
.oggchat_content_chat_title_close_action:after {
content:"Close Chat";
}
/* Text on timing of messages. Modify this for multi-language */
.oggchat_content_time_label_second:after
{
content: " second ago";
}
.oggchat_content_time_label_seconds:after
{
content: " seconds ago";
}
.oggchat_content_time_label_minute:after
{
content: " minute ago";
}
.oggchat_content_time_label_minutes:after
{
content: " minutes ago";
}
.oggchat_content_time_label_hour:after
{
content: " hour ago";
}
.oggchat_content_time_label_hours:after
{
content: " hours ago";
}
/* Show all messages link text */
.oggchat_content_chat_title_post_action_show_all:after
{
content: "show all";
}
</style>
</head>
<body>
Example HTML Page with CSS Customization
</body>
</html>
