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:
- A new chat session request is sent to the server.
- If one or more operators are available, the chat is launched. If not, an offline event is received.
- The user can send and receive messages.
- 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://app.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://app.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>
