This usecase describes example steps of the configuration and API usage which are needed to integrate the Videocalliing plugin with a waiting queue.
For the detailled API documentation see Conference JavaScript API.
1. JavaScript integration
The JavaScript has to be integrated in each webpage where we want to video call.
Learn how to implement the JavaScript on your page.
2. Join the conference
Implement a button where the customer can join the conference. It is possible to add some meta information firstName, lastName, email to the customer which is automatically created. After the customer is created they join a queue and an agent can pick it from the queue.
/**
* @param UID customerId which should be unique
* @param additionalProperties (optional + every property is optional)
* @param callback which is called when the join was complete
*/
CV.conference.join('UID', { firstName: '', lastName: '', email: '', joinedTimestamp: new Date().getTime()}, callback);
3. Check the current queue status
After the customer has joined the queue it is necessary to poll the queue to hold the customer within the queue. If the polling stops (i.e. the customer leaves the website), the customer is thrown out of the queue after 5sec.
CV.conference.queueStatus('UID', callback);
4. Start the conference
When the current queue status is -1, the queue polling will stop and the agent has already assigned the customer and will join the conference. At this point it is meaningful to start the conference.
CV.conference.start('UID');
Example Code
<script src="https://cdn.chatvisor.com/cdn/js/XXXXXX.js" type="text/javascript" async></script>
<script>
function join() {
CV.conference.join('UID', {
firstName: 'Max',
lastName: 'Mustermann',
email: 'max.mustermann@example.com'
}, function() {
startQueuePolling();
});
}
function startQueuePolling() {
CV.conference.queueStatus('UID', function(index) {
console.log("My current queue index is ", index);
if (index == -1) {
CV.conference.start('UID');
}
});
}
</script>
<button onclick="join()">Join the conference</button>
