Listening for events

Learn how to listen to the various events that the Cobrowse SDKs exposes to hook in to the lifecycle of a Cobrowse session.

The Cobrowse SDKs offer a range of events that you can use to hook in to the lifecycle of a Cobrowse session. The lifecycle of a Cobrowse session is based on the following states:

pending - The session has been created, but an agent or device has not yet joined

authorizing - The session is waiting to start, but confirmation from the user is required

active - The screen share session is in progress, frames are streaming

ended - The session is finished and can no longer be used or updated

The typical transition between states of a Cobrowse session is: pending ( -> authorizing) -> active -> ended. If session authorization is disabled (i.e. no user consent is required), the authorizing step will be skipped.

Session Lifecycle Events

You can get insight into the state of the session using the following lifecycle events:

Session Loaded Events

When a Cobrowse session is requested, either by the agent via a push channel, or via a 6 digit code, an event is triggered in the device-side SDKs. The loaded event signifies that a session is initialising, this event is a good opportunity to any one-time setup for the session. To listen to this event:

CobrowseIO.on('session.loaded', session => {
    console.log('A session was loaded', session)
})

Session Updated Events

The session updated event is trigged multiple times throughout the life of a session. This signifies that a change to the session configuration has been made, potentially to any of the session properties. For example, the session has been switched into full device mode, or remote control was requested, or a range of other properties. You can tap in to this event to check the new state of the session:

CobrowseIO.on('session.updated', session => {
    console.log('A session was updated', session)
})

Session Ended Events

The session has been ended and the screenshare has stopped. An ended session cannot be restarted or modified. To listen for the session ended event:

CobrowseIO.on('session.ended', session => {
    console.log('A session was ended', session)
})

Delegate implementation

Our SDKs offer many API touch points for you to customize the behaviour of your integration. These are primarily exposed through the implementation of a delegate object which you then pass to the Cobrowse SDK.

On iOS we offer a protocol you can implement called CobrowseIODelegate. This offers a range of callbacks you can implement such as the lifecycle methods described above, as well as callbacks to control session UIs, consents and redactions.

To assign your delegate implementation, you should use:

CobrowseIO.instance.delegate = /* your delegate instance */

On Android we offer a range of delegate interfaces that you can implement depending on the functionality you wish to alter.

You can only have one delegate instance configured, so the same instance must be used to implement any of the interfaces that you wish to use from the list here.

CobrowseIO.Delegate - provides callbacks for session lifecycle events

CobrowseIO.SessionLoadDelegate - provides callbacks for session lifecycle events

CobrowseIO.SessionRequestDelegate - for handling session consent requests

CobrowseIO.RemoteControlRequestDelegate - for session remote control consent

CobrowseIO.SessionControlsDelegate - for altering session indicator UIs

CobrowseIO.RedactionDelegate - an option for passing redactions to the SDK

To assign your delegate implementation, you should use:

CobrowseIO.instance().setDelegate(/* your delegate implementation */);

iOS

To use the Delegate objects within React Native you can follow the examples below.

Note: For newer versions of React Native you may need to to enable C++ modules to use the delegate. To do this, you can pass the -fmodules or -fcxx-modules flags to the "Other C++ Flags" under your project build settings. Remember to do this for any build configuration (ie: Debug, Release and so on).

Ensure that your AppDelegate implements the RCTCobrowseIODelegate protocol.

// ios/Example/AppDelegate.h
// ...
#import <RCTCobrowseIO.h>

@interface AppDelegate : UIResponder <
    UIApplicationDelegate, RCTBridgeDelegate, RCTCobrowseIODelegate
>

You should then instantiate the delegate in the application: didFinishLaunchingWithOptions: function as such:

// ios/Example/AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
    // ...
    RCTCobrowseIO.delegate = self;
}

Finally, you can define the methods as required. You can refer to this commit on our SDK for an example.

Android

Ensure that your MainApplication implements the desired delegate (e.g. CobrowseIO.RedactionDelegate) and assign the instance of your application to the CobrowseIOModule.delegate. For this example we'll use the RedactionDelegate:

// android/app/src/main/java/com/example/MainApplication.java

// ...
import io.cobrowse.reactnative.CobrowseIO;
import io.cobrowse.reactnative.CobrowseIOModule;

public class MainApplication extends Application implements ReactApplication, CobrowseIO.RedactionDelegate {
    // ... 
    CobrowseIOModule.delegate = this;
}

From this you can override the methods you need. You can refer to this commit for a reference implementation within our React Native example app.

PreviousInitiate sessions with push NextFull device capabilities

Last updated 3 months ago