Cobrowse.io Docs
  • Getting started
  • SDK Installation
    • Web
    • iOS
    • Android
    • React Native
    • Flutter
    • .NET Mobile
    • macOS
    • Windows
  • SDK Features
    • Account config
    • Identify your devices
    • Use 6-digit codes
    • Redact sensitive data
    • Viewing PDFs
    • Universal Cobrowse
    • Customize the interface
      • Active session controls
      • 6-digit code screen
      • User consent dialog
      • Remote control consent dialog
      • Full device consent dialog
      • Localization / translation
    • Initiate sessions with push
    • Listening for events
    • Full device capabilities
      • Full device screen sharing
      • Full device remote control
      • Managing full device mode
    • Advanced configuration
      • Starting and stopping the SDK
      • Declaring capabilities
      • Intercepting mobile SDK network requests
      • Web
        • IFrames support
        • IE 11 polyfills
        • Cross-domain session support
        • Ignore Views
      • iOS
        • Alternate render method
        • Custom touch handling
      • Android
        • Backporting TLS to older Android versions
  • Agent-side integrations
    • Agent-side overview
    • Platform integrations
      • Zendesk
      • Salesforce
        • Migrating from legacy to v2
        • Salesforce (Legacy)
      • Genesys
        • Genesys Cloud
        • Engage Workspace Web Edition (WWE)
        • Engage Workspace Desktop Edition (WDE)
      • Intercom
      • Freshworks
      • Talkdesk
      • NICE
    • Custom integrations
    • Agent SDK
      • API Reference
      • Sample code snippets
    • Authentication (JWTs)
      • JWT Policies
    • Authentication (SAML 2.0)
    • IFrame embeds
  • Enterprise self-hosting
    • Self-hosting overview
    • Docker Compose
    • Helm chart
      • Image Pull Secret
      • Environment Variables
      • Optional recording components
      • Pod Annotations
    • AWS terraform
      • AWS metrics configuration
    • Azure terraform
      • Azure metrics configuration
    • GCP terraform
      • GCP metrics configuration
    • Sizing guidelines
    • Running your instance
      • Adding a superuser
      • Limiting account creation
      • Limiting magic link recipients
      • Configuring SMTP
      • Managing your deployment
    • Monitoring your instance
      • Available metrics
      • Self-Hosted Prometheus
    • Advanced configuration
      • Air gap configuration
      • Pin web SDK version
      • L7 firewall configuration
      • Docker proxy configuration
    • Troubleshooting
Powered by GitBook
On this page

Was this helpful?

  1. SDK Features
  2. Customize the interface

User consent dialog

By default, Cobrowse will show a user consent dialog when a new session is incoming. You may modify and customize the consent prompt using the SDK.

Previous6-digit code screenNextRemote control consent dialog

Last updated 6 months ago

Was this helpful?

By default, Cobrowse will show a user consent dialog when a new session is incoming. You may modify and customize the consent prompt as you wish, using the SDK hooks described below.

Admin users may also disable this consent prompt from your account settings if you prefer to remove it entirely:

CobrowseIO.confirmSession = function() {
    return new Promise(function(resolve, reject) {
        // show your UI here
        // call resolve(true) to accept the session
        resolve(true)
        // or reject() to reject the session
    })
}
-(void) cobrowseHandleSessionRequest:(CBIOSession*) session {
    // show your own UI here
    // call [session activate: <callback>] to accept and start the session
    // provide a callback to handle any errors during session initiation
    [session activate: nil];
    // or [session end: nil]; to reject the session
}
@Override
public void handleSessionRequest(final Activity currentActivity, final Session session) {
    // Do something here, e.g. showing a permission request dialog
    // Make sure to call activate(<callback>) on the session object if
    // you want to start the session.
    // Provide a callback if you wish to handle errors during session
    // initiation.
    session.activate(null);
    // or session.end(null) to reject the session
}
CobrowseIO.handleSessionRequest = function(session) {
    // Replace this with your own logic
    // Just be sure to call session.activate() to
    // accept the session, or session.end() to reject it
    session.activate()
}
CobrowseIO.instance.handleSessionRequest.listen((session) {
    // Replace this with your own logic
    // Just be sure to call session.activate() to
    // accept the session, or session.end() to reject it
    try {
        session.activate();
    } on PlatformException {
        // E.g. a network error
    }
});

.NET iOS implementation

public override void CobrowseHandleSessionRequest(Session session) {
    // show your own UI here
    // call Activate(<callback>) to accept and start the session
    // provide a callback to handle any errors during session initiation
    session.Activate(callback: null);
    // or session.End(null) to reject the session
}

.NET iOS implementation

public void HandleSessionRequest(Activity activity, Session session) {
    // Do something here, e.g. showing a permission request dialog
    // Make sure to call Activate(<callback>) on the session object if
    // you want to start the session.
    // Provide a callback if you wish to handle errors during session
    // initiation.
    session.Activate(callback: null);
    // or session.End(null) to reject the session
}

MAUI implementation

You can also achieve this functionality from a cross-platform project. In this case you don't have to implement your own delegate, but instead you subscribe to the SessionDidRequest event:

CobrowseIO.Instance.SessionDidRequest += OnCobrowseSessionDidRequest;
...
private async void OnCobrowseSessionDidRequest(object sender, ISession session) {
    // Do something here, e.g. showing a permission request dialog
    // Make sure to call Activate(<callback>) on the session object if
    // you want to start the session.
    // Provide a callback if you wish to handle errors during session
    // initiation.
    session.Activate(null);
    // or session.End(null) to reject the session
}

You can override the default session authorization dialog by adding a handler to the CobrowseIO.Instance.SessionAuthorizing event:

  CobrowseIO.Instance.SessionAuthorizing += OnSessionAuthorizing;

Warning: Callback will be called from non-UI thread, so be sure to dispatch it to the UI one.

  • To confirm session:

await CobrowseIO.Instance.CurrentSession.Activate();
  • To reject a session:

await CobrowseIO.Instance.CurrentSession.End();

Example UIs

We've created a set of sample UIs that you may drop directly into your app or website as a starting point to customize the consent prompt.

// A generic consent dialog class
function Consent() {
  var container = document.createElement('div');
  function content(title, description){
    return '\
      <div style="background: rgba(50, 50, 50, 0.4); position: fixed; z-index: 2147483647; bottom: 0; top: 0; left: 0; right: 0">\
        <div style="color: #333; font-family:sans-serif; line-height:140%; position:fixed; padding:25px; background:white; border-radius:15px; z-index:2147483647; top:50px; left:50%; width:75%; max-width:350px; transform:translateX(-50%); box-shadow:0px 0px 15px #33333322;">\
          <div style="text-align:center; margin-top:10px; margin-bottom:20px"><b>'+title+'</b></div>\
          <div>'+description+'</div>\
          <div style="float:right; margin-top:40px; color:rgb(0, 122, 255);">\
            <a class="cobrowse-deny" style="cursor:pointer; padding:10px;">Deny</a>\
            <a class="cobrowse-allow" style="cursor:pointer; padding:10px; font-weight: bold;">Allow</a>\
          </div>\
        </div>\
      </div>\
    ';
  }

  this.show = function(title, description) {
    return new Promise(function(resolve) {
      container.innerHTML = content(title, description);
      container.querySelector('.cobrowse-allow').addEventListener('click', function(){ resolve(true); this.hide() }.bind(this));
      container.querySelector('.cobrowse-deny').addEventListener('click', function(){ resolve(false); this.hide() }.bind(this));
      if (document.body) document.body.appendChild(container);
    }.bind(this));
  }.bind(this);

  this.hide = function() {
    if (container.parentNode) {
      container.parentNode.removeChild(container);
    }
  }.bind(this);
}

// Integration with Cobrowse
CobrowseIO.confirmSession = function() {
    return new Consent().show('Session Request', 'Do you want to share your screen?');
}
@implementation CBAppDelegate // should implement CobrowseIODelegate

- (BOOL)application:(UIApplication*) application didFinishLaunchingWithOptions:(NSDictionary*) launchOptions {
    CobrowseIO.instance.delegate = self;
    // ... the rest of your app setup
    return YES;
}

-(void) cobrowseHandleSessionRequest:(CBIOSession*) session {
    // show your own UI here
    // call [session activate: <callback>] to accept and start the session
    // provide a callback to handle any errors during session initiation
    [session activate: nil];
}

@end
public class MainApplication extends Application implements CobrowseIO.SessionRequestDelegate {

    @Override
    public void onCreate() {
        super.onCreate();
        CobrowseIO.instance().setDelegate(this);

        // and the rest of cobrowse setup ...
    }

    @Override
    public void handleSessionRequest(final Activity currentActivity, final Session session) {
        // Do something here, e.g. showing a permission request dialog
        // Make sure to call activate(<callback>) on the session object if
        // you want to start the session.
        // Provide a callback if you wish to handle errors during session
        // initiation.
        session.activate(null);
    }

    // ...
}
CobrowseIO.handleSessionRequest = function(session) {
    // Replace this with your own logic
    // Just be sure to call session.activate() to
    // accept the session.
    Alert.alert(
        'Session Requested',
        'A cobrowse session has been requested',
        [
            {
                text: 'Cancel',
                onPress: () => {},
                style: 'cancel',
            },
            {text: 'OK', onPress: () => session.activate()},
        ],
        {cancelable: true},
    );
}
CobrowseIO.instance.handleSessionRequest.listen((session) {
    showDialog(
        context: context,
        builder: (BuildContext context) {
            return AlertDialog(
                title: const Text('Screen Sharing Request'),
                content: const Text('A support agent would like to use this app with you. Do you accept?'),
                actions: <Widget>[
                    TextButton(
                        onPressed: () {
                            try {
                                session.activate();
                                Navigator.of(context).pop();
                            } on PlatformException {
                                // E.g. a network error
                            }
                        },
                        child: const Text('Accept'),
                    ),
                    TextButton(
                        onPressed: () {
                            try {
                                session.end();
                                Navigator.of(context).pop();
                            } on PlatformException {
                                // E.g. a network error
                            }
                        },
                        child: const Text('Cancel'),
                    ),
                ],
            );
        },
    );
});

iOS implementation

using Cobrowse.IO.iOS;

[Register("AppDelegate")]
public class AppDelegate : UIResponder, IUIApplicationDelegate
{
    [Export("application:didFinishLaunchingWithOptions:")]
    public bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
    {
        // ... the rest of your app setup
        CobrowseIO.Instance.SetDelegate(new CustomCobrowseDelegate());
        return true;
    }
}

public class CustomCobrowseDelegate : CobrowseIODelegate
{
    public override void CobrowseHandleSessionRequest(Session session)
    {
        // show your own UI here
        // call Activate(<callback>) to accept and start the session
        // provide a callback to handle any errors during session initiation
        session.Activate(callback: null);
    }

    // ...
}

Android implementation

using Cobrowse.IO.iOS;

[Application]
public class MainApplication : Application
{
    public MainApplication()
    {
    }

    protected MainApplication(IntPtr javaReference, JniHandleOwnership transfer)
        : base(javaReference, transfer)
    {
    }

    public override void OnCreate()
    {
        base.OnCreate();
        CobrowseIO.Instance.SetDelegate(new CustomCobrowseDelegate());
        // and the rest of cobrowse setup ...
    }
}

public class CustomCobrowseDelegate : Java.Lang.Object, CobrowseIO.ISessionRequestDelegate
{
    public CustomCobrowseDelegate()
    {
    }

    public CustomCobrowseDelegate(IntPtr handle, JniHandleOwnership transfer)
        : base(handle, transfer)
    {
    }

    public void HandleSessionRequest(Activity activity, Session session)
    {
        // Do something here, e.g. showing a permission request dialog
        // Make sure to call Activate(<callback>) on the session object if
        // you want to start the session.
        // Provide a callback if you wish to handle errors during session
        // initiation.
        session.Activate(callback: null);
    }

    // ...
}

MAUI implementation

Subscribe to the SessionDidRequest event in a single place, for example in the MAUI application class:

using Cobrowse.IO;

namespace MauiSample;

public partial class App : Microsoft.Maui.Controls.Application
{
    public App()
    {
        InitializeComponent();

        CobrowseIO.Instance.License = "trial";
        CobrowseIO.Instance.Start();
        // and the rest of cobrowse setup ...
    }


    protected override void OnStart()
    {
        CobrowseIO.Instance.SessionDidRequest += OnCobrowseSessionDidRequestAsync;
    }

    private async void OnCobrowseSessionDidRequest(object sender, ISession session)
    {
        // Do something here, e.g. showing a permission request dialog
        // Make sure to call Activate(<callback>) on the session object if
        // you want to start the session.
        // Provide a callback if you wish to handle errors during session
        // initiation.
        bool allowed = await this.MainPage.DisplayAlert(
            title: "Cobrowse.io",
            message: "Allow Cobrowse.io session?",
            accept: "Allow",
            cancel: "Reject");
        if (allowed)
        {
            session.Activate(null);
        }
        else
        {
            session.End(null);
        }
    }
}
@implementation CBAppDelegate // should implement CobrowseIODelegate

- (void)applicationDidFinishLaunching:(NSNotification *)notification
    CobrowseIO.instance.delegate = self;
    // ... the rest of your app setup
}

-(void) cobrowseHandleSessionRequest:(CBIOSession*) session {
    // show your own UI here
    // call [session activate: <callback>] to accept and start the session
    // provide a callback to handle any errors during session initiation
    [session activate: nil];
}

@end
if (MessageBox.Show(
        window,
        "Would you like to authorize the Cobrowse.io screenshare session?",
        "Authorization",
        MessageBoxButton.YesNo,
        MessageBoxImage.Question
      ) == MessageBoxResult.Yes)
  await CobrowseIO.Instance.CurrentSession.Activate();
else
  await CobrowseIO.Instance.CurrentSession.End();
https://cobrowse.io/dashboard/settings