<main>
<article class="userContent">
<p>This usecase describes example steps of the configuration and API usage which are needed to integrate the Videocalliing plugin with a waiting queue.</p><p>For the detailled API documentation see <a href="https://docs.chatvisor.com/docs/jsapi08-conference" rel="nofollow noreferrer ugc">Conference JavaScript API.</a></p><h2 data-id="1.-javascript-integration">1. JavaScript integration</h2><p>The JavaScript has to be integrated in each webpage where we want to video call.</p><p><a href="https://docs.chatvisor.com/docs/setup20_implementation-javascript" rel="nofollow noreferrer ugc">Learn how to implement the JavaScript on your page.</a></p><h2 data-id="2.-join-the-conference">2. Join the conference</h2><p>Implement a button where the customer can join the conference. It is possible to add some meta information <code class="code codeInline" spellcheck="false" tabindex="0">firstName</code>, <code class="code codeInline" spellcheck="false" tabindex="0">lastName</code>, <code class="code codeInline" spellcheck="false" tabindex="0">email</code> 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.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">/**
* @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);
</pre><h2 data-id="3.-check-the-current-queue-status">3. Check the current queue status</h2><p>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.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">CV.conference.queueStatus('UID', callback);
</pre><h2 data-id="4.-start-the-conference">4. Start the conference</h2><p>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.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">CV.conference.start('UID');
</pre><h2 data-id="example-code">Example Code</h2><pre class="code codeBlock" spellcheck="false" tabindex="0"><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>
</pre><p><br></p>
</article>
</main>