Documentation

SDK Functions

AICopy for LLM

Here's a list of all the functions and hooks supported by the UserView React Native SDK.

Imperative API

All methods are accessed through the default Upscope import or the useUpscope() hook.

import Upscope from '@upscopeio/react-native-sdk';

Connection Management

FunctionDescription
connect()Establishes a WebSocket connection to the servers.
disconnect()Closes the connection and ends any active session.
reset(reconnect?: boolean)Resets the connection, clearing all stored identities and visitor data. Pass false to stay disconnected after reset. Defaults to true.

Session Control

FunctionDescription
stopSession()Ends the current screen sharing session.
requestAgent()Signals that the visitor wants assistance from an agent.
cancelAgentRequest()Cancels a pending agent request.
getLookupCode()Requests a 4-digit lookup code from the server. Access the code via the useLookupCode() hook or lookupCodeChanged event.
sendCustomMessage(message: string)Sends a custom text or JSON message to the agent (max 5000 characters).
stopRemoteControl()Revokes the agent's remote control of the device. The session continues; only the agent's ability to interact stops. Safe no-op if no agent has control.
stopFullDeviceSharing()Stops full-device screen sharing and reverts to in-app screen sharing. Safe no-op if not active.
respondToSessionRequest(requestId: string, accept: boolean)Responds to a sessionRequest event. Pass true to start the cobrowsing session or false to decline.
respondToControlRequest(requestId: string, accept: boolean)Responds to a controlRequest event. Pass true to grant the agent remote control of the device or false to decline.
respondToFullDeviceRequest(requestId: string, accept: boolean)Responds to a fullDeviceRequest event. Pass true to allow full-device sharing (proceeds to the system permission prompt) or false to decline.

State

FunctionReturn TypeDescription
getShortId()PromiseThe visitor's unique short ID assigned by the server.
getWatchLink()PromiseThe full URL where agents can view the session (https://upscope.com/w/{shortId}).

Visitor Identification

Use updateConnection() to set or update visitor identity:

Upscope.updateConnection({
  uniqueId: 'user-123',
  callName: 'John Smith',
  tags: ['#VIP'],
  identities: ['John Smith', 'john@example.com'],
  metadata: { plan: 'enterprise', region: 'US' },
});

Only provided fields are updated. Omit a field to keep its existing value.

React Hooks

All hooks are reactive — components re-render automatically when the underlying state changes.

import {
  useConnectionState,
  useSessionState,
  useShortId,
  useLookupCode,
  useRemoteControlState,
  useFullDeviceSharingState,
  useUpscope,
} from '@upscopeio/react-native-sdk';

`useConnectionState()`

Returns the current connection state.

const connectionState = useConnectionState();
// "inactive" | "connecting" | "connected" | "reconnecting" | "error"

`useSessionState()`

Returns the current session state.

const sessionState = useSessionState();
// "inactive" | "pendingRequest" | "active" | "paused" | "ended"

`useShortId()`

Returns the visitor's short ID, or null if not yet assigned.

const shortId = useShortId();

`useLookupCode()`

Returns the current lookup code, or null if not yet generated.

const lookupCode = useLookupCode();

`useRemoteControlState()`

Returns whether an agent currently has remote control of the device.

const remoteControlState = useRemoteControlState();
// "inactive" | "pendingRequest" | "active"

`useFullDeviceSharingState()`

Returns whether full-device screen sharing is currently running.

const fullDeviceSharingState = useFullDeviceSharingState();
// "inactive" | "pendingRequest" | "active"

`useUpscope()`

Returns a stable object of imperative action methods. Safe to use as a dependency in useCallback / useEffect.

const {
  connect,
  disconnect,
  stopSession,
  requestAgent,
  cancelAgentRequest,
  sendCustomMessage,
  getLookupCode,
  reset,
  stopRemoteControl,
  stopFullDeviceSharing,
  respondToSessionRequest,
  respondToControlRequest,
  respondToFullDeviceRequest,
} = useUpscope();

Masking

Hide sensitive content from agents during screen sharing using the UpscopeMasked component.

import { UpscopeMasked } from '@upscopeio/react-native-sdk';

<UpscopeMasked>
  <TextInput secureTextEntry placeholder="Credit Card Number" />
</UpscopeMasked>

UpscopeMasked accepts all standard View props and replaces the wrapped region with a black rectangle in the agent's view. The user sees the real content as normal.

WebView Selective Redaction

Elements inside a react-native-webview WebView are redacted by CSS selector, without masking the entire WebView. Add the selectors to the dashboard Masked elements setting (or the webviewMaskedElements initialization option) and matching elements are masked in every WebView automatically.

To redact selectors specific to one screen, in addition to the configured ones, wrap the WebView:

import { UpscopeRedactedWebView } from '@upscopeio/react-native-sdk';
import { WebView } from 'react-native-webview';

<UpscopeRedactedWebView selectors={['#ssn', '.card-number']} style={{ height: 400 }}>
  <WebView source={{ uri: 'https://example.com/account' }} style={{ flex: 1 }} />
</UpscopeRedactedWebView>

Make the WebView the direct child, give UpscopeRedactedWebView the size you would give the WebView, and let the WebView fill it. The WebView is enrolled while the component is mounted; changing selectors re-enrolls it without reloading the page.

Elements matching the selectors, plus any element with the no-upscope class, are masked during capture. While the page is loading, navigating, or being scrolled, the entire WebView is masked instead (fail-closed). Selectors are matched in the top frame only; wrap the WebView in UpscopeMasked instead if an iframe can show sensitive content. An invalid selector masks the whole WebView and logs an error.

Requirements: JavaScript enabled on the WebView (the react-native-webview default). On Android the device's WebView must also support document-start scripts (WebView 89+). If JavaScript is disabled, or that support is missing, the whole WebView stays masked and the SDK logs a warning.

Redaction works by injecting a script into the page, and configured selectors enroll every WebView in the app, so this reaches third-party pages too. Wrap a WebView that must stay untouched in UpscopeMasked instead of UpscopeRedactedWebView.