Active session controls

Search…
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!
SDK Features - Previous
Customize the interface
6-digit code screen
Last modified 3mo ago
Copy link
Contents
Example UIs