UserTagging & Screensharing Example
This usecase describes example steps for using the API to start a screensharing call with a logged-in user of a web application.
1. Add tagging code to application
On a page where the user is signed-in, add a call to the tagging method with user data available from your application. This adds user information to an existing browser session.
CV.user.tag({
"email": "john.doe@chatvisor.com",
"firstname": "John",
"lastname": "Doe",
"labels": []
})
2. Create a page for screensharing
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.
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 CV.rest.auth
method before requesting information.
CV.rest.auth("an-agent@example.org", "my-user-token")
The user token can be acquired using the REST API.
3. Select user for screensharing
On the screensharing page add a UI to select a user for screensharing. You may select one of the following options:
Option A: List of users
On this page request the list of active users and display the list inside the UI of the application e.g. as table:
Active users
john.doe@example.org jane.doe@example.org
CV.user.list(result => {
result.forEach(user => addTableRow(user))
})
Option B: Existing user profile
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.
John Doe
Screensharing:
Then search a user with the given information by using the JavaScript API.
CV.user.status("john.doe@chatvisor.com", status => {
if(status.visitorId) {
startButton.show();
}
})
4. Start screensharing
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.
function onClickStart(result) {
var visitorId = result["visitorId"];
CV.calling.startScreen(visitorId);
}
5. Start conference
After the user is successfully tagged (after login and optionally assigned to an agent) you can start the conference without an ID, if the id
property in the tag function was set.
CV.conference.start();