Website Installation
Javascript Installation
The most common installation method involves adding the Javascript snippet to your website.
You'll find your Upscope installation code within your Upscope dashboard.
Copy and paste the code within the <body> tag of your html file, ensuring it's on every page you'd like to co-browse on.
If you would prefer to add it to a JavaScript file, remove the <script> and </script> tags from the code.
Recommendation
Make sure that the code loads as fast as possible by adding it as one of the first things that execute on the page.
While you can install Upscope through Google Tag Manager or Segment, the preferred method is to paste the installation code directly on your website, as this will result in faster load times.
Installation remains the same whatever front end framework you use. Upscope works fine with React, Angular, and most other modern Javascript frameworks. All you need to do is add the code to the page.
Other Installation Methods
Install the Upscope SDK:
npm install --save @upscopeio/sdkImport the Upscope Object:
import Upscope from '@upscopeio/sdk';Initialize Upscope:
Upscope("init", {
apiKey: "YOUR_API_KEY"
});Note
You can use the Upscope object wherever required, and call the same functions that are available with the regular installation. Initialization (init) needs to be called first and must include your API key.
Installation
To incorporate Upscope into your React project, first install the React-specific package using npm:
npm install --save @upscopeio/reactImport the UpscopeProvider component and wrap your main application component with it.
import { UpscopeProvider } from '@upscopeio/react';
<UpscopeProvider apiKey="<public_api_key>" enabled={true/false}>
{/* rest of your app */}
</UpscopeProvider>Upscope will share the entire page, regardless of where the UpscopeProvider is added in your component hierarchy.
Configuration
Public API Key
You can find yours in the installation page
The UpscopeProvider accepts props that you can use for additional configuration settings. These settings are similar to the ones you would specify using the init function in the standard SDK. For example, to specify a unique identifier for a user, you can do:
<UpscopeProvider apiKey="<public_api_key>" enabled={true} uniqueId={user.email}>
{/* Your application code here */}
</UpscopeProvider>Using Upscope Functionality in Components
To use Upscope features in your individual components, you can use the useUpscope hook:
import { useUpscope } from '@upscopeio/react';
function YourComponent() {
const {
Upscope, // Upscope SDK object
shortId, // Connected shortId or undefined
getLookupCode, // Asynchronous function to get lookup code
listen, // Event listener function
reset, // Reset function
isSharing // Boolean indicating active session
} = useUpscope();
// Your component logic here
}Additional Utilities: Masking and Disabling Remote Control
Upscope offers utility components to mask sensitive data and disable remote control on specific UI elements.
To mask sensitive information:
import { Masked, NoRemoteControl } from '@upscopeio/react';
function YourComponent() {
return (
<>
<Masked>
{/* Sensitive Info */}
</Masked>
<NoRemoteControl>
{/* Control Elements */}
</NoRemoteControl>
</>
);
}To disable remote control on a particular element:
import { NoRemoteControl } from '@upscopeio/react';
function YourComponent() {
return (
<>
<NoRemoteControl>
<label>
Accept Terms of Service
<input type="checkbox" />
</label>
</NoRemoteControl>
</>
);
}By following these steps and guidelines, you can fully integrate Upscope into your React application and leverage its features effectively.
Verifying Correct Installation
To verify if the code is installed correctly, visit userview.com and check for a list of current users on pages where you placed the JavaScript code.
Open a separate incognito window to test the installation.
Once the screen sharing session begins, you can scroll, click, highlight, and spotlight using the tools on the bottom right of the UserView viewing window.