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>
