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.
Important: 6-digit codes expire after approximately 20 minutes, so it's best practice to generate a code only when a user wants to start a session.
To generate a 6-digit code in your integration you can use the following APIs. Once you have generated the code you can display it to the user in your own UI. You should only generate a code when a user needs it as they expire shortly after creation.
// ensure Cobrowse is loadedCobrowseIO.client().then(function() {// create a code a display it to the user using your own UI// ONLY GENERATE CODE WHEN NEEDED. DO NOT GENERATE CODE ON PAGE LOAD.CobrowseIO.createSessionCode().then(function(code) {console.log('your code is', code); });});
[CobrowseIO.instance createSession:^(NSError * err, CBIOSession * session) {
if (err) NSLog(@"Failed to create code")
else NSLog(@"%@", session.code);
}];
If you are only using 6 digit codes to start Cobrowse sessions in your implementation, you can prevent the SDK registering in your Cobrowse account until a screen sharing session is required. See the documentation on preventing automatic registration.
You can monitor changes in the state of the session using the Cobrowse delegate methods to listen for events:
Default 6-digit code UI
We provide a very simple default plug-and-play UI that provides the 6-digit code display functionality. We also provide a set of public methods if you prefer to build a custom UI (see above). Learn more at Customize the interface.
The Cobrowse.io SDK for web does not provide a default UI for generating 6 digit codes.
Add the appropriate code below into a view controller in your app.
Hook up a trigger for the action (or call it programatically if you prefer).
Swift
importCobrowseIOclassExampleViewController:UIViewController {var sessionController: CBIOViewController!@IBActionfuncstartCobrowse(sender: UIBarButtonItem) { self.sessionController =CBIOViewController() self.navigationController?.pushViewController(self.sessionController, animated:true) }// ... the rest of your view controller}
@import CobrowseIO;
@implementation ExampleViewController {
CBIOViewController* sessionController;
}
-(IBAction) startCobrowse:(id)sender {
sessionController = [[CBIOViewController alloc] init];
[self.navigationController pushViewController:sessionController animated:YES];
}
// ... the rest of your view controller
@end
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!
importio.cobrowse.ui.CobrowseActivity;publicclassYourActivityextendsActivity {// the rest of your ActivitypublicvoidstartCobrowse(View view) {Intent intent =newIntent(this,CobrowseActivity.class);startActivity(intent); }}
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!
The Cobrowse.io SDK for Flutter does not provide a default UI for generating 6 digit codes, but you can show the default UI shipped in the native SDKs using Flutter platform channel. It's not a requirement to use this UI, you can easily build your own if you like!
The Cobrowse.io SDK for MacOS does not provide a default UI for generating 6 digit codes.
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.
A complete example of a WPF integration is available here.
To see some code samples for how to build a custom UI for your platform see: