Support Javascript

[chrisguk]

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": "[e-mail]"
 },
 "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": "[e-mail]"
 },
 "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]

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