Mobile SDK user tagging and LiveView - TeamViewer Support
<main> <article class="userContent"> <p>This use case describes example steps of the configuration and API usage which are needed to help logged in users in an mobile application.</p><p>For the detailled API documentation see the <a href="https://docs.chatvisor.com/docs/android03-reference" rel="nofollow noreferrer ugc">Android</a> and <a href="https://docs.chatvisor.com/docs/ios03-reference" rel="nofollow noreferrer ugc">iOS</a> API docs.</p><p>This guide will describe the steps with code for Android, but the general steps are applicable to an iOS application in the same way</p><h2 data-id="1.-enable-configure-plugin">1. Enable & configure plugin</h2><p>Open the <a href="https://app.chatvisor.com/" rel="nofollow noreferrer ugc">web application</a> and <a href="https://docs.chatvisor.com/docs/config15_css_settings-module-configuration" rel="nofollow noreferrer ugc">create a "CoBrowsing/Analytics" plugin</a>. To make the screen transmission only start when a user needs help, <a href="https://docs.chatvisor.com/docs/config24_css_module-configuration-co-browsing#optin" rel="nofollow noreferrer ugc">configure an opt-in type</a>. For this use case we recommend to select "Support Agent". To ask the user for permission before the screen transmission starts, change to the "Co-Browsing" tab and enable "Activate Co-Browsing" and "Additional optin popup when Co-Browsing is started".</p><h2 data-id="2.-sdk-integration">2. SDK integration</h2><p>The mobile SDK has to be integrated into the application package.</p><p><a href="https://docs.chatvisor.com/docs/android01-installation" rel="nofollow noreferrer ugc">Learn how to integrate the SDK into your Android application</a></p><p><a href="https://docs.chatvisor.com/docs/ios01-installation" rel="nofollow noreferrer ugc">Learn how to integrate the SDK into your iOS application</a></p><h2 data-id="3.-start-liveview">3. Start LiveView</h2><p>Once the application is started by a user, the LiveView module of the SDK should be started. This will register a session in the Chatvisor Webservice, but not start screen transmission if you enabled opt-in in the previous step.</p><p>For instance in the <code class="code codeInline" spellcheck="false" tabindex="0">onCreate</code> method of your application class call the the <code class="code codeInline" spellcheck="false" tabindex="0">start</code> method with the mobile credentials found on the <a href="https://app.chatvisor.com/#/components/tenant/settings/api" rel="nofollow noreferrer ugc">API settings page</a>:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">Chatvisor.liveView.start("<your user id>", "<your token>"); </pre><p>You should now see an session in the <a href="https://docs.chatvisor.com/docs/config04_css_live-view#feature-descriptions" rel="nofollow noreferrer ugc">LiveView session list</a>:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://docs.chatvisor.com/img/liveview-mobile.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/liveview-mobile.png" alt="Session in the session list" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p></p><p><br></p><h2 data-id="4.-tag-an-authenticated-user">4. Tag an authenticated user</h2><p>Once a user logs into a user account in the application, we want to <a href="https://docs.chatvisor.com/docs/android02-usage#user-tagging" rel="nofollow noreferrer ugc">tag the session with information about the user</a>. Make sure to use the username or any unique value for the id field, so a new user is create in the backend that has all session associated to it.</p><pre class="code codeBlock" spellcheck="false" tabindex="0">List<String> labels = new ArrayList<String>(); labels.put("foo") Chatvisor.user.tag( new ActiveUser() .widthId("john.doe") .withEmail("john.doe@example.com") .withFirstname("John") .withLastname("Doe") .withLabels(labels) ); </pre><p>The session list should now look like this. Notice the tags added to the session.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://docs.chatvisor.com/img/liveview-mobile-2.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://docs.chatvisor.com/img/liveview-mobile-2.png" alt="Session in the session list" height="180" width="320" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p></p><p><br></p><h2 data-id="5.-remove-tag-when-user-logs-out">5. Remove tag when user logs out</h2><p>If a user logs out of you application, call the clear method to remove the tag associated with the session:</p><pre class="code codeBlock" spellcheck="false" tabindex="0">Chatvisor.user.clear() </pre><h2 data-id="6.-support-user">6. Support user</h2><p>We now assume that the user contacted you e.g. by telephone. You may now open the list of sessions and look for the username <code class="code codeInline" spellcheck="false" tabindex="0">john.doe</code>. After clicking the session, a button appears to ask the user to accept the request. Once the user accepted the request, the screen of the mobile device is shown.</p> </article> </main>
