@upscopeio/viewer-sdk

React components and hooks to embed the Upscope co-browsing viewer in your own application, instead of opening the hosted watch link.

Installation

npm install @upscopeio/viewer-sdk

React 18 (react and react-dom) are peer dependencies.

Usage

import { Content, ViewerProvider, useUpscopeViewer } from "@upscopeio/viewer-sdk";

function CobrowsingViewer({ region, shortId, token }: { region: string; shortId: string; token: string }) {
    return (
        <ViewerProvider idleDisconnectSeconds={600} region={region} shortId={shortId} token={token}>
            <Screen />
        </ViewerProvider>
    );
}

function Screen() {
    const { connected, endSession, latestActiveConnectionId } = useUpscopeViewer();

    return (
        <div>
            <Content
                activeConnectionId={latestActiveConnectionId}
                color="red"
                controlTool="cursor"
                maxHeight={1200}
                maxWidth={1200}
            />
            {connected && endSession && <button onClick={() => endSession()}>End session</button>}
        </div>
    );
}

ViewerProvider connects to the visitor's session and exposes it through hooks (useUpscopeViewer, useUpscopeConnection); Content renders the visitor's screen and forwards the selected control tool. Audio and video calls are available through AudioProvider/VideoProvider.