Active session controls
By default, the Cobrowse SDKs will show a minimal visual indicator to the end-user that a session is active. Our default UI provides an easy way for the end-user to end the session at any time.
You can fully customize the interface for a Cobrowse session, including how to end a session.
Web
iOS / MacOS
Android
React Native
Xamarin
Windows
The SDK provides hooks for you to render your own interface:
1
CobrowseIO.showSessionControls = function() {
2
// your code, i.e. $('#cobrowse-control').show() or similar
3
}
4
5
CobrowseIO.hideSessionControls = function() {
6
// your code, i.e. $('#cobrowse-control').hide() or similar
7
}
Copied!
When you override these functions, we will not show any default UI for the end-user to end their session. You can then display your own button or other UI to allow your end-user to end their session.
The SDK provides hooks via CobrowseIODelegate for you to render your own interface:

Swift

1
func cobrowseShowSessionControls(_ session: CBIOSession) {
2
// You can render controls however you like here.
3
}
4
5
func cobrowseHideSessionControls(_ session: CBIOSession) {
6
// hide your session controls
7
}
Copied!

Objective C

1
- (void)cobrowseShowSessionControls:(CBIOSession*) session {
2
// You can render controls however you like here.
3
}
4
5
- (void)cobrowseHideSessionControls:(CBIOSession*) session {
6
// hide your session controls
7
}
Copied!
The SDK provides hooks via CobrowseIO.SessionControlsDelegate for you to render your own interface:
1
@Override
2
public void showSessionControls(final Activity activity, final Session session) {
3
// show your own controls here
4
}
5
6
@Override
7
public void hideSessionControls(final Activity activity, final Session session) {
8
// hide your controls here
9
}
Copied!
Our React Native SDK provides a component you can use to wrap your session control components. Our component will then handle showing and hiding your controls when required:
1
import { SessionControl } from 'cobrowse-sdk-react-native';
2
3
export default class App extends Component {
4
render() {
5
return (
6
<View>
7
<SessionControl>
8
<Text>This will only show when a session is active!</Text>
9
</SessionControl>
10
</View>
11
);
12
}
13
}
Copied!

Xamarin.iOS implementation

The SDK provides hooks via CobrowseIODelegate for you to render your own interface:
1
public override void CobrowseShowSessionControls(Session session) {
2
// show session controls
3
}
4
5
public override void CobrowseHideSessionControls(Session session) {
6
// hide session controls
7
}
Copied!

Xamarin.Android implementation

You can fully customize the interface for a Cobrowse session. The SDK provides hooks via CobrowseIO.ISessionControlsDelegate for you to render your own interface:
1
public void ShowSessionControls(Activity activity, Session session) {
2
// show session controls
3
}
4
5
public void HideSessionControls(Activity activity, Session session) {
6
// hide session controls
7
}
Copied!
You may override the default session and active display indicator by handling CobrowseIO.Instance.SessionControlsUpdated:
1
CobrowseIO.Instance.SessionControlsUpdated += OnSessionControlsUpdated;
Copied!
Callback will be called when:
  • Session starts. FrameInfo will contian information about the display currently captured by the screenshare session.
  • Active display is switched. FrameInfo will contain information about the display which is being switched to.
  • Session ends. FrameInfo param will be null. This means that session UI should be hidden.
Warning: Be aware that callback is called from non-UI thread.
When implementing your own session controls, it's a good idea to provide the user with some UI to end the current Cobrowse session. You can call the following APIs from your UI to end the session:
Web
iOS
Android
React Native
Xamarin
1
if (CobrowseIO.currentSession)
2
await CobrowseIO.currentSession.end();
Copied!
1
[CobrowseIO.instance.currentSession end:^(NSError * _Nullable err, CBIOSession * _Nullable session) {
2
// handle errors here
3
}];
Copied!
1
if (CobrowseIO.instance().currentSession() != null ) {
2
CobrowseIO.instance().currentSession().end((err, session) -> {
3
// handle errors here
4
});
5
}
Copied!
1
// Get a reference to the current session if you don't have one
2
const session = await CobrowseIO.currentSession();
3
// if there's an ongoing session, end it
4
if (session) await session.end()
Copied!
1
CobrowseIO.Instance().CurrentSession?.End(null);
Copied!

Example UIs

To illustrate how these APIs should be used we have put together some example code for customizing the active session indicators:
Web
iOS
Xamarin
Here's a simple example that re-create the default UI, but with a blue button and some different text:
1
<script>
2
CobrowseIO.client().then(function() {
3
var button = document.createElement('div');
4
button.className = '__cbio_ignored';
5
button.textContent = 'End';
6
button.style.fontFamily = 'sans-serif';
7
button.style.padding = '10px 13px';
8
button.style.fontSize = '13px';
9
button.style.color = 'white';
10
button.style.boxShadow = '0px 2px 5px #33333344';
11
button.style.cursor = 'pointer';
12
button.style.borderRadius = '30px';
13
button.style.background = 'blue';
14
button.style.position = 'fixed';
15
button.style.zIndex = '2147483647';
16
button.style.bottom = '20px';
17
button.style.left = '50%';
18
button.style.transform = 'translateX(-50%)';
19
button.addEventListener('click', function() {
20
if (CobrowseIO.currentSession) CobrowseIO.currentSession.end();
21
});
22
23
CobrowseIO.showSessionControls = function() {
24
document.body.appendChild(button);
25
}
26
27
CobrowseIO.hideSessionControls = function() {
28
if (button.parentNode) button.parentNode.removeChild(button);
29
}
30
});
31
</script>
Copied!
1
import CobrowseIO
2
3
@UIApplicationMain
4
class AppDelegate: UIResponder, UIApplicationDelegate, CobrowseIODelegate {
5
6
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
7
CobrowseIO.instance().delegate = self
8
// ... the rest of your app setup
9
return true
10
}
11
12
func cobrowseShowSessionControls(_ session: CBIOSession) {
13
// You can render controls however you like here.
14
// One option is to add our sample end session UI defined below.
15
if (indicatorInstance == nil) {
16
indicatorInstance = self.defaultSessionIndicator(container: UIApplication.shared.keyWindow!)
17
}
18
indicatorInstance?.isHidden = false
19
}
20
21
func cobrowseHideSessionControls(_ session: CBIOSession) {
22
indicatorInstance?.isHidden = true
23
}
24
25
// sample end session UIView, constructor, and tap gesture recognizer implementation
26
var indicatorInstance : UIView? = nil
27
func defaultSessionIndicator(container: UIView) -> UIView {
28
let indicator : UILabel = UILabel()
29
indicator.backgroundColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.7)
30
indicator.text = "End Session"
31
indicator.isUserInteractionEnabled = true
32
indicator.textAlignment = .center
33
indicator.font.withSize(UIFont.smallSystemFontSize)
34
indicator.textColor = .white
35
indicator.layer.cornerRadius = 10
36
indicator.clipsToBounds = true
37
indicator.translatesAutoresizingMaskIntoConstraints = false
38
container.addSubview(indicator)
39
40
indicator.widthAnchor.constraint(equalToConstant: 200).isActive = true
41
indicator.heightAnchor.constraint(equalToConstant: 40).isActive = true
42
indicator.centerXAnchor.constraint(equalTo: container.centerXAnchor).isActive = true
43
indicator.bottomAnchor.constraint(equalTo: container.bottomAnchor, constant: -20).isActive = true
44
45
let tapRecognizer : UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(indicatorTapped(_:)))
46
tapRecognizer.numberOfTapsRequired = 1
47
indicator.addGestureRecognizer(tapRecognizer)
48
return indicator
49
}
50
@objc
51
func indicatorTapped(_ sender: UITapGestureRecognizer) {
52
CobrowseIO.instance().currentSession()?.end(nil)
53
}
54
55
}
Copied!

Xamarin.iOS implementation

1
using Xamarin.CobrowseIO;
2
3
[Register("AppDelegate")]
4
public class AppDelegate : UIResponder, IUIApplicationDelegate
5
{
6
[Export("application:didFinishLaunchingWithOptions:")]
7
public bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
8
{
9
CobrowseIO.Instance.SetDelegate(new CustomCobrowseDelegate());
10
// ... the rest of your app setup
11
return true;
12
}
13
}
14
15
public class CustomCobrowseDelegate : CobrowseIODelegate
16
{
17
// Sample end session UIView, constructor, and tap gesture recognizer implementation
18
private UIView _indicatorInstance;
19
20
public override void CobrowseShowSessionControls(Session session)
21
{
22
// You can render controls however you like here.
23
// One option is to add our sample end session UI defined below.
24
if (_indicatorInstance == null)
25
{
26
_indicatorInstance = GetDefaultSessionIndicator(container: UIApplication.SharedApplication.KeyWindow);
27
}
28
_indicatorInstance.Hidden = false;
29
}
30
31
public override void CobrowseHideSessionControls(Session session)
32
{
33
if (_indicatorInstance != null)
34
_indicatorInstance.Hidden = true;
35
}
36
37
private UIView GetDefaultSessionIndicator(UIView container)
38
{
39
var indicator = new UILabel();
40
indicator.BackgroundColor = new UIColor(red: 1.0f, green: 0.0f, blue: 0.0f, alpha: 0.7f);
41
indicator.Text = "End Session";
42
indicator.UserInteractionEnabled = true;
43
indicator.TextAlignment = UITextAlignment.Center;
44
indicator.Font.WithSize(UIFont.SmallSystemFontSize);
45
indicator.TextColor = UIColor.White;
46
indicator.Layer.CornerRadius = 10;
47
indicator.ClipsToBounds = true;
48
indicator.TranslatesAutoresizingMaskIntoConstraints = false;
49
container.AddSubview(indicator);
50
51
indicator.WidthAnchor.ConstraintEqualTo(200f).Active = true;
52
indicator.HeightAnchor.ConstraintEqualTo(40f).Active = true;
53
indicator.CenterXAnchor.ConstraintEqualTo(container.CenterXAnchor).Active = true;
54
indicator.BottomAnchor.ConstraintEqualTo(container.BottomAnchor, constant: -20f).Active = true;
55
56
var tapRecognizer = new UITapGestureRecognizer(() =>
57
{
58
CobrowseIO.Instance().CurrentSession?.End(null);
59
});
60
tapRecognizer.NumberOfTapsRequired = 1;
61
indicator.AddGestureRecognizer(tapRecognizer);
62
return indicator;
63
}
64
65
public override void SessionDidUpdate(Session session)
66
{
67
}
68
69
public override void SessionDidEnd(Session session)
70
{
71
}
72
}
Copied!

Xamarin.Android implementation

You can fully customize the interface for a Cobrowse session. The SDK provides hooks via CobrowseIO.ISessionControlsDelegate for you to render your own interface:
1
using Xamarin.CobrowseIO;
2
3
[Application]
4
public class MainApplication : Application, CobrowseIO.ISessionControlsDelegate
5
{
6
public override void OnCreate()
7
{
8
base.OnCreate();
9
CobrowseIO.Instance.SetDelegate(this);
10
// and the rest of cobrowse setup ...
11
}
12
13
public void ShowSessionControls(Activity activity, Session session)
14
{
15
// optionally show your own controls here
16
}
17
18
public void HideSessionControls(Activity activity, Session session)
19
{
20
// hide controls created by the method above here
21
}
22
23
//...
24
}
Copied!

Xamarin.Forms implementation

Even though Cobrowse.io works with native views, there is nothing that would prevent you from using Xamarin.Forms.VisualElement as a session indicator.
First, create an indicator view using Xamarin.Forms (CobrowseCustomView.xaml):
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ContentView
3
xmlns="http://xamarin.com/schemas/2014/forms"
4
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
5
x:Class="SampleApp.Forms.CobrowseCustomView"
6
HeightRequest="42"
7
WidthRequest="130">
8
<Button
9
BackgroundColor="Red"
10
TextColor="White"
11
Text="End Session"
12
CornerRadius="4"
13
Clicked="EndSessionButton_Clicked" />
14
</ContentView>
Copied!
Then, in the iOS project:
1
using System;
2
using Foundation;
3
using UIKit;
4
using Xamarin.CobrowseIO;
5
using Xamarin.Forms.Platform.iOS;
6
7
[Register("AppDelegate")]
8
public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
9
{
10
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
11
{
12
CobrowseIO.Instance.SetDelegate(new CustomOverlayCobrowseDelegate());
13
}
14
}
15
16
public class CustomOverlayCobrowseDelegate : CobrowseDelegateImplementation
17
{
18
private UIView _indicatorInstance;
19
20
public override void CobrowseShowSessionControls(Session session)
21
{
22
if (_indicatorInstance == null)
23
{
24
_indicatorInstance = GetDefaultSessionIndicator(container: UIApplication.SharedApplication.KeyWindow);
25
}
26
_indicatorInstance.Hidden = false;
27
}
28
29
public override void CobrowseHideSessionControls(Session session)
30
{
31
if (_indicatorInstance != null)
32
_indicatorInstance.Hidden = true;
33
}
34
35
private UIView GetDefaultSessionIndicator(UIView container)
36
{
37
var indicator = new CobrowseCustomView();
38
var renderer = Platform.CreateRenderer(indicator);
39
renderer.Element.Layout(new Xamarin.Forms.Rectangle(0, 0, indicator.WidthRequest, indicator.HeightRequest));
40
var nativeIndicator = renderer.NativeView;
41
nativeIndicator.TranslatesAutoresizingMaskIntoConstraints = false;
42
43
container.AddSubview(nativeIndicator);
44
45
nativeIndicator.WidthAnchor.ConstraintEqualTo((float)indicator.WidthRequest).Active = true;
46
nativeIndicator.HeightAnchor.ConstraintEqualTo((float)indicator.HeightRequest).Active = true;
47
nativeIndicator.CenterYAnchor.ConstraintEqualTo(container.CenterYAnchor).Active = true;
48
nativeIndicator.RightAnchor.ConstraintEqualTo(container.RightAnchor, constant: -20f).Active = true;
49
50
return nativeIndicator;
51
}
52
}
Copied!
And in the Android project:
1
using Xamarin.CobrowseIO;
2
using Xamarin.Forms.Platform.Android;
3
4
[Application]
5
public class MainApplication : Application
6
{
7
public override void OnCreate()
8
{
9
CobrowseIO.Instance.SetDelegate(new CustomOverlayCobrowseDelegate());
10
}
11
}
12
13
public class CustomOverlayCobrowseDelegate : CobrowseDelegateImplementation, CobrowseIO.ISessionControlsDelegate
14
{
15
private View _overlayIndicator;
16
17
public void ShowSessionControls(Activity activity, Session session)
18
{
19
if (_overlayIndicator != null)
20
{
21
return;
22
}
23
if (!(activity is FormsAppCompatActivity))
24
{
25
return;
26
}
27
var indicator = new CobrowseCustomView();
28
var renderer = Platform.CreateRendererWithContext(indicator, activity);
29
renderer.Element.Layout(new Xamarin.Forms.Rectangle(0, 0, indicator.WidthRequest, indicator.HeightRequest));
30
var nativeIndicator = renderer.View;
31
32
var modal = new RelativeLayout(activity);
33
var layoutParams = new RelativeLayout.LayoutParams(
34
(int)TypedValue.ApplyDimension(ComplexUnitType.Dip, (float)indicator.WidthRequest, activity.Resources.DisplayMetrics),
35
(int)TypedValue.ApplyDimension(ComplexUnitType.Dip, (float)indicator.HeightRequest, activity.Resources.DisplayMetrics))
36
{
37
MarginEnd = (int)TypedValue.ApplyDimension(ComplexUnitType.Dip, 4f, activity.Resources.DisplayMetrics)
38
};
39
layoutParams.AddRule(LayoutRules.CenterVertical);
40
layoutParams.AddRule(LayoutRules.AlignParentEnd);
41
modal.AddView(nativeIndicator, layoutParams);
42
43
var rootFrameLayout = (ViewGroup)activity.Window.PeekDecorView();
44
rootFrameLayout.AddView(modal, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent));
45
rootFrameLayout.Invalidate();
46
47
_overlayIndicator = modal;
48
}
49
50
public void HideSessionControls(Activity activity, Session session)
51
{
52
if (_overlayIndicator == null)
53
{
54
return;
55
}
56
if (!(activity is FormsAppCompatActivity))
57
{
58
return;
59
}
60
var rootFrameLayout = (ViewGroup)activity.Window.PeekDecorView();
61
rootFrameLayout.RemoveView(_overlayIndicator);
62
_overlayIndicator = null;
63
}
64
}
Copied!
Copy link
Contents
Example UIs