Use 6-digit codes

Search…
Use 6-digit codes
By default, Cobrowse does not require any visible UI presented to the user. It will exist in the background of your app, and only activate when agents initiate a new session.
You may optionally present a UI in your app that enables users to generate 6-digit codes. Users may then read a code over the phone or in chat, and agents can use the 6-digit code to initiate the Cobrowse session.
For this purpose, we provide a default plug-and-play UI that provides this functionality. We also provide a set of public methods if you prefer to build a custom UI. More info at Customize the interface.​
Implementation
These are the requirements to initiate sessions using 6-digit codes.
You may expose a small UI in your app for users to generate a 6-digit code that they pass to an agent over the phone or chat to initiate a session.
Note: This guide will use our default UI (very basic!) to display the code. You can replace it with your own UI if you prefer! Please see Customize the interface.
Web
iOS
Android
React Native
Xamarin
MacOS
Windows
Generate the 6-digit code programmatically
1
// ensure Cobrowse is loaded
2
CobrowseIO.client().then(function() {
3
    // create a code a display it to the user using your own UI
4
    CobrowseIO.createSessionCode().then(function(code) {
5
       console.log('your code is', code);
6
    });
7
​
8
});
Copied!
If you are only using 6 digit codes to start Cobrowse sessions in your implementation, you can add the following option to your call to CobrowseIO.start() in the default snippet we provide. This will prevent our SDK contacting the Cobrowse server until a screen sharing session is required.
1
CobrowseIO.start({register:false})
Copied!
For Sample UI, please see Customize the interface​
6-digit codes expire after approximately 15 minutes, so it's best practice to generate a 6-digit code only when a user wants to start a session. 
To setup 6-digit codes on iOS:
1.
Add the appropriate code below into a view controller in your app.
2.
Hook up a trigger for the action (or call it programatically if you prefer).
Swift
1
import CobrowseIO
2
​
3
class ExampleViewController: UIViewController {
4
    var sessionController: CBIOViewController!
5
​
6
    @IBAction func startCobrowse(sender: UIBarButtonItem) {
7
        self.sessionController = CBIOViewController()
8
        self.navigationController?.pushViewController(self.sessionController, animated: true)
9
    }
10
​
11
    // ... the rest of your view controller
12
}
Copied!
For a full example written in Swift, see our Listr sample app at: https://github.com/cobrowseio/Listr​
Objective C
1
@import CobrowseIO;
2
​
3
@implementation ExampleViewController {
4
    CBIOViewController* sessionController;
5
}
6
​
7
-(IBAction) startCobrowse:(id)sender {
8
    sessionController = [[CBIOViewController alloc] init];
9
    [self.navigationController pushViewController:sessionController animated:YES];
10
}
11
​
12
// ... the rest of your view controller
13
​
14
@end
Copied!
Make sure you've hooked up a trigger for the startCobrowse IBAction that we've just added. Then head to https://cobrowse.io/dashboard and enter the 6 digit code that will be generated by your app when you trigger the action!
1
import io.cobrowse.ui.CobrowseActivity;
2
​
3
public class YourActivity extends Activity {
4
​
5
    // the rest of your Activity
6
​
7
    public void startCobrowse(View view) {
8
        Intent intent = new Intent(this, CobrowseActivity.class);
9
        startActivity(intent);
10
    }
11
}
Copied!
Make sure you've hooked up a trigger for the startCobrowse method that we've just added. Then head to https://cobrowse.io/dashboard and enter the 6 digit code that will be generated by your app when you trigger the action!
We've provided a view that will do all the session creation and management for you. All you need to do is include this somewhere in your react native view hierarchy. It's not a requirement to use this UI, you can easily build your own if you like!
1
import { CobrowseView } from 'cobrowse-sdk-react-native';
2
​
3
export default class App extends Component {
4
    render() {
5
        return (
6
            <View>
7
                <CobrowseView />
8
            </View>
9
        );
10
    }
11
}
Copied!
Xamarin.iOS implementation
To setup user-initiated sessions:
1.
Add the appropriate code below into a view controller in your app.
2.
Hook up a trigger for the action (or call it programatically if you prefer).
1
using Xamarin.CobrowseIO;
2
​
3
namespace SampleApp.iOS
4
{
5
    public partial class ViewController : UIViewController
6
    {
7
        private void StartCobrowse(object sender, EventArgs e)
8
        {
9
            NavigationController.PushViewController(new CobrowseViewController(), animated: true);
10
        }
11
    }
12
}
Copied!
For a full example written in C#, see our sample app at: https://github.com/cobrowseio/cobrowse-sdk-xamarin​
Xamarin.Android implementation
We have provided some default UI to make things easier to get started:
1
using Xamarin.CobrowseIO;
2
using Xamarin.CobrowseIO.UI;
3
​
4
namespace SampleApp.Android
5
{
6
    [Activity]
7
    public class MainActivity : AppCompatActivity
8
    {
9
        private void StartCobrowse(object sender, EventArgs e)
10
        {
11
            var intent = new Intent(this, typeof(CobrowseActivity));
12
            StartActivity(intent);
13
        }
14
    }
15
}
Copied!
Xamarin.Forms implementation
The Cobrowse.io Xamarin SDK provides a convenient way to open the default 6 digit code UI. In your cross-platform project:
1
using Xamarin.CobrowseIO.Abstractions;
2
​
3
namespace YourAppNamespace.Forms
4
{
5
    public partial class YourPage : Xamarin.Forms.Page
6
    {
7
        public void StartCobrowse()
8
        {
9
            CobrowseIO.Instance.OpenCobrowseUI();
10
        }
11
    }
12
}
Copied!
Test it
Make sure you've hooked up a trigger for the StartCobrowse method that we've just added. Then head to https://cobrowse.io/dashboard and enter the 6 digit code that will be generated by your app when you trigger the action!
The Cobrowse.io SDK for MacOS does not provide a default UI for generating 6 digit codes, instead you can generate a code for your UI by using the -createSession API:
1
[CobrowseIO.instance createSession:^(NSError * _Nullable err, CBIOSession * _Nullable session) {
2
    if (err) NSLog(@"Error creating code %@", err);
3
    else NSLog(@"Created session code: %@", session.code);
4
}];
Copied!
You can monitor changes in the state of the session you create using the Cobrowse delegate methods:
1
-(void) cobrowseSessionDidUpdate: (nonnull CBIOSession*) session;
2
-(void) cobrowseSessionDidEnd: (nonnull CBIOSession*) session;
Copied!
You can get information about the state of the session using the following methods, which may adjust the UI you are showing:
1
[session isPending] // session has been created but is waiting for agent or user
2
[session isAuthorizing] // waiting for the user to confirm the session
3
[session isActive] // session running, frames are streaming to the agent
4
[session isEnded] // session is over and can no longer be used or edited
Copied!
Windows implementation
You may use either Windows Forms, or WPF in your application. The Cobrowse.io SDK for Windows does not provide a default UI for generating 6 digit codes, instead you can generate a code for your UI by using the CreateSession API:
1
public async Task StartCobrowse()
2
{
3
  CobrowseIO.Instance.SessionAuthorizing += OnSessionAuthorizing;
4
  CobrowseIO.Instance.SessionUpdated += OnSessionUpdated;
5
​
6
  await CobrowseIO.Instance.Start();
7
  await CobrowseIO.Instance.CreateSession();
8
}
9
​
10
...
11
​
12
private void OnSessionUpdated(Session session)
13
{
14
  if (session.Code != null)
15
    Debug.WriteLine(quot;Created session code: {0}", session.Code);
16
}
Copied!
Warning: Be aware that callback is called from non-UI thread.
In WPF you can just bind to CobrowseIO instance property:
1
  xmlns:io="clr-namespace:Cobrowse.IO;assembly=Cobrowse.IO"
2
​
3
  ...
4
​
5
  <TextBlock Text="{Binding Source={x:Static io:CobrowseIO.Instance}, Path=CurrentSession.Code}"/>
Copied!
Complete example of WPF integration is available here.
Test it
Make sure you've added a call to the StartCobrowse method that we've just created. Then head to https://cobrowse.io/dashboard and enter the 6 digit code that will be generated by your app when you trigger the action!
SDK Features - Previous
Identify your devices
Next - SDK Features
Redact sensitive data
Last modified 4mo ago
Copy link
Contents
Implementation