Agendize Actions API

Click-to-Chat

With the Chat Client Javascript API you can create your own user interface to integrate the Agendize chat tools on your website (desktop or mobile).


Process

The working process is:

  1. A new chat session request is sent to the server.
  2. If one or more operators are available, the chat is launched. If not, an offline event is received.
  3. The user can send and receive messages.
  4. A new chat session request is sent to the server.

Use

First step, you have to declare the Javascript Chat API:

<script type="text/javascript" src="http://www.agendize.com/web/chat.js"></script>

In your Javascript initialization code, you have to create a chat object:

var chat = new ChatClient({id: '214089', timeout: 10000, persistent: true});

The chat object options are:

Name Description Type Required Default Value
id Your Chat Button ID String Y
timeout Duration interval to get new message from server (in milliseconds) integer N 1000
persistent Keeps the same chat session when the user browse between differents web pages boolean N true

Next step, you can create your event listeners to launch your own code when a chat event is received. The available event listener are:

Name Description
chat.started Chat is started
chat.offline All operator are offline
chat.online Operator(s) are available to chat
chat.close Chat is closed
chat.incoming.message A new message is received
chat.message.sent The message has been sent

Example:

chat.addEventListener('chat.started', function(chatId){ alert('Chat started'); }); chat.addEventListener('chat.offline', function(){ alert('No online operator'); }); chat.addEventListener('chat.online', function(){ alert('Operators are online'); }); chat.addEventListener('chat.close', function(chatId){ alert('chat closed'); }); chat.addEventListener('chat.incoming.message', function(chatId, date, mode, body, messageId, operator){ if (mode == 'operator') alert('New message receive at ' + date + ', sent by ' + operator + ': ' + body); else alert('New message from me at ' + date + ': ' + body); }); chat.addEventListener('chat.message.sent', function(chatId, body){ alert('your message has been sent'); document.forms[0].m.value = ''; });

The last step is to use the start chat function:

chat.start('my name', 'me@acne.com, 'I need help!');

And let your user send a message to operator:

chat.send('Hello, can you help me?');

You can stop and close the chat:

if (chat.isConnected()) chat.close()

Full Example

<html> <head> <script type="text/javascript" src="http://www.agendize.com/web/chat.js"></script> <script type="text/javascript"> var chat = new ChatClient({id: '214089', timeout: 10000, persistent: true}); chat.addEventListener('chat.started', function(chatId){ document.getElementById('form').style.display = 'none'; document.getElementById('chat').style.display = 'block'; }); chat.addEventListener('chat.offline', function(){ alert('no online operator'); }); chat.addEventListener('chat.online', function(){ alert('Operators are online'); }); chat.addEventListener('chat.close', function(chatId){ alert('chat closed'); }); chat.addEventListener('chat.incoming.message', function(chatId, date, mode, body, messageId, operator){ if (!document.getElementById(messageId)) { var p = document.createElement('p'); if (mode == 'operator'){ p.style.color = '#00B32D'; p.innerHTML = '<' + operator + '> '; } else if (mode == 'user'){ p.style.color = '#00F'; p.innerHTML = '<you> '; } p.innerHTML += body; p.id = messageId; document.getElementById('messages').appendChild(p); } }); chat.addEventListener('chat.message.sent', function(chatId, body){ alert('your message has been sent'); document.forms[0].m.value = ''; }); function createChat(nickname, email, question){ chat.start(nickname, email, question); } function quitChat(){ if (chat.isConnected()) chat.close() } </script> <style type="text/css"> *{ font-family: Arial; font-size: 11px; } #messages, #form{ height: 250px; border: solid 1px #808080; } #form label{ display: block; } #chat{ display: none; width: 250px; } #form{ padding: 5px; width: 250px; } #messages p{ padding: 0; margin: 0; } </style> </head> <body> <form name="form" action=""> <div id="form"> <p>To chat with us, please fill the form below!</p> <p> <input name="username" type="text" size="20"/> </p> <p> <label>Your email address:</label> <input name="email" type="text" size="20"/> </p> <p> <label>Your Question:</label> <input name="question" type="text" size="20"/> </p> <p> <input type="button" onclick="createChat(document.forms[0].username.value, document.forms[0].email.value, document.forms[0].question.value)" value="Start Chat"/> </p> </div> <div id="chat> <div id="messages"</div> <div> <textarea name="m" style="width: 100%" name="text"></textarea> </div> <div style="text-align: center"> <input type="button" onclick="chat.send(document.forms[0].m.value)" value="send"/> </div> </div> </form> </body> </html>