UserTagging & Screensharing Example - TeamViewer Support
<main>
<article class="userContent">
<p>This usecase describes example steps for using the API to start a screensharing call with a logged-in user of a web application.</p><h2 data-id="1.-add-tagging-code-to-application">1. Add tagging code to application</h2><p>On a page where the user is signed-in, add a <a href="https://docs.chatvisor.com/docs/jsapi05-user#user-tagging" rel="nofollow noreferrer ugc">call to the tagging method</a> with user data available from your application. This adds user information to an existing browser session.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">CV.user.tag({
"email": "john.doe@chatvisor.com",
"firstname": "John",
"lastname": "Doe",
"labels": []
})
</pre><h2 data-id="2.-create-a-page-for-screensharing">2. Create a page for screensharing</h2><p>Create a UI element inside the application that is only available for support agents or other users with special permissions that should be able to start a screensharing call with users of the application.</p><p>It is required to authenticate against the Chatvisor API to get information about active users. This is done by providing a user token to the <code class="code codeInline" spellcheck="false" tabindex="0">CV.rest.auth</code> method before requesting information.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">CV.rest.auth("an-agent@example.org", "my-user-token")
</pre><p>The user token can be acquired using the <a href="https://developers.chatvisor.com/" rel="nofollow noreferrer ugc">REST API</a>.</p><h2 data-id="3.-select-user-for-screensharing">3. Select user for screensharing</h2><p>On the screensharing page add a UI to select a user for screensharing. You may select one of the following options:</p><h3 data-id="option-a%3A-list-of-users">Option A: List of users</h3><p>On this page <a href="https://docs.chatvisor.com/docs/jsapi05-user#user-tagging" rel="nofollow noreferrer ugc">request the list of active users</a> and display the list inside the UI of the application e.g. as table:</p><p>Active users</p><p>E-Mail<a href="mailto:john.doe@example.org" rel="nofollow noreferrer ugc">john.doe@example.org</a>Start<a href="mailto:jane.doe@example.org" rel="nofollow noreferrer ugc">jane.doe@example.org</a>Start</p><pre class="code codeBlock" spellcheck="false" tabindex="0">CV.user.list(result => {
result.forEach(user => addTableRow(user))
})
</pre><h3 data-id="option-b%3A-existing-user-profile">Option B: Existing user profile</h3><p>If there is already an existing user (e.g. a user profile) available inside your application, you may want to get information about the browser session of a single user.</p><div class="embedExternal embedImage display-large float-none">
<div class="embedExternal-content">
<a class="embedImage-link" href="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" rel="nofollow noreferrer noopener ugc" target="_blank">
<img class="embedImage-img" src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" alt="Example avatar" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a>
</div>
</div>
<p>John Doe</p><p>Screensharing: Start</p><p>Then <a href="https://docs.chatvisor.com/docs/jsapi05-user#status-of-single-user" rel="nofollow noreferrer ugc">search a user with the given information</a> by using the JavaScript API.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">CV.user.status("john.doe@chatvisor.com", status => {
if(status.visitorId) {
startButton.show();
}
})
</pre><h2 data-id="4.-start-screensharing">4. Start screensharing</h2><p>The result object(s) contain the information that was supplied when a tag was created together with a visitor id. This visitor id can be used in order to start a screensharing session using the call API.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">function onClickStart(result) {
var visitorId = result["visitorId"];
CV.calling.startScreen(visitorId);
}
</pre><h2 data-id="5.-start-conference">5. Start conference</h2><p>After the user is successfully tagged (after login and optionally assigned to an agent) you can start the conference without an ID, if the <code class="code codeInline" spellcheck="false" tabindex="0">id</code> property in the tag function was set.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">CV.conference.start();
</pre><p><br></p>
</article>
</main>