Welcome to WebmasterWorld Guest from 107.23.176.162

Forum Moderators: open

Message Too Old, No Replies

Support Javascript

     
8:38 pm on Feb 20, 2013 (gmt 0)

Junior Member from CZ 

5+ Year Member

joined:Jan 29, 2010
posts: 46
votes: 0


Hi,

I have been trying to implement this in my website but for some reason i cant seem to get it to work. I have provided the code and explanation below:


You can query the online status of your operators. Using this data enables you to build chat buttons with the operator pictures and displaying the availability of each team member.




userlikeCheckOperatorStatus(function(operators) {
console.log(operators);
});





The response object looks like this.





[
{
"lang": "en",
"operator_group": {
"chat_widget_set": [
{
"locale": "en_US",
"name": "Firefox 15 Windows",
"id": 14
},
{
"locale": "en_US",
"name": "Chrome 21 OSX",
"id": 15
},
{
"locale": "en_US",
"name": "Chrome 21 Windows",
"id": 16
},
{
"locale": "en_US",
"name": "Internet Explorer 9",
"id": 19
},
{
"locale": "en_US",
"name": "Internet Explorer 8",
"id": 20
},
{
"locale": "en_US",
"name": "Internet Explorer 7",
"id": 21
}
],
"name": "Testing David",
"id": 7
},
"name": "David Voswinkel",
"locale": "en_US",
"url_image": "s3-eu-west-1.amazonaws.com/devel-cdn-operators/ef2********************839d_80x80.jpg",
"user": {
"first_name": "David",
"last_name": "Voswinkel",
"email": "david@example.com"
},
"slots": {
"used": 1,
"free": 9,
"online": true
},
"id": 5
},
{
"lang": "en",
"operator_group": {
"chat_widget_set": [
{
"locale": "en_US",
"name": "Safari 6",
"id": 17
}
],
"name": "Testing Timoor",
"id": 8
},
"name": "Timoor Taufig",
"locale": "en_US",
"url_image": "s3-eu-west-1.amazonaws.com/devel-cdn-operators/e7f********************3_80x80.jpg",
"user": {
"first_name": "Timoor",
"last_name": "Taufig",
"email": "timoor@devcores.com"
},
"slots": {
"used": 0,
"free": 10,
"online": true
},
"id": 6
}
]



Using the result object you can iterate the operators and display corresponding elements in your DOM. Here is a little sample script. Make sure to use the userlikeReady() hook, which gets called when Userlike client is loaded.



<style>
.operator {
margin: 2px 20px 2px;
}
.chatbutton {
-webkit-border-radius: 10px;
border-radius: 10px;
width : 60px;
height : 60px;
}
.name {
padding: 2px;
}
</style>

<div class="container">
<div class="operator" id="operator_5">
<div class="chatbutton"></div>
<p class="name"></p>
</div>
<div class="operator" id="operator_6">
<div class="chatbutton"></div>
<p class="name"></p>
</div>
<div class="operator" id="operator_7">
<div class="chatbutton"></div>
<p class="name"></p>
</div>
<div class="operator" id="operator_8">
<div class="chatbutton"></div>
<p class="name"></p>
</div>
</div>

<script>
userlikeReady = function() {
userlikeCheckOperatorStatus(function(operators) {
var operator, _i, _len;
for (_i = 0, _len = operators.length; _i < _len; _i++) {
operator = operators[_i];
if (operator.slots.online) {
$("#operator_" + operator.id + " .chatbutton").data('id', operator.id).css({
"background-image": "url(//" + operator.url_image + ")",
}).click(function() {
userlikeRequestOperatorChat($(this).data('id'));
});
$("#operator_" + operator.id + " .name").text(operator.name + " is online")
} else {
$("#operator_" + operator.id + " .chatbutton").show().css({
"background-image": "url(//" + operator.url_image + ")",
})
$("#operator_" + operator.id + " .name").text(operator.name + " is offline")
}
}
});
};
</script>




They said I must use jquery include too which I have done. Any idea how I can get this to work?

[edited by: tedster at 6:43 am (utc) on Feb 21, 2013]
[edit reason] obscure cdn operators, email address [/edit]

9:27 pm on Feb 20, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5019
votes: 24


Each of your .css calls has a trailing comma that should be removed. Also, you have a few lines that are missing a closing ; at the end.

With that said, you haven't specified which order you're including your scripts. I would guess that they should be included in this order:
1. jQuery
2. Your script that defined userlikeReady
3. The userlike script

If it's not working, try using the Developer Tools / Console in Chrome to see if there is an error in the console log (Press F12 to open the developer tools).
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members