Change design of chat invitations

If you dont like the default chat invitation displayed in the chatbar you can very simply build you own invitations.

You can catch the event when a new invitation arrives by using the argument on_invitation in the implemenation code. There is also an event if the the invitation should be hidden, on_invitation_cancel. This function will be called if the user who sent the chat invitation canceled it or left the chat before it was accepted or denied.

In this Example the function showInvitation will be called when a new invitation arrives. Now we can build our own invitation and we can accept the invitation by calling the function toksta.acceptInvitation(from_user_id) or deny the invitation by calling the function toksta.denyInvitation(from_user_id).

<script type="text/javascript">
function showInvitation(from_user_id, from_user_data) {
    var invitation = document.createElement("div");
    invitation.id = "invitation_" + from_user_id;
    invitation.className = "invitation";
    invitation.innerHTML = from_user_data.name + " has sent you a chat invitation. Accept Invitation?<br>"+
      "<input type='button' value='yes' onclick='toksta.acceptInvitation(\"" + from_user_id + "\");hideInvitation(\"" + from_user_id + "\")'> " + 
      "<input type='button' value='no' onclick='toksta.denyInvitation(\"" + from_user_id + "\");hideInvitation(\"" + from_user_id + "\")'> ";
  	document.body.appendChild(invitation);
  }
 
  function hideInvitation(from_user_id) {
    var invitation = document.getElementById("invitation_" + from_user_id);
  	document.body.removeChild(invitation);
  }
 
var TOKSTA_CONFIG = { 
  app_id: "your-application-id", 
  user_id: "the-user-id", 
  user_hash: "the-user-hash", 
  user_data: "the-user-data", 
  generated: "current-unix-timestamp", 
 
  //needed adjustments 
   chatbar: { 
      on_invitation : showInvitation,
      on_invitation_cancel: hideInvitation 
    } 
  }; 
</script>
<script src="http://embed.toksta.com/embed/toksta.js" type="text/javascript"></script>
 
<style type="text/css">
  .invitation {
    position:absolute;
    top:20px;
    left:20px;
    background-color:#ddd;
    border: 1px solid #666;
    padding: 10px;
  }
</style>