Welcome to WebmasterWorld Guest from 54.147.20.131

Forum Moderators: open

Message Too Old, No Replies

Support Javascript

     

chrisguk

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

5+ Year Member



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]

Fotiman

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

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



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).
 

Featured Threads

Hot Threads This Week

Hot Threads This Month