| Support Javascript
|
chrisguk
msg:4547231 | 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]
|
Fotiman
msg:4547245 | 9:27 pm on Feb 20, 2013 (gmt 0) |
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).
|
|
|
