chrisguk - 8:38 pm on Feb 20, 2013 (gmt 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]